# 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:

{% hint style="warning" %}
When setting the option ***value**,* use only Strings or Numernc values. 
{% endhint %}

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2F9LF5xz9SHA8ZZ6kmNAgv%2FSelect-Values.jpg?alt=media&#x26;token=f6e374b0-35d5-4625-916b-d112183c483a" alt="" width="484"><figcaption></figcaption></figure>

7. **Use** the Form and click the **Color Name** dropdown&#x20;

{% embed url="<https://codepen.io/JeriahFormio/pen/poQYeVj>" %}

## 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. &#x20;

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

1. Open the **Select** component settings
2. Click the **Data** tab&#x20;
3. Click the **Data Source Type**
4. Select the **URL** option
5. In the **Data Source URL** field, copy and paste the location of [states.json](https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FwmAq91bwK86ah0TVWHFb%2Fstates.json?alt=media\&token=bcf83383-f5e4-48b4-b977-4a0ad22b044e).  This is a JSON file of the 50 US States and their canonical abbreviation.\
   \
   states.json is available in the [files](https://help.form.io/assets/files "mention")section of Help.Form.io<br>

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FdVQ7xXBF0X9OLlTPYLR1%2FSelectURL.jpg?alt=media&#x26;token=9c394893-32dc-400d-8d54-2a8ef46c75b8" alt="" width="482"><figcaption></figcaption></figure>

6. Add  [**abbreviation**](#user-content-fn-1)[^1] to the [**Value Property**](#user-content-fn-2)[^2] to save the State abbreviation for the option when the form is submitted

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FiHMAgRVBWXcR8VMqCe3E%2Fvalueproperty.jpeg?alt=media&#x26;token=bf072164-0797-42f3-9f29-e5074ba29811" alt="" width="492"><figcaption></figcaption></figure>

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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FjgSIj4zoqTdIJCRnfKuS%2FSelectURL-Item%20Template.jpg?alt=media&#x26;token=bafff995-07c7-4878-8541-c9b81e2ec7d8" alt="" width="479"><figcaption></figcaption></figure>

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.\
&#x20;      `<span>{{ item.abbreviation }}</span>`

8. **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

{% embed url="<https://codepen.io/JeriahFormio/pen/KKrEmPg>" %}

## 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.&#x20;

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.&#x20;

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.&#x20;

**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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FjUXFGlLMJlDbwWAo17Jd%2FSelect-Resource.jpg?alt=media&#x26;token=993f9ecb-6ac8-4fa5-9bf3-4e58bb132ec0" alt=""><figcaption></figcaption></figure>

3. **Use** the **Resource** and make several submissions\
   `Red`\
   `Yellow`\
   `Blue`

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FTWdyI3KjD5JipADYsA9s%2FSelect-ResourceData.jpg?alt=media&#x26;token=a1578986-938c-4e0a-8986-0e587daed017" alt=""><figcaption></figcaption></figure>

4. Create a new **Form** called **Color Selector**
5. Add a new **Select** field called **Color**
6. Open the **Select** Component settings and click the **Data** tab&#x20;
7. Click the **Data Source Type** and Select the **Resource** option

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FvpH7IAEmNCyGQpbubVa2%2FSelect-ResourceOption.jpg?alt=media&#x26;token=d71ec1a2-aa71-4578-8ca1-b846745d6b28" alt="" width="436"><figcaption></figcaption></figure>

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

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FJe5v1yDuJnpORQFl33KF%2FSelect-ResourceItemTemplate.jpg?alt=media&#x26;token=8fd3f9f2-5ef5-438b-b6ab-41c23eacd16e" alt=""><figcaption></figcaption></figure>

9. **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.

{% embed url="<https://codepen.io/JeriahFormio/pen/JjezNoZ>" %}

## 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.&#x20;

&#x20;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.&#x20;

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": "john.doe@test.com", "phone": "111-111-1111" },    { "name": "Jane", "email": "jane.doe@test.com", "phone": "222-222-2222" }, { "name": "John", "email": "john.doe@test.com", "phone": "333-333-3333" }]`

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FdInDrdEmMKHPYiXAfb4i%2FSelect-RawJSON.jpg?alt=media&#x26;token=d37e5b0c-9db3-4530-bf10-69011cf1a407" alt=""><figcaption></figcaption></figure>

6. Add [**email**](#user-content-fn-3)[^3] to the [**Value Property**](#user-content-fn-2)[^2] to save the Email property for the option when the form is submitted
7. 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>`

<figure><img src="https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FjgSIj4zoqTdIJCRnfKuS%2FSelectURL-Item%20Template.jpg?alt=media&#x26;token=bafff995-07c7-4878-8541-c9b81e2ec7d8" alt=""><figcaption></figcaption></figure>

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.\
&#x20;      `<span>{{ item.email }}</span>`

8. **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.

{% embed url="<https://codepen.io/JeriahFormio/pen/RwqdVPO>" %}

## 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.&#x20;

#### **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.&#x20;

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 [**Property Name**](#user-content-fn-4)[^4] of each field is the following. \
   &#x20;**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 [**Custom Value**](#user-content-fn-5)[^5] code block:\
   `values = data.userInformation;`
9. Modify the [**Item Template**](#user-content-fn-6)[^6] 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.

{% embed url="<https://codepen.io/JeriahFormio/pen/oNQrjLJ>" %}

#### **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**&#x20;
4. Add the following **JavaScript** to the **Custom Value** code block:

```javascript
values = fetch("https://3305536326-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MPHoF2HwOA0s5HV_AIB%2Fuploads%2FwmAq91bwK86ah0TVWHFb%2Fstates.json?alt=media&token=bcf83383-f5e4-48b4-b977-4a0ad22b044e").then((res) => res.json()).then((data) => data);
```

5. Modify the **Item Template** to the following:\
   `<span>{{ item.name }}</span>`
6. **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.&#x20;

{% embed url="<https://codepen.io/JeriahFormio/pen/RwEbWrY>" %}

[^1]: Within the URL example, abbreviation is a property within the data object of  the JSON&#x20;

[^2]: The Value Property represents what is saved within the meta-data for the option after a submission is made

[^3]: When submitted, the email property will be used to represent the option within the meta-data of the submission

[^4]: These Property Names will be used within the Item Template of our Select component further in the documentation

[^5]: userInformation is the Property Name of the DataGrid the code is referencing

[^6]: name, email, and phoneNumber are the property names of the fields within the DataGrid the Item Template is outputting