HTML Presentation Object: Multiselect dropdown list

This is an example of a multiselect dropdown list implemented using the HTML Presentation Object. The list gets its options from a dataset, and the selected values are stored to a context variable as a JSON string array, e.g. ["value1", "value2", "value3"].

To use the dropdown list, create a dataset with name options. The dataset must contain at least two columns: label and value. By default, the dropdown list sets the selections to context variable dropdownListSelections.

Following settings can be changed:

• Used dataset identifier can be changed using datasetIndentifier javascript variable.
• The context variable to store selections, can be changed using valueContextVariable javascript variable.
• Dataset column name which is used as the visible labels in the dropdown list, can be changed using labelColumnName javascript variable.
• Dataset column name which is used as the value (that is stored to the context variable) in the dropdown list, can be changed using valueColumnName javascript variable.
• updateVariableOnlyWhenClosing determines whether the context variable is updated in every item change or only when the dropdown list is closed.
• Dropdown list height can be changed using popupHeight option.
• Watermark text can be change using watermarkText option.
• Filter can be shown/hidden using enableFilterSearch option.

Following is the HTML code for the dropdown list:

<div class="label<#uniqueId>"><#label>:</div>
<input type="text" id="container<#uniqueId>" />

<style>
.label<#uniqueId> {
  margin: 5px 0px 0px 11px;
  font-size: 15px;
}
.list<#uniqueId> {
  margin: 0px 0px 0px 10px;
}
.e-input {
  cursor: pointer !important;
}
.e-options {
  padding-top: 4px !important;
  padding-bottom: 5px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}
</style>

<script>
(function() {
var datasetIndentifier = "options";
var valueContextVariable = "dropdownListSelections";
var labelColumnName = "label";
var valueColumnName = "value";
var updateVariableOnlyWhenClosing = false;
var poData;
var width = 0;
var selectedValues;
var listOpen = false;

window["<#datasetChangeFunction>"] = function(datasetIdentifier, datasetChangeCallbackFunction) {
  if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable);
}

function myDatasetAvailable(datasetData) {
  if (datasetData == null || datasetData.sheets == null || datasetData.sheets.length == 0 || datasetData.sheets[0] == null || datasetData.sheets[0].values == null || datasetData.sheets[0].values.length == 0) return;
  poData = [];
  for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) {
    var rowObject = {};
    for (var column = 0; column < datasetData.sheets[0].values.length; column++) {
      rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value;
    }
    poData.push(rowObject);
  }
  initializePO();
}

window["<#contextChangeFunction>"] = function(changedContextVariables) {
  if (changedContextVariables[valueContextVariable] != null) {
    try {
      selectedValues = JSON.parse(changedContextVariables[valueContextVariable]);
    } catch (exception) {
      return;
    }
    var dropdownList = $("#container<#uniqueId>").data("ejDropDownList");
    if (dropdownList != null) {
      var selectedItemIndeces = dropdownList.model.selectedItems;
      var previouslySelectedValues = [];
      for (var i = 0; i < selectedItemIndeces.length; i++) {
        previouslySelectedValues.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]);
      }
      selectedValues.sort();
      previouslySelectedValues.sort();
      if (previouslySelectedValues.length != selectedValues.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues[i]})) {
        initializePO();
      }
    }
  }
}

window["<#resizeFunction>"] = function(newWidth, newHeight) {
  width = newWidth;
  initializePO();
}

function initializePO() {
  if (width == 0) return;
  if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy();
  var dropdownList = $("#container<#uniqueId>").ejDropDownList({
    dataSource: poData,
    fields: { text: labelColumnName, value: valueColumnName },
    showCheckbox: true,
    watermarkText: "<#watermark>",
    multiSelectMode: "visualmode",
    enableFilterSearch: true,
    popupHeight: "400px",
    cssClass: "list<#uniqueId>",
  }).data("ejDropDownList");
  dropdownList.unCheckAll();
  dropdownList.selectItemByValue(selectedValues);
  dropdownList.option("change", valueChanged);
  dropdownList.option("checkChange", valueChanged);
  dropdownList.option("popupShown", valueChanged);
  dropdownList.option("popupHide", valueChanged);
  var dropdownListWidth = width - 18;
  dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth));
}

function valueChanged(action) {
  if (action != null && action.type == "popupShown") {
    listOpen = true;
    return;
  } else if (action != null && action.type == "popupHide") {
    listOpen = false;
  }

  if (!updateVariableOnlyWhenClosing || ((action != null && action.type == "change" && !listOpen) || (action != null && action.type == "popupHide"))) {
  var dropdownList = $("#container<#uniqueId>").data("ejDropDownList");
  if (dropdownList == null) return;
  var selectedItemIndeces = dropdownList.model.selectedItems;
  var selectedItems = [];
  for (var i = 0; i < selectedItemIndeces.length; i++) {
    selectedItems.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]);
  }
  selectedItems.sort();
  if (valueContextVariable != null && valueContextVariable != "") window.parent.setSessionVariable(valueContextVariable, JSON.stringify(selectedItems));
}
}
}())
</script>