• Displayed and Stored Values in DropdownBox Controls
• Dynamically Re-Populate Choices in a Dropdown Box
• Populate from data cache
• Populating Cascading Dropdowns from Data Cache
• Using a Dropdown Box Control to Populate a List with SQL Data

Displayed and Stored Values in DropdownBox Controls

Description

Dropdown box controls can have both displayed and stored values that are defined using static data. A small amount of Javascript can be used in order to read both the stored and displayed values.

An alert box can display values defined in a dropdown box

This process is described in this video and in the following guide.

Create Alert Boxes that Read Stored and Displayed Values

1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [DropdownBox] option to add a dropdown box control to the component. Give the dropdown box the name 'dd1'.

   

2. Highlight the dropdown control in the controls tree. In the properties list on the right click the [...] button next to the Choices property in the DropDownBox Properties section.

   

3. In the 'Define Choices' dialog select the 'Static' option in the 'Choices are' menu. Enter the following in the 'Static Choices' definition area. Click OK,

   alpha|1
   beta|2
   gamma|3

   

4. On the UX Controls page open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.

   

5. Highlight the button control in the controls tree. In the properties list on the right set the 'Button text' property to read 'Get value'.

   

6. Scroll down the properties list to the 'Javascript - (Touch, Mouse, Pointer Events)' section. Click the [...] button next to the 'click' property.

   

7. In the 'Edit Click Event' dialog select the 'Text mode' radio button in the editing mode menu. Add the following code to the click event definition and hit 'Save'.

   var x = {dialog.object}.getValue('dd1');
   alert('value: ' + x);

   
   This is the standard get value method of the UX component.

8. Return to the 'Other Controls' menu and click on the [Button] option to add a second button to the component.

   

9. Set the 'Button text' for the second button to read 'Get display value'.

   

10. Scroll down to the 'Javascript - (Touch, Mouse, Pointer Events)' section and click the [...] button next to the 'click' property.

    

11. In the Edit Click Event dialog select the 'Text mode' radio button and add the following javascript to the click event definition, then hit the 'Save' button.

    var x = {dialog.object}.getValue('dd1');
    var ele = {dialog.object}.getPointer('dd1');
    var e2 = ele.children;
    
    var arr = [];
    for(var i = 0; i < e2.length; i++) {
         delete obj;
         obj = {};
         obj.text = e2[i].text;
         obj.value = e2[i].value;
         arr.push(obj);
    }
    
    var indx = {dialog.object}._findArrayProp(arr, 'value',x);
    var display = arr[indx].text;
    alert("value: " + x + ' --display: ' + display);

    

    The first line of code gets the stored value using the standard getValue() method and assigns the value to the variable 'x'.

    In the second line, a variable named 'ele' is defined that gets a pointer to the dropdown box control itself, 'dd1'. A variable named 'e2' is then used to find out all of the children that exist in the dropdown box control. The children of the control are the elements in the DOM that contain the selections that the dropdown list displays.

    The variable 'arr' creates an empty array. A 'for' loop then loops over all of the children and pushes all of the data it finds into the 'arr' array, thus populating it. The 'arr' array is now an array of objects.

    The children each have a text property and a value property, and each object in the new array contains these two properties. The _findArrayProp() method is then called. This is a utility method that takes for its arguments the name of an array, the name of the property in the array that you want to search on, and the value that you want to find. The variable named 'display' is then assigned to the text value that the findArrayProp() method retrieves. The value of the 'display' variable is then used to show the text property for the selected object using a javascript alert.

12. Run the component in Live Preview. Select one of the entries in the dropdown.

    

13. Click the 'Get value' button. The stored value will be displayed in a javascript alert. Close the alert.

    

14. Click the 'Get display value' button. The displayed value from the dropdown box should appear in a javascript alert.