HTML Presentation Object: Multiselect dropdown list

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

To get the dropdown list working with the default settings, create a dataset with name listOptions. The dataset must contain at least two columns: label and value. By default, the dropdown list sets the selections to context variable listSelection.

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 listSelection 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:

<input type="text" id="container<#uniqueId>" />

<style>
.e-boxes {
  background-color: #6598cb !important;
}
.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>
var datasetIndentifier = "listOptions";
var valueContextVariable = "listSelection";
var labelColumnName = "label";
var valueColumnName = "value";
var updateVariableOnlyWhenClosing = false;
var poData<#uniqueId>;
var width<#uniqueId> = 0;
var selectedValues<#uniqueId>;
var listOpen = false;

function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) {
  if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable<#uniqueId>);
}

function myDatasetAvailable<#uniqueId>(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<#uniqueId> = [];
  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<#uniqueId>.push(rowObject);
  }
  initializePO<#uniqueId>();
}

function <#contextChangeFunction>(changedContextVariables) {
  if (changedContextVariables[valueContextVariable] != null) {
    try {
      selectedValues<#uniqueId> = 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<#uniqueId>.sort();
      previouslySelectedValues.sort();
      if (previouslySelectedValues.length != selectedValues<#uniqueId>.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues<#uniqueId>[i]})) {
        initializePO<#uniqueId>();
      }
    }
  }
}

function <#resizeFunction>(newWidth, newHeight) {
  width<#uniqueId> = newWidth;
  initializePO<#uniqueId>();
}

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

function valueChanged<#uniqueId>(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>