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

Overview

In Unqork, you can use External APIs in Multi-Select Dropdown and regular Dropdown components. A Multi-Select Dropdown or Dropdown component is one of the best ways to present a long list of selectable options to your 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.. But, populating lists can be tedious and time-consuming, and if more than one component uses the same list, it must be maintained in multiple places. The Dropdown and Multi-Select components let you retrieve data from a source outside your module. Use these components to set up an external API In Unqork, an External API (application programming interfaces) connects to services outside of the Unqork platform. APIs 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. call to populate your list.

As with any external API call, it’s important to refer to the provider's 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. documentation. The API must be a table array of JSON JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data. objects for the Dropdown or Multi-Select Dropdown components to populate the values correctly.

Look at the following external API as an example: https://api.thedogapi.com/v1/breeds. Clicking the link opens the API response that contains a JSON object with dog breed data. You might want to use only one piece of that information in a Dropdown or Multi-Select Dropdown component. In this how-to guide, you'll create a drop-down that lists only the dog breed names.

Here's how the completed use case looks in Express View Express View is how your end-user views your 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 use case looks in the Module Builder:

A static image displaying the Module Editor. The External Dropdown API Dog Breed example is displayed on the canvas.

How to Make an External API Call in a Multi-Select Dropdown Component

Making external API calls in a Multi-Select Dropdown component is a two-part process. First, the external API service is set up on the Services Administration page. Next, a Multi-Select Dropdown uses the external API service.

What You Need

To set up this use case, you need:

Pre-Configuration

Configure the External Service

First, you must add the Dog API external service to Services Administration.

NOTE  If you are completing this lab in the Training environment, the Dog API is likely already set up. Double-check the list of Active Services before completing this step. If the Dog API is on the list of Active Services, move to the Configure the Multi-Select Dropdown Component section.

To add the Dog API external service to Services Administration:

1. At the top right of the Unqork Designer Platform, click Settings.
2. Select Administration
3. Under Integration, click Services Administration.
4. Click + Add a Service. The Create New Service modal A modal is a window that appears on top of the content you are currently viewing. displays.
5. In the Service Title field, enter Dog API.
6. In the Service Name field, enter dog-API.
7. Click Create. The Dog API Service page displays.

8. Click Edit Icon Edit.
9. From the Service menu, click Service Type.
10. In the Service Protocol + Host field, enter https://api.thedogapi.com/v1/.
11. From the Authentication method* drop-down, select No Authentication.

A static image displaying the Service Administration page for the Dog API. The Service Protocol plus host field and the Authentication Method dropdown are highlighted.

12. Click Save Changes.

Configuration

Configure the Multi-Select Dropdown Component

Next, add a Multi-Select Dropdown component to list options for the end-user. The external Dog API populates the component.

NOTE  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 dogBreeds.
3. In the Label Text field, enter Dog Breeds.
4. In the Item Template field, enter <span>{{ item.name }}</span>. This sets the HTML display for each item.

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

5. From the component's configuration window, select Data icon Data.
6. From the Data Source Type, select URL.
7. From the Service drop-down, select Dog API.
8. In the Data Source URL, enter breeds.
9. In the Value Property field, enter name. The Value Property setting maps the name value in the JSON Object from the API response to the Multi-Select Dropdown selections.

A static image displaying the Multi-Select dropdown's Data settings, the Data Source Type is set to URL and the Service, Data Source URL, and Value Property fields are highlighted.

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

Here's how the completed how-to guide looks in Express View Express View is how your end-user views your 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.:

Resources