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 APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. (application programming interface) call. In Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., the Dropdown components display the Data Collection values to the end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. in a list.

Here's how the completed how-to guide looks in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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 A Data Collection is any static data referenced by your application. of animal types. Then, configure a Multi-Select Dropdown component to call an API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address. 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