Using a Database to Populate Auto-Complete Search Component
  • Updated on 06 Mar 2014
  • 2 minutes to read
  • Print
  • Dark
    Light

Using a Database to Populate Auto-Complete Search Component

  • Print
  • Dark
    Light

The AutoComplete Search component in a form lets a user enter characters and produces a list of values that match those characters, beginning with a partial match. The data type for the AutoComplete Search component is a string list.
This example uses data from the Northwind database to populate a AutoComplete Search component. The database integration is already complete. (To see these steps, please go to the topic Integrating an External Database).
We begin in the Designer Folder with adding a database table we will work with. Click Datatypes/Database > Database Integration > Add Table on the Folder Actions Panel.

2018-02-19_130458-1024x519.png

In the resulting pop-up table we use Select existing connection option and pick Northwind database from Existing Connections. Then, click Next .

2018-02-19_130538-1024x519.png

Then, we pick a desirable table from Table Name dropdown list.

2018-02-19_133136-1024x519.png

When table is chosen, we can pick desirable Table Fields, Primary Keys and Steps to Generate . Click Next to create an integration to the Table .

2018-02-19_133212-1024x519.png{height ="519" width="1024"}
2018-02-19_133224-1024x519.png{height ="519" width="1024"}

System creates a Table Definition in our Designer Folder.

2018-02-19_133526-1024x519.png

To use this Table Definition in the Flow , we click Create Flow button on the Folder Actions Panel. In the resulting window we Name the Flow and click Create to proceed to the Flow Designer.

2018-02-19_134728-1024x519.png

The first component in the flow will be the database component that retrieves the data for the AutoComplete Search component. Expand the Integrations > My Integrations > Database category from the Flow Designer's start-up window. Select the Get all component for the data set and click Add to add it to the workspace.

2018-02-19_135156-1024x519.png

Connect the Failed path from the Get All step to the End step.
On the Done outcome from our Get All step we add Show Form step from the Favorite Steps category.

2018-02-19_135235-1024x519.png

Then, we Name our Form and click Create to proceed to the Form Designer.

2018-02-19_135621-1024x519.png

Our Form designed as following... It has a Button control from Actions category in the ToolBox and AutoComplete Search component from the Data category. Save and close Form Designer when finished.

2018-02-19_140657-1024x519.png

Back in the Flow Designer we select our Get All step on the workspace and Ignore Limit Count input.

2018-02-19_145700-1024x519.png

Lastly, map the output from theGet All step to the input for the AutoComplete Search component on the form. Connect the Done path from the Get All step to the form, and connect the outcome from the form to the End step. Click on the form, and under Inputs , map as follows:

2018-02-19_150039-1024x519.png

This completes our Flow. We can click Debug Flow link on the Top panel of the Flow Designer to test it.

2018-02-19_150812-1024x519.png

Now, when the flow runs, data from the Get All component populates the AutoComplete Search box.

2017-02-01_114537.png

Was this article helpful?