How to: Create a Dashboard With Global Search

Your dashboard is only useful if it's easy to navigate. You may find that navigation becomes more difficult as more submissions display on your dashboard. Adding search functionality to your dashboard can improve navigation.

What Is Global Search?

Global search lets you search many submission fields at once using a single search bar. When you enter a search term, only submissions that include it display on the dashboard.

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

• First Name

• Middle Name

• Last Name

• Email Address

• Date of Birth

Most often, you'll find submissions based on their Last Name or Email Address fields. To do this faster, you can set up a global search that references those two fields at once.

This how-to guide also includes steps for building a simple dashboard, followed by adding a global search. The dashboard retrieves submissions from the following source module: https://trainingx.unqork.io/#/display/5eb01aa6811bf80215fd706b.

Configuration

Use the following steps to configure a dashboard with a global search feature.

Configure the Panel Component

This Panel component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Panel component onto your canvas.

2. In the Property ID field, enter panelDashboard.

3. Click Save Component.

Configure the Initializer Component

This Initializer component triggers the Plug-In component that you'll set up next.

1. Drag and drop an Initializer component onto your canvas, placing it inside the Panel component.

2. In the Property ID and Label Text fields, enter initStart.

3. From the Trigger Type drop-down, select New Submission.

4. In the Outputs table, enter the following:

   Property ID	Type	Value
   pluginGetSubmissions	trigger	GO

   

5. Click Save & Close.

Configure the First Hidden Component

This is the first of two Hidden components in this configuration. This component stores the module ID of your source or submission module. You’ll find the module ID from the source module’s URL as follows. You’ll locate it as the bold text in the following URL: https://training.unqork.io/#/form/5eb01aa6811bf80215fd706b/edit.

1. Drag and drop a Hidden component onto your canvas, placing it below the Initializer component.

2. In the Property ID and Canvas Label Text fields, enter moduleId.

3. In the Default Value field, enter 5eb01aa6811bf80215fd706b. This is the source module's module ID.

4. Click Save & Close.

Configure the Plug-In Component

This Plug-In component connects your module to an API that retrieves the submissions to display in your dashboard.

1. Drag and drop a Plug-In component onto your canvas, placing it below the moduleId Hidden component.

2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions.

3. In the Inputs table, enter the following:

   Property ID	Mapping
   moduleId	moduleId
   'firstName,middleName,lastName,email,dateOfBirth'	fields

   The first row references the module ID stored in the moduleId Hidden component. The second row shows which fields you're pulling into the dashboard. Here, we'll pull the firstName, middleName, lastName, email, and dateOfBirth fields. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork Designer Platform. Add these as shown.

4. From the Internal Service drop-down, select List Submissions for Dashboard. The Data Source URL and the Request Type autopopulate.

   

5. Click Save.

Configure the Second Hidden Component

This Hidden component stores the submission ID.

1. Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Plug-In.

2. In the Property ID and Canvas Label Text fields, enter submissionId.

3. Click Save & Close.

Configure the ViewGrid Component

Next, let's add a ViewGrid component to display your dashboard.

1. Drag and drop a ViewGrid component onto the canvas, placing it below the submissionId Hidden component.

2. In the Label field, enter View Grid.

3. In the Property Name field, enter gridView.

4. In the Action and Event fields, enter View.

5. In the Inputs table, enter the following:

   id	Required
   pluginGetSubmissions	Yes

6. In the Outputs table, enter the following:

   id	Mapping
   submissionId	id

7. In the Display table, enter the following:

   ID	Formula	Heading
   firstName		First Name
   middleName		Middle Name
   lastName		Last Name
   email		Email
   dateOfBirth	=MOMENT(MOMENT(dateOfBirth), 'format', 'MM/DD/YY')	Date of Birth

   The Moment.js in the Formula column formats the dateOfBirth values as MM/DD/YY.

   

8. Click Save.

Configure the Decisions Component

This Decisions component provides the trigger for your dashboard's View button.

1. Drag and drop a Decisions component onto the canvas, placing it below your ViewGrid component.

2. In the Property ID and Canvas Label Text fields, enter ruleButtons.

3. In the Inputs table, enter the following:

   Property ID	Type	Required	Silent
   buttonClick	exact	(unchecked)	(unchecked)
   moduleId	exact	(unchecked)	(checked)
   submissionId	exact	(unchecked)	(checked)

   Every row in the Inputs table gets an associated column in the Micro Decisions table. If an input doesn't have a value in its Micro Decisions column, Unqork sets it to silent. In the next steps, you won't add values to the moduleId and submissionId columns. You'll only be using these inputs in the panelDashboard_pageOpen micro decision. So, you can mark these values as silent, or let Unqork do it for you.

4. In the Outputs table, enter the following:

   Property ID	Type
   panelDashboard	pageOpen

5. In the Micro Decisions table, enter the following:

   buttonClick	panelDashboard_pageOpen
   View	=concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId) Replace moduleId and submissionId with your specific IDs.

   

6. Click Save.

Configure the Submission Search Snippet

Next, let's add the Submission Search snippet to your dashboard module. This snippet sets up your global search functionality, with a few adjustments. You can locate the Submission Search snippet by searching under Snippets drawer to the Module Builder.

To learn more about locating and adding snippets to your module, view our Introduction to Snippets article.

1. In the Module Builder, drag and drop a Submission Search snippet onto your canvas. Place your snippet above your panelDashboard Panel component.

2. Delete the moduleId Hidden component and the pluginGetSubmissions Plug-In component from the panelSubmissionSearch Panel component.

   The Submission Search template includes a moduleId Hidden component and a pluginGetSubmissions Plug-In component. Because you already set these components up, you can delete them from the snippet.

3. Save your module.

Update the Data Workflow Component

Next, we’ll update the Data Workflow component in the snippet to reference your chosen search parameter fields.

1. Hover over the dwSearchGlobal Data Workflow component to open a 4-button toolbar that appears above the component.

2. Using the toolbar, click the (Settings) button.

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

   Fields 1 and 2 already display the following formulas: CONCATENATE('{"data.PROPERTYNAMEONE":"/', _arg, '/i"}') and CONCATENATE('{"data.PROPERTYNAMETWO":"/', _arg, '/i"}'). PROPERTYNAMEONE and PROPERTYNAMETWO are the placeholders for the search parameter fields you’ll be referencing.

   

4. In Field 1, replace PROPERTYNAMEONE with email.

   The Property Name you enter here must match what’s listed in the ID column of the Inputs table in your pluginGetSubmissions Plug-In component. This ties the search to the Email field of your dashboard.

5. In Field 2, replace PROPERTYNAMETWO with lastName.

   The Property Name you enter here must match what’s listed in the ID column of the Inputs table in your pluginGetSubmissions Plug-In component. This ties the search to the Last Name field of your dashboard.

6. Click Save.

7. Save your module.

Sometimes, you might want more than two search parameters in your global search. To reference more than two fields, enter the formula again in Fields 3–5 of the Create Field operator. Increase the sequence for each and replace PROPERTYNAME as needed.

The resulting Info window will look like this:

To reference more than five fields, add another Create Field operator to the workflow. Then, continue the formula sequence. The resulting Info window will look like this:

Update the Text Field Component

Next, you'll update the masterSearchGlobal Text Field component. As configured in the snippet, the Text Field component includes placeholder text that does not match this configuration. The placeholder text tells end-user's what search parameters they can use. You'll update it to direct end-users to search by email address or last name.

1. Hover over the masterSearchGlobal Text Field component to open a 4-button toolbar that appears above the component.

2. Using the toolbar, click the (Settings) button.

3. In the Placeholder Text field, enter Search by email or last name.

   

4. Click Save & Close.

Update the Plug-In Component

To add the search functionality to the dashboard, you'll update your pluginGetSubmissions Plug-In component.

1. Hover over the pluginGetSubmissions Plug-In component to open a 4-button toolbar that appears above the component.

2. Using the toolbar, click the (Settings) button.

3. In the Data Source URL field, enter /fbu/uapi/system/getSubmissions?{{data.searchGlobalFilterOr}}.

   

4. Click Save.

5. Save your module.

Here's how your completed dashboard looks in Express View:

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