How to: Use Data Collections in a Dropdown Component

Estimated Reading Time:  3 minutes

Overview

In this guide, you'll learn how to use a Plug-In to control an API (application programming interface) call. This API call is internal to Unqork's Data Collection, and references select data in a drop-down menu 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. Though you can create a new data collection, make a call to a pre-existing one to follow the steps in this how-to-guide.

NOTE  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 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 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, you can make this a drop-down list. You can also provide measurements in inches and centimeters.

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

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

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

To reference data from Unqork's Data Collection using a Dropdown component, you need:

  • 1 Plug-In Component

  • 1 Dropdown component

  • 1 Initializer component

NOTE  These instructions assume you have a new module open, saved, and with a title.

Pre-Configuration

Retrieving a Data Collection

Typically you need to create a data collection to call. 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 file name of the data collection.

Configuration

Configure the Plug-In Component

The Plug-In component’s job is to get the submission data using an internal API call. Instead of pulling data from an external source, call to the Human Height data collection.

1. 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, select Human Height.

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

5. Click Save.

Configure the Dropdown Component

Next, configure your Dropdown component to reference height data from your Plug-In component. There are three Data Sources in the Dropdown component: Values, URL, and Data Reference Key. To reference the data collection, use the Data Reference Key option.

1. Drag and drop a Dropdown component onto your canvas, placing it below the Plug-In component.
2. In the Property ID field, enter height.
3. In the Label Text field, enter Height.
4. From the Data Source Type options, select Data Reference Key.
5. In the Data Reference Key field, enter plugGetHeight.
6. In the Value Property field, enter Height.
7. In the Label Path field, enter Height.

8. Click Save.

Configure the Initializer Component

Now, set up your Initializer component. The Trigger Type to use is New Submission. This trigger fires the Initializer with each new module submission.

1. Drag and drop an Initializer component onto your canvas, placing it above your Plug-In component.
2. In the Property ID and Label Text fields, enter initPlugGetHeight.
3. From the Trigger Type options, select New Submission.
4. In the Outputs table, enter the following:
Property ID Type Value

plugGetHeight

trigger

GO

5. Click Save.
6. Save your module.

Now, preview your module in Express View. From the Height drop-down, select a height.

Resources