Advanced Controls


Below are the advanced components that may be used while designing forms:


Survey Control displays a survey question in the published form with a set of predefined responses for the user to select from.

Grid Control displays a grid in the published form where users can enter a repeating set of items. You can define columns to represent data points that users will enter. Users can add rows to the grid in the published form.

Region acts as a placeholder that can highlight and contain groups of controls.

Section is similar to a Region but it has more options, such as adding a Title and making it collapsible.

Cascading List is used when a value selected on one list determines the options that are displayed on another list. Cascading List requires two or more controls. The first Cascading control is the master list, and the other Cascading controls are the sub-lists.


Survey Control

Survey Control displays a survey question in the published form with a set of predefined responses for the user to select from. Mulitple survey controls can be positioned on a form with different questions/responses defined for each. 

Properties for a Survey Control include:


Grid Control

Grid Control displays a grid in the published form where users can enter a repeating set of items. You can define columns to represent data points that users will enter. Users can add rows to the grid in the published form.

  1. Click Modify Grid Settingsfrom the Properties tab or directly on the control.

  2. After the Configure Grid dialog opens, select an existing Property Array from the list of the Binding section.
    Or add a new property array by clicking the Add Property Array   icon, typing the name of the new property array in the Property Array field, and clicking the   icon to confirm the property array. If you have entered an incorrect property array, you can click the  icon.  


  3. Once you have selected a property array, add columns by clicking the Add Column  icon from the right side of the Columns section. You will need to select a column type for the dropdown list.


  4. To delete a column, click the Delete Column  icon. You can move a column to a different position in the order of columns by clicking the  icon. Enter a name for each column in the Column Label field. When you are finished configuring the grid, click Save.


    Properties for the Grid control column types are the same as the corresponding Basic controls. For more info about these properties, refer to the Basic Control section.
    • Binding: Click the   icon to add a binding. To remove an existing binding, click the "X" icon. Note: Bindings are optional for the Column control.

    • Width % field, enter the width of the column in percentage.

      Note: The ‘Extra Horizontal Space’ feature above the column info will calculate the remaining percentage available to be used for addition columns.

    • Multiline: Allows information to be display on multiple lines in the column if required

  5. You can edit the appearance of the Grid Control from the Style Pick from an existing Style or create a new Style. You can enter the width of the entire grid in the Width field. In the Height fields you can enter the Min and Max height of the entire grid. In the Column Width field, you can enter the minimum width of each column.


    Note: To ensure that users can add rows in the published form, it is recommended to enter a height of 200px or higher.
  6. Once the Grid Control is published users can add rows by clicking Add Row Or delete single or multiple rows by checking off the box beside the row and clicking the Delete Row(s) button. To add information to the columns, select the required cell and enter the information or pick from the dropdown or date picker.



Region

Region is a place holder that can highlight and contain groups of controls.

Why we use regions:

Properties for a Region control include:


Section

Section is similar to a Region, but it has more options, such as adding a Title and making it collapsible.

Why we use Sections:

Properties for a Section control include:


Cascading List

Cascading List control is used when the value selected on one list determines the values that is displayed on another list. Cascading List requires two or more controls. The first Cascading control is the master list, and the other Cascading controls are the sub lists.

  1. For this example, we want the form to specify the Make and Model of car. The first Cascading list control will be the Car Make list, and the second Cascading list control will be the Car Model list.

    Note: The goal is when selecting a Make from the Make list, it activates which models appear in the model list.


  1. Once the Cascading lists have been added and named, we need to define the List Group. You can select an existing list from the dropdown. To edit an existing list or create a new List Group click the  icon on the List group option.

    Note: List groups are common across an organization, not per individual forms or projects. Editing or deleting a list group will effect all forms across the organization with the same list group.
  1. When editing an existing list group such as Vehicles, you can make changes to the value of the existing list group by uploading an updated excel document. The Preview section shows the master list, and the sub lists current values. We can select a Brand (master list), and see what option appears in Model (sublist 1), what option appears in Year (sublists 2).


  2. To add a new List Group first give the List Group a name, then click  to save the new name.


  3. Next an Excel (.xlsx) list needs to be uploaded  .


    Note: A sample file can be downloaded  and adjusted as needed.

  1. To upload the list, we need to prepare the data in excel. Data can be prepared in multiple columns. The first Column is the Master List, and other columns are the Sub List. The first Row will be the Column Name.

    2 Column Example:

    3 Column Example:

    Actual Data:

     

     

     


    Note: Ensure there is no formatting or filters applied to the excel document before saving.

  2. The results can be checked now that the List Group contains data. Select a value in Master List (Make) and check the option in the Sub list (Model). If everything looks good, click OK.

    Master List:

    Sub list:

  1. Next, the Bindings must be created for each Cascading control. For this example, the Display Text Car Make and Car Model can be copied for the bindings.
       

  2. On the Properties tab a new option, Lists, has been activated for each Cascading list control. Select the required list for each control. Now that the lists are defined for each control, the Cascading List controls need to be bonded together. On the sub list Car Model control a new option, Making Binding, has been activated. The CarMake binding can be added to create a connection to Car Model.


  3. The Cascading List control is now ready to be published and used in the field.


Properties for the Cascading List Control include: