Difference between revisions of "HTML Presentation Object: Multiselect dropdown list"
Jump to navigation
Jump to search
Line 1: | Line 1: | ||
− | This | + | This is an example of a multiselect dropdown list implemented using the HTML Presentation Object. The list gets its options from a [[Datasets_in_QPR_UI|dataset]], and the selected values are stored to a context variable as a JSON string array, e.g. '''["value1", "value2", "value3"]'''. |
− | To | + | 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: | Following settings can be changed: | ||
* Used dataset identifier can be changed using '''datasetIndentifier''' javascript variable. | * Used dataset identifier can be changed using '''datasetIndentifier''' javascript variable. | ||
− | * The context variable to store selections, can be changed using ''' | + | * 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 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. | * 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. | ||
Line 16: | Line 16: | ||
<pre> | <pre> | ||
+ | <div class="label<#uniqueId>"><#label>:</div> | ||
<input type="text" id="container<#uniqueId>" /> | <input type="text" id="container<#uniqueId>" /> | ||
<style> | <style> | ||
+ | .label<#uniqueId> { | ||
+ | margin: 5px 0px 0px 11px; | ||
+ | font-size: 15px; | ||
+ | } | ||
+ | .list<#uniqueId> { | ||
+ | margin: 0px 0px 0px 10px; | ||
+ | } | ||
.e-input { | .e-input { | ||
cursor: pointer !important; | cursor: pointer !important; | ||
Line 31: | Line 39: | ||
<script> | <script> | ||
− | var datasetIndentifier = " | + | (function() { |
− | var valueContextVariable = " | + | var datasetIndentifier = "options"; |
+ | var valueContextVariable = "dropdownListSelections"; | ||
var labelColumnName = "label"; | var labelColumnName = "label"; | ||
var valueColumnName = "value"; | var valueColumnName = "value"; | ||
var updateVariableOnlyWhenClosing = false; | var updateVariableOnlyWhenClosing = false; | ||
− | var poData | + | var poData; |
− | var width | + | var width = 0; |
− | var selectedValues | + | var selectedValues; |
var listOpen = false; | var listOpen = false; | ||
− | + | window["<#datasetChangeFunction>"] = function(datasetIdentifier, datasetChangeCallbackFunction) { | |
− | if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable | + | if (datasetIdentifier == datasetIndentifier) datasetChangeCallbackFunction(myDatasetAvailable); |
} | } | ||
− | function 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; | 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 | + | poData = []; |
for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) { | for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) { | ||
var rowObject = {}; | var rowObject = {}; | ||
Line 53: | Line 62: | ||
rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value; | rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value; | ||
} | } | ||
− | poData | + | poData.push(rowObject); |
} | } | ||
− | initializePO | + | initializePO(); |
} | } | ||
− | + | window["<#contextChangeFunction>"] = function(changedContextVariables) { | |
if (changedContextVariables[valueContextVariable] != null) { | if (changedContextVariables[valueContextVariable] != null) { | ||
try { | try { | ||
− | selectedValues | + | selectedValues = JSON.parse(changedContextVariables[valueContextVariable]); |
} catch (exception) { | } catch (exception) { | ||
return; | return; | ||
Line 72: | Line 81: | ||
previouslySelectedValues.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | previouslySelectedValues.push(dropdownList.model.dataSource[selectedItemIndeces[i]][valueColumnName]); | ||
} | } | ||
− | selectedValues | + | selectedValues.sort(); |
previouslySelectedValues.sort(); | previouslySelectedValues.sort(); | ||
− | if (previouslySelectedValues.length != selectedValues | + | if (previouslySelectedValues.length != selectedValues.length || !previouslySelectedValues.every(function(v,i) { return v === selectedValues[i]})) { |
− | initializePO | + | initializePO(); |
} | } | ||
} | } | ||
Line 81: | Line 90: | ||
} | } | ||
− | + | window["<#resizeFunction>"] = function(newWidth, newHeight) { | |
− | width | + | width = newWidth; |
− | initializePO | + | initializePO(); |
} | } | ||
− | function initializePO | + | function initializePO() { |
− | if (width | + | if (width == 0) return; |
if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy(); | if ($("#container<#uniqueId>").data("ejDropDownList") != null) $("#container<#uniqueId>").data("ejDropDownList").destroy(); | ||
var dropdownList = $("#container<#uniqueId>").ejDropDownList({ | var dropdownList = $("#container<#uniqueId>").ejDropDownList({ | ||
− | dataSource: poData | + | dataSource: poData, |
fields: { text: labelColumnName, value: valueColumnName }, | fields: { text: labelColumnName, value: valueColumnName }, | ||
showCheckbox: true, | showCheckbox: true, | ||
− | watermarkText: " | + | watermarkText: "<#watermark>", |
multiSelectMode: "visualmode", | multiSelectMode: "visualmode", | ||
enableFilterSearch: true, | enableFilterSearch: true, | ||
popupHeight: "400px", | popupHeight: "400px", | ||
− | + | cssClass: "list<#uniqueId>", | |
− | |||
− | |||
}).data("ejDropDownList"); | }).data("ejDropDownList"); | ||
dropdownList.unCheckAll(); | dropdownList.unCheckAll(); | ||
− | dropdownList.selectItemByValue(selectedValues | + | dropdownList.selectItemByValue(selectedValues); |
− | dropdownList.option("change", "valueChanged | + | dropdownList.option("change", valueChanged); |
− | var dropdownListWidth = width | + | dropdownList.option("checkChange", valueChanged); |
+ | dropdownList.option("popupShown", valueChanged); | ||
+ | dropdownList.option("popupHide", valueChanged); | ||
+ | var dropdownListWidth = width - 18; | ||
dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth)); | dropdownList.option("width", (dropdownListWidth < 10 ? 10 : dropdownListWidth)); | ||
} | } | ||
− | function valueChanged | + | function valueChanged(action) { |
if (action != null && action.type == "popupShown") { | if (action != null && action.type == "popupShown") { | ||
listOpen = true; | listOpen = true; | ||
Line 128: | Line 138: | ||
} | } | ||
} | } | ||
− | </script></pre> | + | }()) |
+ | </script> | ||
+ | </pre> | ||
[[Category: QPR UI]] | [[Category: QPR UI]] |
Latest revision as of 21:29, 20 March 2018
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>