How to: Use Data Collections in a Dropdown Component

Overview

In this guide, you'll learn how to use a Plug-In component to control 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. (application programming interface) call. You'll make an internal API call to Unqork's Data Collection, and reference select data using a Dropdown component.

By making this API call, you can populate a drop-down menu without manually adding values. If you change your Data Collection, those changes populate in your menu. In this guide, you'll use a pre-existing Data Collection to reference.

You'll see the terms "reference data" and "data collections". Both terms refer to an Unqork Data Collection.

For this how-to guide, use an Initializer component with a New Submission Trigger Type. The Initializer triggers a Plug-In component that requests data from an existing Data Collection. A Dropdown component references the Data Collection and populates a list in a drop-down menu. That way, end-users 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. can select an option.

To better understand how this works, here's an example. Say you create an application for the Motor Vehicle Division. Your customers need to complete an application for a new driver’s license. Part of the application asks the applicant to include their height. To make it easier for the applicant, they can select a height from a drop-down list. You can also provide measurements in inches and centimeters.

What You'll Learn

In this how-to guide, you’ll learn how to reference a Data Collection using a Dropdown component.

What You Need

Before starting this configuration, you'll need the following:

Pre-Configuration

Retrieving a Data Collection

Typically you need to create a Data Collection whose data you want to retrieve. For this how-to guide, you'll call a pre-existing Data Collection called Human Height. You don't need to configure anything as long as you know the Data Collection's file name.

Configuration

Now that you know which Data Collection to reference, open your module to finish the configuration.

Configure the Plug-In Component

Use a Plug-In component to retrieve submission data from the Human Height Data Collection using an internal API call.

1. In the Module Builder, drag and drop a Plug-In component onto your canvas.
2. In the Property ID and Canvas Label Text fields, enter plugGetHeight.
3. From the Internal Services drop-down, select Get Rows from Reference Data.
4. From the DataCollection drop-down, enter or select Human Height.

The Data Source URL automatically populates as /fbu/uapi/query/Human Height/all.

A static image of the completed configuration of the Plug-In component with the Get Rows from Reference Data Internal Service.

5. Click Save.

Configure the Dropdown Component

Next, configure a Dropdown component to reference height data from your Plug-In component. To reference the data, you'll reference your Plug-In component and the specified Data Collection height data.

1. Drag and drop a Dropdown Component Icon Dropdown component onto your canvas, placing it below the Plug-In component.
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 height.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Height.
4. To the left of the component's configuration window, click Data Icon Data.
5. Under the Data Source Type, select Data Reference Key.
6. In the Data Reference Key field, enter or select plugGetHeight.
7. In the Value Property field, enter Height.
8. In the Label Path field, enter Height.

A static image displaying the completed configuration of the Dropdown component with the Data Reference Key Data Source Type.

9. Click Save & Close.

Configure the Initializer Component

Now, set up your Initializer component with a New Submission Trigger Type. This Trigger Type fires the Initializer with each new module submission.

1. Drag and drop an Radio Button component icon Initializer component onto your canvas, placing it above your Plug-In component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module.  and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initPlugGetHeight.
3. To the left of the component's configuration window, click Actions Icon Actions.
4. From the Trigger Type drop-down, select New Submission.
5. In the Outputs table, enter the following:
Property ID Type Value

plugGetHeight

trigger

GO

A static image displaying the completed configuration of the Initializer component with the New Submission Trigger Type and outputting the Plug-In component.

6. Click Save & Close.
7. Save your module.

Your completed module configuration looks like the following in the Module Builder:

A static image displaying the completed component configuration in the Module Builder.

Click Preview to test your configuration 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.. From the Height drop-down, select a height in feet and inches, or centimeters.

Resources