Add a dynamic dropdown field: HTTP example

Builders can use Helper Flows to populate an Options dropdown when an HTTP call is needed to retrieve a list of items.

The following example uses two flows to create the list for the dropdown:

A processing flow that shapes the results into the correct list object
A flow to retrieve the list

Processing flow

The processing flow accepts each individual item from the list of items that is retrieved by the iterating flow. It's used to extract the key/value pair from each item and return it to the calling flow in the proper shape to create the dropdown list.

Flows used to return a list of dropdown items should return an object in the following shape:

Copy

[
   {
      "value":"English",
      "key":"en_us"
   },
   {
      "value":"Chinese (Simplified)",
      "key":"zh_CN"
   },
   {
      "value":"Danish",
      "key":"da"
   }
]

To create a processing flow:

Switch to the Flows tab.
Click + New Flow to create a new flow.
Add a Helper Flow card as the first card in your flow.
Click Save and name the flow Dropdown List Processing.
Enter Processes a list of items and reformats it to be used as a dropdown as the flow description, select the Save all data that passes through the Flow? checkbox, and click Save.
Click Click or drag to create to add a field to the Helper Flow card.
Add a label, enter list_item as its name, and then click Enter.
Select the object type for the field from the dropdown. Default is Text.
Click Add function, then add a Get Multiple function card to the flow.
Drag the list_item field from the Helper Flow card into the object input of the Get Multiple card.
Add the key names for the values you want to extract as outputs to the Get Multiple card.
To add two fields to the Flow Control Return card, click Click or drop here to create and enter a key name twice. Name one field key and another named value. When the dropdown is created, the key will be displayed to users and the value will be passed into the flow. It's not required that the key and value be named differently.
Drag the field from the Get Multiple card that the user will see into the key field on the Return card.
Drag the field from the Get Multiple card that will be passed into the flow into the value field on the Return card.
Click Save and Run.

Retrieval flow

The retrieval flow is used to retrieve a list of objects from the service. It makes an HTTP request, identifies the list of objects in the request, and passes the list to the processing flow.

To create a retrieval flow:

Switch to the Flows tab. Click + New Flow to create a new flow.
Add a Helper Flow card as the first card in your flow.
Click Save and name the flow Get List of <object>, where <object> is the type of object being retrieved.
Enter Retrieves a list of <x> from the service and passes it to a helper Flow to be processed as the flow description, select Save all data that passes through the Flow?, and click Save.
Add a Call Flow card as the first card in the flow.
Click Choose Flow.
Build an httpHelper flow or select a previously created http_helper flow. See Build an httpHelper flow. The card is automatically populated with the inputs defined in the http_helper flow.
Enter GET as the request method.
Enter the relative URL for the endpoint.
Drag the auth object from the Helper Flow card to the Connection input field of the Call Flow card.
For the outputs on the Call Flow card, you'll need to define the same keys as the http_helper flow's outputs:
- status_code (Number)
- headers (Object)
- body (Object)
Add an Object Get card to your flow.
Drag the body field from the Call Flow card into the object field of the Get card.
The shape of the list that's returned varies based upon the service. In the path field, you'll need to enter the dot notation syntax to locate the list. For example, <object>.items. Note: it's possible that this card is unnecessary.
To name the output field item_list, click on the field's dropdown and click customize.
Add a List Map card to the flow.
Drag the categories_list field from the Get card into the list field of the Map card.
Click Choose Flow and select the Dropdown List Processing flow from the previous example.
Select the dropdown beside list_item and click Item. This will pass each item from item_list to the processing flow and return a new, correctly formatted list.
Rename the output on the Map card as new_item_list.
Drag the auth object from the Helper Flow card to the Connection input field of the List Map card.
Click Click or drop here to create to create a field on the Control Return card and label the field output. This label is required to be recognized by the platform.

The label output is required for this field. If you assign any other label to this field, it will not be recognized by the platform.
Drag the new_item_list field from the Map card into the output field on the Return card.
Click Save and Run.

Next steps

Build an httpHelper flow