2. Fetch a List of Select Options Dynamically

Fetch a List of Select Options Dynamically

Learn how to dynamically fetch the options for a select-from list in your web form. For example, suppose users need to enter their address in the form. You can automatically updated the options for the State or Province field based on the value the users enter in the Country field.

Topics:

Learn About the Dynamic Fetch Sample

Let's look at a sample web form where the options for a select-from list are built dynamically from connector data.

In this sample form, you select the current country and state based on the options in the list.

  • The options for the Current Country field are fetched from connector data, which is defined in the properties for the select control.

  • When you select a country, the Current State field becomes enabled. Its options are refreshed to show only the states for the selected country.

  • The options for the Current State field are built using a connector that fetches the state information based on the selected country.

Description of df-form-preview.png follows
Description of the illustration df-form-preview.png

Import the Sample and Preview Fetch Options

Import the sample form, select a country from the Current Country field, and then click the State field to view the list of states for the selected country.

  1. In the Integration Cloud navigation pane, click Processes.
  2. In the Processes navigation pane, click Applications.
  3. On the Process Applications page, click Create, click Import, and then click Application.
  4. Browse and locate the DynamicSelectOptions.exp file you downloaded and click Import.
  5. Open the DynamicSelectOptions application.
  6. In the Application navigation pane, click Forms, and then open the WebForm sample.
  7. Click Preview.
  8. In the Current Country field, select United States of America.
  9. View the options for the Current State field. Notice that the list automatically updates to display only the states and territories for the United States of America.

    Also, only the United States has all its options defined in the REST API being used by this sample form.

Create a Form that Dynamically Fetches State Data Based on the Country

Follow this tutorial to create a form that dynamically fetches the options for the State field (a pick-from list) based on the value selected in the Country field. You have three main tasks to complete:

Add the Integration

The DynamicSelectOptions sample uses two REST APIs to fetch the country and state data.

  • http://services.groupkt.com/country/get/all to fetch all the available countries
  • http://services.groupkt.com/state/get/{countryCode}/all to fetch the states for a country

You must create the resources and GET operations for each endpoint listed above. Let’s look at the existing integration.

  1. Open the DynamicSelectOptions application that you downloaded.
  2. In the Application pane, click Integrations.
  3. Open the Countries integrations.
  4. Expand the Countries resource and review its configuration. This resource retrieves the country data.
  5. Click GET for the Country resource to review its configuration.
  6. Click the Response tab and then click Edit to view the getCountries response.
    {
  "RestResponse" : {
    "messages" : [ "More webservices are available at http://www.groupkt.com/post/f2129b88/services.htm", "Total [249] records found." ],
    "result" : [ {
      "name" : "Afghanistan",
      "alpha2_code" : "AF",
      "alpha3_code" : "AFG"
    }, {
      "name" : "Åland Islands",
      "alpha2_code" : "AX",
      "alpha3_code" : "ALA"
    }]
      }
}
  7. Now expand the States resource and review its configuration. This resource retrieves the state data.
  8. Click GET for the States resource to review its configuration.
  9. Click the Response tab and then click Edit to view the getStates response.
    {
  "RestResponse" : {
    "messages" : [ "More webservices are available at http://www.groupkt.com/post/f2129b88/services.htm", "Total [36] records found." ],
    "result" : [ {
       "country" : "IND",
       "name" : "Andhra Pradesh",
       "abbr" : "AP",
       "area" : "160205SKM",
       "largest_city" : "Visakhapatnam",
       "capital" : "Hyderabad, India"
      }]
      }
}
  10. Make sure to create Business Objects based on those responses and assign it to each GET operation response Body.

Specify Control Data from a Connector Operation

Next, specify the connector and define the mapping to the response.

  1. Click the Application Home tab.
  2. Open the WebForm form.
  3. Select the Current Country control.
  4. On the General tab in the Properties pane, scroll to the Options Source section.
  5. Select Connector, and then specify values for the Connector, Resource, and Operation fields.
  6. Define the mapping to the response.
    1. Scroll to the Response section.
    2. In the Options List field, select the source for the list of values from the available attributes. For example, response.restResponse.result.
  7. Select the Current State control, and define its properties.
  8. For the Current State control, make sure to select the Skip Upon Load check box. You don’t want to call the connector On Load because no country has been selected yet.

Add the On Change Events

For the Current Country control, define the On Change events.

  1. Select the Current Country control on the form.
  2. On the General tab in the Properties pane, scroll to the Events section.
  3. Click Edit Edit icon to configure the On Change event.
  4. Click Action to add an On Change event. The events already in the sample form are defined as follows:
    1. For the first action, the Control Name field is set to state. The Action field is set to Refresh Connector.
    2. For the second action, the Control Name field is set to state. The Action field is set to Enable.