Select Data Source Options

Values

The standard source of data for the Select component. A list of static values that are manually added by the form builder and will populate when the end-user clicks the dropdown. The Label is what the front-end identifier the end-user will see when the dropdown is clicked. The Value is the back-end identifier for the option. Use the Value when referencing this specific option for things like custom JavaScript for conditions or calculations, or application logic.

The Value Data Source Type is the default setting when a new Select component is added to the form. To configure this setting:

When setting the option value, use only Strings or Numernc values.

1. Use the Form and click the Color Name dropdown

URL

The URL option allows the user to designate a URL containing a JSON data object that will provide the option values for the Select Dropdown. The Item Template will determine what part of the JSON object will be used as the option values. Use this option to easily populate a Select list with external JSON values into your form. Anytime the JSON object is updated, the URL will always be calling on the endpoint to ensure it has the most up-to-date option values.

For this example, we will use the Select dropdown to populate a dropdown of USA States from an external URL.

1. Open the Select component settings

2. Click the Data tab

3. Click the Data Source Type

4. Select the URL option

5. Add the following URL to the Data Source URL field https://cdn.rawgit.com/mshafrir/2646763/raw/states_titlecase.json

1. Add to the to save the State abbreviation for the option when the form is submitted

1. Modify the Item Template so it references the State name within the JSON object <span>{{ item.name }}</span>

Alternatively, you can change the template to pull in a different data point within the object. For example, modify the Item Template if you want to use the State abbreviation as the option values instead of the name. <span>{{ item.abbreviation }}</span>

1. Use the form and click the Select dropdown

All State Names or Abbreviations from the JSON data object will be presented as selectable options in the dropdown menu

Resource

The Resource option allows the user to map the Select field to a Resource within the project and use the Resource field data as the option values for the Select Dropdown. The Item Template will determine what field data within that Resource the end-user will select as the option. The Value Property is what will represent the option within the meta-data of the submission.

Use this Data Source Type to easily populate a Select list from a Resource data object. Because the Select field is mapped to the RESTful API of the Resource, anytime the Resource data is updated, the Select component will call upon the Resource for dynamic option values.

For this example, we will create a Resource and establish a RESTful database of colors. The Select component will then be configured to reference that Resource and populate data from a field within the Resource.

Color Resource

1. Create a new Resource called Color

2. Add a Text Field called Color Name

   • Ensure the API Property name of this field is colorName

1. Use the Resource and make several submissions Red Yellow Blue

1. Create a new Form called Color Selector

2. Add a new Select field called Color

3. Open the Select Component settings and click the Data tab

4. Click the Data Source Type and Select the Resource option

1. Modify the Item Template so it references the Color Name field data within the Color Resource <span>{{ item.data.colorName }}</span>

1. Use the Form and click the Color Name dropdown

All Data entries from the Resource submissions will be displayed as selectable options in the dropdown menu. Any updates to the Color database will dynamically reflect within the Select component dropdown.

Raw JSON

Write - JSON to configure values for the Select component. Once the JSON data object is written, the Item Template will be used to designate what part of the data object the end user will choose as a value when the dropdown is utilized. The Value Property can be set so a property of the JSON object is used to represent the option within the meta-data of the submission.

For this example, we will write a JSON object containing information for multiple users. That JSON will be added to the Select component settings and the Item Template will be utilized to determine what part of the JSON object the user will choose as an option when the Select dropdown is clicked.

1. Add a new Select field called User

2. Open the Select component settings

3. Click the Data tab and click the Data Source Type

4. Select the Raw JSON option

5. Add the following JSON to the Data Source Raw JSON code block [{ "name": "John", "email": "[e-mail]", "phone": "111-111-1111" }, { "name": "Jane", "email": "[e-mail]", "phone": "222-222-2222" }, { "name": "John", "email": "[e-mail]", "phone": "333-333-3333" }]

1. Add to the to save the Email property for the option when the form is submitted

2. Add the following to Item Template to set what property from the JSON object the Select component will show as its values. <span>{{item.name }}</span>

Alternatively, you can change the template to pull in a different data point within the JSON object. For example, modify the Item Template to use the User email or phone number as the option values instead of the name. <span>{{ item.email }}</span>

1. Use the Form and click the User dropdown

All Name properties from the JSON Data Object will be presented as selectable options in the dropdown menu.

Custom

Write custom Javascript to configure values for the Select component. The capabilities here are near limitless, whether you are fetching data from an external API or pulling in data from other form fields as your values.

Using Field Data As Select Values

In this example, we will write Javascript code to pull in data from multiple fields within a Data Grid containing User information and merge them together to be used as the Select dropdown value(s). The values will be dynamic since the DataGrid can have any number of rows.

1. To start, add a DataGrid to the form called User Information

2. Within the DataGrid settings, click the API tab and ensure the Property Name is userInformation

3. Add a Text Field called Name, an Email component and Phone Number component

4. Ensure the of each field is the following. Name - name, Email - email , Phone Number - phoneNumber

5. Add a Select component called Select User to your form

6. Click the Data tab

7. Click the Data Source Type and select Custom

8. Add the following JavaScript to the code block: values = data.userInformation;

9. Modify the to the following: <span>{{ item.name}}: {{item.email}}, {{item.phoneNumber}}</span>

10. Use the form

The JavaScript code will fetch the data from the User Information DataGrid, while the Item Template will display this data to the user in the specified format.

Fetch URL Data As Select Values

In this example, we will write Javascript code to pull in a data object from an external API containing a list of US States and use certain specific properties within that object as the option values.

1. Add a Select component called States to your form

2. Click the Data tab

3. Click Data Source Type and select Custom

4. Add the following JavaScript to the Custom Value code block:

values = fetch("https://gists.rawgit.com/mshafrir/2646763/raw/states_titlecase.json").then((res) => res.json()).then((data) => data);

1. Modify the Item Template to the following: <span>{{ item.name }}</span>

2. Use the form

The JavaScript code will fetch the data from the URL's JSON object. The Item Template will display this Name property representing the options to the user.