Use Case: Dashboard With Individual Search

Overview

Your dashboard is only useful if it's easy to navigate. But navigation becomes more difficult as more submission data appears on your dashboard. You've seen how to add global search to your dashboard in a previous use case. In this use case, you'll learn how to add individual search, too.

What is Individual Search?

An individual search tool lets you search for specific information on your dashboard. Individual search gives you more specificity in comparison to a global search.

Let’s say you have a dashboard that lists the following submission data:

• First Name

• Last Name

• Date of Birth

• Phone Number

• Comment

You might want to search by one field without searching the others. For instance, searching for matching comment text between more than one submission. That’s where an individual search comes in handy.

In this use case, you'll learn how to set up an individual search on a dashboard. For comparison, you'll also add a global search function to a dashboard. Finally, you'll set up a Radio Buttons component so you can toggle between these options.

For this use case, we'll use sample submission data gathered from the following source module: https://training.unqork.io/#/form/5ebec714ce23f0020fbf9667/edit.

Here's how your completed dashboard will look in Express View, with the individual search radio button selected:

Here's how your completed dashboard will look in the Module Builder:

What You’ll Learn

In this article, you’ll learn how to set up a global and individual search tool for a dashboard. As well, as a toggle to select between the 2 options.

What You’ll Need

To set up this use case, you’ll need:

• 2 Panels components

• 1 Submission Search snippet

• 2 ViewGrid components

• 1 Plug-In component

• 1 HTML Element component

• 1 Columns component

• 1 Date Input component

• 4 Text Field components

• 1 Radio Buttons component

• 1 Decisions component

Your Submission Search snippet includes the following:

• 1 Text Field component

• 3 Hidden components

• 1 Data Workflow component

• 1 Calculator component

• 1 Initializer component

• 1 Plug-In component

Configuration

Configure the Panel Components

These Panels act as containers for the components that follow. Your panelGlobalSearch Panel manages the global search operation. Your panelIndividualSearch Panel manages the individual search operation.

1.

Drag and drop 2 Panel components onto your canvas.

2.

Apply the following settings for each Panel:

3.

Save each Panel component as you add it.

Add the Submission Search Snippet

Next, you'll add the Submission Search snippet to your dashboard module. This snippet sets up your global search functionality. Once you've added the snippet, you'll reconfigure a few of its components.

To add the Submission Search snippet to your module, do the following:

1.

In the left sidebar of Module Builder, click the Snippets button.

2.

Enter Submission Search in the search bar.

3.

Drag and drop the Submission Search snippet onto your canvas. Place the snippet in the panelGlobalSearch Panel.

4.

Save your module.

Update the Text Field Component

Next, you'll update the Text Field component masterSearchGlobal in your snippet. When you open the component, you see that includes placeholder text that doesn't match this configuration. The placeholder text tells end-users what search parameters they can use in the global search.

1.

Hover over the masterSearchGlobal Text Field component.

2.

Using the toolbar, click the (Settings) button.

3.

Enter Search all fields in the Placeholder Text field, replacing the original text.

4.

Click Save.

Update the Hidden Component

Next, you'll update the moduleID Hidden component in the Submission Search snippet. This component houses the module ID of your source module. You can pull the module ID from the source module’s hyperlink as follows: https://training.unqork.io/#/form/5ebec714ce23f0020fbf9667/edit.

1.

Hover over the moduleId Hidden component.

2.

Using the toolbar, click the (Settings) button.

3.

Enter 5ebec714ce23f0020fbf9667 in the Default Value field.

4.

Click Save.

Update the Data Workflow Component

Next, you’ll configure the dwSearchGlobal Data Workflow component in your snippet. That way, you can have the component reference your chosen dashboard fields.

1.

Hover over the dwSearchGlobal Data Workflow component.

2.

Using the toolbar, click the (Settings) button.

3.

Click on the Create Field operator to open its Info window.

4.

In the Info window, enter the following:

5.

Click Save.

Update the Plug-In Component

Next, you'll update the pluginGetSubmissions Plug-In in your snippet. This Plug-In connects your module to the outside world. You'll achieve this connection using an API (application programming interface) call. The Plug-In will retrieve submission data to display in your global search dashboard.

1.

Hover over the pluginGetSubmissions Plug-In component.

2.

Using the toolbar, click the (Settings) button.

3.

Enter pluginGetSubmissionsGlobal in the Property ID and Label Text, replacing the original entries.

4.

In the Inputs table, enter the following:

5.

Click Save.

Configure the ViewGrid Component

Next, let's bring in a ViewGrid component to display your dashboard. This dashboard appears when end-users select the Global radio button.

1.

Drag and drop a ViewGrid component onto your canvas. Place your ViewGrid component inside your panelGlobalSearch Panel.

2.

Enter gridSubmissionsGlobal in the Label and Property Name.

3.

Enter null in the Action field. This removes the default Submit button from your dashboard.

4.

In the Inputs table, enter pluginGetSubmissions.

5.

In the Display table, enter the following:

6.

Click Save.

Configure the Plug-In Component

This Plug-In will perform an API call to retrieve submission data to display in your individual search dashboard.

1.

Drag and drop a Plug-In component onto your canvas. Place your Plug-In component inside your panelIndividualSearch Panel.

2.

Enter pluginGetSubmissionsIndividual in the Property ID and Canvas Label Text fields.

3.

Select Watch as your Trigger Type.

4.

In the Inputs table, enter the following:

5.

Select List Submissions for Dashboard from the Internal Services drop-down.

6.

Enter /fbu/uapi/system/getSubmissions?filter={"$and":[{"data.firstName":"/{{data.searchFirstName}}/i"},{"data.lastName":"/{{data.searchLastName}}/i"},{"data.dob":"/{{data.searchDob}}/i"},{"data.phoneNumber":"/{{data.searchPhoneNumber}}/i"},{"data.comment":"/{{data.searchComment}}/i"}]} in the Data Source URL.

7.

Click Save.

Configure the HTML Element Component

This HTML Element component serves as a label for your individual search fields.

1.

Drag and drop an HTML Element component onto your canvas. Place your HTML Element component below the pluginGetSubmissionsIndividual Plug-In.

2.

Enter htmlIndividualFilter in the Property ID field.

3.

Enter h4 in the HTML Tag field.

4.

Enter Filter in the Content field.

5.

Click Save.

Configure the Columns Component

Columns will keep your individual search fields organized.

1.

Drag and drop a Columns component onto your canvas. Place your Columns component below your htmlIndividualFilter HTML Element component.

2.

Enter colIndividualFilters in the Property ID field.

3.

Select Custom as the Column Layout.

4.

Click Add Column until you have 6 columns.

5.

Enter 2 in the Width for each column.

6.

Click Save.

Now, let's configure search fields for your end-users to add information.

Configure the Date Input Component

1.

Drag and drop a Date Input component onto your canvas. Place your Date Input component inside the first (far-left) column.

2.

Enter searchDob in the Property ID field.

3.

Enter Date of Birth in the Label Text field.

4.

Click Save.

Configure the Text Field Components

1.

Drag and drop 4 Text Field components onto your canvas. Place your Text Field components inside the next 4 columns, from left to right.

2.

Enter the Property ID and Label Text as follows:

3.

Save each component as you add it.

Configure the ViewGrid Component

Next, let's bring in another ViewGrid component to display your dashboard. This dashboard appears when end-users select the Individual radio button.

1.

Drag and drop a ViewGrid component onto your canvas. Place your ViewGrid component below your colIndividualFilters Columns component.

2.

Enter gridSubmissionsIndividual in the Label and Property Name fields.

3.

Enter null in the Action field.

4.

In the Inputs table, enter pluginGetSubmissionsIndividual.

5.

In the Display table, enter the following:

6.

Click Save.

Configure the Radio Buttons Component

This component acts as the toggle between global and individual search options. When end-users select Global, the global search options and dashboard appear. When end-users select Individual, the individual search options and dashboard appear.

1.

Drag and drop a Radio Buttons component onto your canvas. Place your Radio Buttons component above your panelGlobalSearch Panel.

2.

Enter typeOfFilter in the Property ID field.

3.

Enter What type of filter would you like to see? in the Label Text field.

4.

Set your Option Label and Value to Store in Submission Data as shown below:

5.

Click Save.

Configure the Decisions Component

Next, we'll configure a Decisions component. This rule displays either the individual or global search options, and their respective dashboards. Which appears depends on the end-user's radio button section.

1.

Drag and drop a Decisions component onto your canvas. Place your Decisions component beneath your typeOfFilter Radio Buttons component.

2.

Enter ruleShowFilters in the Property ID and Canvas Label Text fields.

3.

Set Watch as the Trigger Type.

4.

In the Inputs table, enter the following:

5.

In the Outputs table, enter the following:

6.

In the Micro Decisions table, enter the following:

7.

Click Save.

8.

Save your module.

Now you're ready to put your work to the test. View your module in Express View and select the Individual radio button. Use the filters to enter information and find specific submission data.

NOTE  As you enter text in the filters, the dashboard populates with matches automatically.

Lab

• You'll find the source module for this use case here: https://training.unqork.io/#/form/5ebec714ce23f0020fbf9667/edit.

• You'll find the completed Individual Search use case here: https://training.unqork.io/#/form/5ebab1bcc8368d0210c75539/edit.