How to: Use an Internal API in a Multi-Select Dropdown Component

Overview

In the Module Builder, you can configure Dropdown and Multi-Select Dropdown components to reference Data Collection values using an internal API (application programming interface) call. In Express View, the Dropdown components display the Data Collection values to the end-user in a list.

Here's how the completed how-to guide looks in Express View:

Here's how the completed how-to guide looks in the Module Builder:

A static image displaying the Module Builder, the Internal API Dropdown use case is displayed.
(click image to expand)

What You'll Learn

In this article, you’ll learn how to make an internal API call using a Multi-Select Dropdown component.

What You’ll Need

To set up this use case, you need:

Pre-Configuration

Configure the Data Collection

First, create a Data Collection of animal types. Then, configure a Multi-Select Dropdown component to call an API to reference the Data Collection. Since the Data Collection is in Unqork, it's an internal API call.

From the Workspace page:

1. Click Data collection icon Data Collections.
2. Click + Create New.
3. In the Enter a Collection Name field, enter Animal Types.

Each Data Collection name is unique. If you are practicing in the Training environment, you need a unique name for your Data Collection to save it.

4. In the first column, enter the following: Animal, Moose, Aardvark, Baboon, Dolphin, Fox, Gorilla, Kangaroo, Unicorn, Panda.

A static image displaying the Create Data Collection page, the Collection name is set to Animal Stypes and the first column contains difft animal names for values.

5. Click Set Headers as First Row. This sets your Animal Data Collection entry (column 1, row 1) as the header for the first column. Later, you'll reference this header when configuring your Multi-Select Dropdown component.

A static image displaying the Create Data Collection page, clikcing the "Set Headers as First Row" converts the first row into a header.

6. Click Save Data Collection.

Configure the Multi-Select Dropdown Component

Next, add a Multi-Select Dropdown component to list the options for the end-user. Then, populate the Multi-Select Dropdown using the Animal Types data using an internal API call to pull it. These instructions assume that you have an open module saved with a title.

1. In the Module Builder, drag and drop a Multi-Select Dropdown icon Multi-Select Dropdown component onto your canvas.
2. In the Property ID field, enter animalTypes.
3. In the Label Text field, enter Animal Types.
4. In the Item Template field, Enter <span>{{ item.Animal }}</span>. This sets the HTML display for each item in the Multi-Select Dropdown.

A static image displaying the Multi-Select Dropdown component's Display settings. The Label Text and Item Template fields are highlighted.

5. From the Multi-Select Dropdown icon Multi-Select Dropdown navigation menu, select Data Tab icon Data.
6. From the Data Source Type, select URL.
7. In the Data Source URL, enter /fbu/uapi/query/Animal Types/distinct/distinct=Animal.

This URL directs the Multi-Select Dropdown to the Animal Types Data Collection. From there, the URL instructs the component to separate out the column labeled Animal. Only values from that column display in your Multi-Select Dropdown component.

8. In the Value Property, enter animal.

A static image displaying the Multi-Select Dropdown component's Data settings. The Data Source type is set to URL and the Data Source URL and Value Property fields are filled out.

9. Click Save & Close.
10. Save your module.

Resources