Built-in List Control Editors in a Form View

Description

You can create built-in list controls to use inside an editor that edits items in a Form View control. Because the 'Editor-List' is an editor only one of these controls needs to be defined in order for multiple items to make use of it. The example below uses an Editor-List to edit the 'City' and 'Country' fields. You can easily add filters to items that use an editor so that, for example, an editor-list that shows cities will only show cities that apply to the selected country in a Form View.

images/bilc76.png
A Built-in List control (lower right) selects cities filtered by country to enter into a FormView (lower left) and edit a list (top).

How to create a Built-in list in a Form View control is described in the guide below and in this video. You can also download the component.

Create a List Control 

  1. In the UX Builder on the UX Controls page open the Data Controls menu. Click on the [List] option to add a list control to the component.

    images/bilc2.png
  2. In the properties list's List Properties section click the ... button next to the 'List properties' property to open the List Builder.

    images/bilc3.png
  3. On the List Builder's Data Source pane set the 'Data Source Type' to 'SQL'.

    images/bilc4.png
  4. In the SQL Data Source section click the ... button next to the 'Connection string' property. Set the connection string to the 'Northwind' database.

    images/bilc5.png
  5. Click the ... button next to the 'Table name' property and select the 'Customers' table.

    images/bilc6.png
  6. Click the ... button next to the 'Field list' property and select these fields: 'CustomerID', 'CompanyName', 'ContactName', 'City', and 'Country'.

    images/bilc7.png
  7. Open the 'List Layout' pane. Use the blue > arrow to move the five data fields from the 'Available Fields' list into the 'Columns in List' section. Click OK to close the List Builder.

    images/bilc8.png

Add the FormView Control and EditorSet 

  1. On the UX Controls page, select the list control. Open the 'Other Controls' menu and click on the [Form View] option to add a Form View control to the component.

    images/bilc9.png
  2. Select the form view control in the tree. Open the 'Containers' menu and click on the [Container] option.

    images/bilc10.png
  3. From the Container type list select the 'EditorSet' option and click 'Insert After'.

    images/bilc11.png
  4. Select the EditorSet in the tree. Open the Defined Controls menu and select the 'Editor-List' option. Give this Editor the name 'EDITOR_LIST'.

    images/bilc12.png
  5. Select the EditorSet in the tree. From the Defined Controls menu select the 'Editor-TextBox' option. Use the default name and click OK.

    images/bilc15.png
  6. Select entire EditorSet and everything inside it. Open the 'Containers' menu and click on the [Container] option.

    images/bilc16.png
  7. From the 'Container type' list select the 'None' option and click 'OK'

    images/bilc17.png

Adding to the Client-Side Data Cache 

  1. On the UX Controls page click locate the 'Menu' dropdown in the Controls page toolbar. Click on the 'Client-side Data Cache Editor' option.

    images/bilc18.png
  2. In the Client-side Data Cache Editor click on the 'Add item' button.

    images/bilc19.png
  3. Name the new item 'cities' and click OK.

    images/bilc20.png
  4. Select the cities item and click the 'Edit item' button.

    images/bilc21.png
  5. From the Item type menu select the 'SQL Query' choice.

    images/bilc22.png
  6. In the SQL Query section of the properties list that appears click the ... button next to the 'Connection string' property. Set the connection string to 'Northwind'.

    images/bilc23.png
  7. Click on the ... button next to the 'Table name' property and select the 'Customers' table.

    images/bilc24.png
  8. Click the ... button next to the 'Field list' property and select the 'City' and 'Country' fields.

    images/bilc25.png
  9. Click the ... button next to the 'Order' property. Select the 'City' and 'Country' fields again. Make sure to separate the two fields with a comma.

    images/bilc26.png
  10. Check the 'Distinct' checkbox and click OK.

    images/bilc27.png
  11. Click the 'Add item' button.

    images/bilc28.png
  12. Give the new item the name 'countries' and click OK.

    images/bilc29.png
  13. Select the 'countries' item and click the 'Edit item' button.

    images/bilc30.png
  14. In the 'Edit Client-side Data Item' select the 'SQL Query' option.

    images/bilc31.png
  15. In the SQL Query section of the properties list click the ... button next to the 'Connection string' property. Create a connection string to the 'Northwind' database.

    images/bilc32.png
  16. Click the ... button next to the 'Table name' property and select the 'Customers' table.

    images/bilc33.png
  17. Hit the ... button next to the 'Field list' property and select the 'Country' field.

    images/bilc34.png
  18. Click the ... button next to the 'Filter' property.

    images/bilc35.png
  19. Define the following filter and click OK.

    Country<>''
    images/bilc36.png
  20. Click the ... button next to the 'Order' property and select the 'Country' field.

    images/bilc37.png
  21. Check the checkbox next to the 'Distinct' property and click OK to close the 'Edit Client-side Data Item' dialog. Click OK again to close the Client-side Data Cache Editor.

    images/bilc38.png

Define the FormView 

  1. On the UX Controls page, click the Form View control in the control tree.

    images/bilc39.png
  2. In the properties list on the right click the ... button next to the 'Form properties' property in the Form Properties section. The Form View Builder should open.

    images/bilc40.png
  3. On the Form View Builder's Data Source pane. Set the 'Datasource type' to 'List'.

    images/bilc41.png
  4. Click the ... button next to the 'List name' property and select the list control 'list1'. Click OK.

    images/bilc42.png
  5. Open the 'Form Layout' pane and click the 'Add item' button.

    images/bilc43.png
  6. In the 'Select Control Type' dialog's Category menu select 'Data Controls'. In the Control menu select the [Label] option. Select all the data fields in the list on the right and click OK.

    images/bilc44.png
  7. Click the 'Add item' button again.

    images/bilc45.png
  8. In the 'Category' menu select 'Pre-defined Controls' option. From the 'Control' menu select [Save Form Edits/ Cancel Edits Button] option and click OK.

    images/bilc46.png
  9. Open the Fields pane. Select the 'CUSTOMERID' field in the 'Fields in Data Source' menu.

    images/bilc47.png
  10. Click the ... button next to the 'Editor set' property in the 'Editing' section of the properties list.

    images/bilc48.png
  11. In the 'Select Editor' dialog select the 'EDITORSET_1' in the 'Editor Set' list and 'EDITOR_2' in the Editor list. Click the 'Assign selection to multiple fields' button.

    images/bilc49.png
  12. Select the 'CustomerID', 'CompanyName', and 'ContactName' fields and click OK.

    images/bilc50.png
  13. Select the 'City' field in the 'Fields in Data Source' list. Click the ... button next to the 'Editor set' property.

    images/bilc51.png
  14. In the Select Editor choose the 'EDITORSET_1' option in the 'Editor Set' list. In the 'Editor' list select the 'EDITOR_LIST' option. Click the 'Assign selection to multiple fields' button.

    images/bilc52.png
  15. Select the 'City' and 'Country' options and click OK.

    images/bilc53.png
  16. In the 'Fields in Data Source' menu, click the 'City' field. In the properties list on the right. click the ... button next to the 'Editor configuration genie' property.

    images/bilc54.png
  17. In the 'Form View Editor Configuration Genie' check the 'Show List column title(s)' property checkbox.

    images/bilc55.png
  18. Click the ... button next to the 'Customize Titles' property.

    images/bilc56.png
  19. Add the following code to the Custom Titles dialog and click OK:

    {
        "CITY": "Cities (for selected country)"
    }
    images/bilc57.png
  20. Set the 'List data source' property dropdown to 'Client-side Data Cache'.

    images/bilc58.png
  21. Click the ... button next to the 'Client-side data cache item' property and select the 'cities' item; that you defined in the previous section of this guide.

    images/bilc59.png
  22. Click the ... button next to the 'Column(s) from data source to show in List' property.

    images/bilc60.png
  23. Select 'Country' and 'City' and click OK.

    images/bilc61.png
  24. Click the ... button next to the 'Return value' property. Set the Return value to be City

    images/bilc62.png
  25. Check the "Hide the 'Cancel' button" checkbox.

    images/bilc63.png
  26. In the 'Dynamic Filtering of LIST Choices section check the 'Filter LIST choices' checkbox.

    images/bilc64.png
  27. Click the ... next to the 'Filter expression' property.

    images/bilc66.png
  28. Click the 'Insert field name' button and select the 'Data field' option. Choose the 'Country' field.

    images/bilc65.png
  29. Put two equals sign after the data field, '==', and click the 'Insert field name'. Click the 'Form field' option and select the 'Country' field again. The expression should look like this:

    data.Country == '{formData.Country}'
    images/bilc67.png
  30. Click OK. Then click OK again. Select the 'Country' field in the 'Fields in Data Source' list.

    images/bilc68.png
  31. Click the ... button next to the 'Editor configuration genie' property.

    images/bilc69.png
  32. From the 'List data source' property's dropdown select 'Client-side Data Cache'.

    images/bilc70.png
  33. Click the ... button next to the 'Client-side data cache item' property and select 'countries'.

    images/bilc71.png
  34. Click the ... button next to the 'Fields to blank out on Form when user makes a selection in List' property. Set this property to 'City'

    images/bilc72.png
  35. Click OK to close the genie and OK again to close the Form View Builder. Run the component in Live Preview.

    images/bilc73.png
  36. Select a row in the list control. The Form View should appear.

    images/bilc74.png
  37. Click on the Country field to edit it and you should be presented with a list of all of the countries in the data. Change the Country.

    images/bilc75.png
  38. Try changing the 'City' field in the FormView. The editor-list control should filter the city options based on the selected country.

    images/bilc76.png