Dynamic Dropdown Population

Explanation of choicesByUrl in Forms

The choicesByUrl property in Forms is a powerful feature that allows you to dynamically populate dropdown lists in your forms based on data fetched from a URL. This is particularly useful when the options in a dropdown need to be updated based on other form inputs or external data sources, such as available timeslots for an appointment based on a selected date.

How choicesByUrl Works:

• url: This is the endpoint where the data is fetched from. In your case, the URL is dynamically constructed using the selected date and activity. When the form is loaded or when the date changes, the dropdown makes a request to this URL to fetch the available timeslots.

• path: This specifies where in the returned JSON object the choices for the dropdown can be found. It allows the form to navigate through nested objects in the response to find the array of timeslot options.

• valueName: This is the field in each object within the timeslots array that will be used as the value for the dropdown options.

• titleName: This is the field in each object that will be displayed as the label or text of the dropdown options.

• placeholder: This provides a prompt or initial value that indicates to the user what should be selected in the dropdown before they make a choice.

• allowClear: If set to True, the user can clear their selection in the dropdown.

How Changing the Date Updates the Timeslot Picker:

When the user selects a new date in the form, the URL specified in choicesByUrl is automatically updated with this new date. Forms triggers an API call to fetch the available timeslots for the newly selected date, replacing the old options in the dropdown with the new ones. This creates a seamless experience for the user, ensuring that they are only presented with relevant and available timeslot options based on their selection.

Product Description for the Dynamic Dropdown Population Feature in Forms:

Dynamic Dropdown Population with choicesByUrl

Forms offers an advanced feature that allows for dynamic population of dropdown lists in your forms using the choicesByUrl property. This feature is ideal for scenarios where dropdown options need to be updated based on user input or real-time data from external sources.

Key Benefits:

• Real-time Data Integration: Automatically fetch and display the most up-to-date options in your dropdowns, ensuring users have access to relevant choices based on their previous selections.
• Customizable: Easily configure which part of the fetched data should be displayed as options and what should be used as the internal value for each selection.
• Seamless User Experience: Enhance the interactivity of your forms by updating dropdown options without requiring the user to reload the page or manually refresh data.
• Flexibility: With the ability to dynamically construct URLs using other form fields, you can create highly interactive forms that adapt to user input, such as appointment booking systems that show available timeslots based on the selected date.

Example:

{
  "name": "page3",
  "elements": [
    {
      "type": "text",
      "name": "date",
      "defaultValueExpression": "today()",
      "isRequired": true,
      "inputType": "date"
    },
    {
      "type": "dropdown",
      "name": "timeslotpicker",
      "width": "36%",
      "minWidth": "256px",
      "titleLocation": "hidden",
      "choicesByUrl": {
        "url": "https://demo-svc.ai12z.net/timeslot/{date}/{activity}",
        "path": "timeslots",
        "valueName": "timeslot",
        "titleName": "timeslot"
      },
      "placeholder": "Select a time slot",
      "allowClear": false
    }
  ]
}

• Note that date is the Date selector on this page, where activity is a dropdown on an earlier page. When a user changes the date this dropdown automatically updates

This feature is particularly useful in complex forms, such as booking systems, where user selections on one part of the form can influence the available options in another part. By leveraging this capability, you can create more responsive, intuitive, and user-friendly forms that meet the dynamic needs of your users.