How to: Create a Dashboard With Individual Search

Configure the Panel Components

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

1. In the Module Builder, drag and drop two Panel components onto your canvas.

2. In the Property ID field, enter the following, as well as enabling the Hide Panel setting for each component:

   #	Property ID	Hide Panel
   1	panelGlobalSearch	(ON)
   2	panelIndividualSearch	(ON)

   Later, you'll use a Decisions component to display these Panel components depending on which radio button option the end-users select.

3. Click Save Component for each component as you add it.

Configure the Submission Search Snippet

Next, you'll add the Submission Search snippet to your dashboard module to configure the 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:

1. At the top right of the Module Builder, click the (ellipsis) button.

2. Select Snippets.

3. In the Search Snippets field, enter Submission Search.

4. Drag and drop the Submission Search snippet inside the panelGlobalSearch Panel component.

5. Delete the panelSubmissionSearch Panel component.

6. Save your module.

Update the Text Field Component

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

1. Open the masterSearchGlobal Text Field component settings drawer.

2. In the Placeholder Text field, replace the value with Search all fields.

   

3. Click Save Component.

Update the Hidden Component

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

1. Open the moduleId Hidden component settings drawer.

2. In the Default Value field, enter 5ebec714ce23f0020fbf9667.

3. Click Save Component.

Update the Data Workflow Component

Next, you’ll update the dwSearchGlobal Data Workflow component in your snippet so it references your chosen dashboard fields.

1. Open the dwSearchGlobal Data Workflow component settings drawer.

2. Select the Create Field operator to open its Info window.

3. Configure the operator’s Info window as follows:

   Setting	Value
   Category	Create Field
   Label
   Do Not Sanitize Formula	(checked)
   Preserve Argument Type	(unchecked)
   Field 1	0 = CONCATENATE('{"data.firstName":"/', _arg, '/i"}')
   Field 2	1 = CONCATENATE('{"data.lastName":"/', _arg, '/i"}')
   Field 3	2 = CONCATENATE('{"data.dob":"/', _arg, '/i"}')
   Field 4	3 = CONCATENATE('{"data.phoneNumber":"/', _arg, '/i"}')
   Field 5	4 = CONCATENATE('{"data.comment":"/', _arg, '/i"}')

   

4. Click Save Component.

Update the Plug-In Component

Next, you'll update the pluginGetSubmissions Plug-In component in your snippet. This Plug-In component retrieves submission data to display in your global search dashboard.

1. Open the pluginGetSubmissions Plug-In component settings drawer.

2. In the Property ID and Canvas Label Text fields, replace the values with pluginGetSubmissionsGlobal.

3. In the Inputs table, enter the following:

   #	Property ID	Mapping
   1	moduleId	moduleId
   2	'firstName,lastName,dob,phoneNumber,comment'	fields

   

4. Click Save Component.

Configure the ViewGrid Component

Next, let's configure 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 inside your panelGlobalSearch Panel component.

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

3. In the Action field, enter null. Doing so removes the default Submit button from your dashboard.

4. In the Inputs table, enter pluginGetSubmissionsGlobal.

5. In the Display table, enter the following:

   #	ID	Formula	Heading
   1	dob	=MOMENT(MOMENT(dob), 'format', 'MM/DD/YYYY	Date of Birth
   2	firstName		First Name
   3	lastName		Last Name
   4	phoneNumber		Phone Number
   5	comment		Comment

   The Moment.js formula in the dob row references and formats the dob Property ID in the snippet as MM/DD/YYYY in your dashboard. Doing so makes it easier to compare the date input search format (MM/DD/YYYY) to the dashboard value.

   

6. Click Save Component.

Configure the Plug-In Component

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

1. Drag and drop a Plug-In component inside your panelIndividualSearch Panel component.

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

3. From the Internal Services drop-down, select List Submissions for Dashboard.

4. In the Data Source URL, 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"}]}.

   Here, you're adding the MongoDB query to the Data Source URL that populates when you select the List Submissions for Dashboard service. This query references the search fields you'll add later.

5. In the Inputs table, enter the following:

   #	Property ID	Mapping
   1	moduleId	moduleId
   2	'firstName,lastName,dob,phoneNumber,comment'	fields
   3	searchFirstName
   4	searchLastName
   5	searchDob
   6	searchPhoneNumber
   7	searchComment

6. Set the Trigger Type as Watch.

   

7. Click Save Component.

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, placing it below the pluginGetSubmissionsIndividual Plug-In component.

2. In the Property ID field, enter htmlIndividualFilter.

3. In the Content field, enter Filter.

4. In the Tag field, enter h4.

   

5. Click Save Component.

Configure the Columns Component

A Columns component will keep your individual search fields organized.

1. Drag and drop a Columns component onto your canvas, placing it below your htmlIndividualFilter HTML Element component.

2. In the Property ID field, enter colIndividualFilters.

3. Select Customize Columns as the Column Layout.

4. Click Add New Row until you have six columns.

5. In the Width field for each column, enter 2.

   The maximum total width of your columns is 12. You can divide this width however you'd like among your columns.

   

6. Click Save Component.

Configure the Date Input Component

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

1. Drag and drop a Date Input component inside the first (far-left) column of the colIndividualFilters Columns component.

2. In the Property ID field, enter searchDob.

3. In the Label Text field, enter Date of Birth.

4. Click Save Component.

Configure the Text Field Components

1. Drag and drop four Text Field components inside the next four columns, from left to right, of the colIndividualFilters Columns component.

2. In the Property ID and Label Text fields, enter the following for each component:

   #	Property ID	Label Text
   1	searchFirstName	First Name
   2	searchLastName	Last Name
   3	searchPhoneNumber	Phone Number
   4	searchComment	Comment

3. Click Save Component for each component as you add it.

Configure the ViewGrid Component

Next, add another ViewGrid component to display your dashboard. This dashboard displays when end-users select the Individual radio button.

1. Drag and drop a ViewGrid component onto your canvas, placing it below your colIndividualFilters Columns component.

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

3. In the Inputs table, enter pluginGetSubmissionsIndividual.

4. In the Display table, enter the following:

   #	ID	Formula	Heading
   1	dob	=MOMENT(MOMENT(dob), 'format', 'MM/DD/YYYY')	Date of Birth
   2	firstName		First Name
   3	lastName		Last Name
   4	phone		Phone Number
   5	comment		Comment

   

5. In the Action field, enter null.

6. Click Save Component.

Configure the Radio Buttons Component

The Radio Buttons component acts as the switch between global and individual search options. When end-users select Global, the global search options and dashboard display. When end-users select Individual, the individual search options and dashboard display.

1. Drag and drop a Radio Buttons component onto your canvas, placing it above your panelGlobalSearch Panel component.

2. In the Property ID field, enter typeOfFilter.

3. In the Label Text field, enter What type of filter would you like to see?.

4. In the Values table, enter the following:

   #	Label	Value
   1	Global	global
   2	Individual	individual

5. Click Save Component.

Configure the Decisions Component

Next, you’ll configure a Decisions component to display either the individual or global search options, and their respective dashboards. Which displays depends on the end-user's radio button section.

1. Drag and drop a Decisions component onto your canvas, placing it below your typeOfFilter Radio Buttons component.

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

3. Set the Trigger Type as Watch.

4. In the Inputs table, enter the following:

   #	Property ID	Type	Required
   1	typeOfFilter	exact	(checked)

5. In the Outputs table, enter the following:

   #	Property ID	Type
   1	panelGlobalSearch	visible
   2	panelIndividualSearch	visible
   3	pluginGetSubmissionsGlobal	trigger
   4	pluginGetSubmissionsIndividual	trigger

6. In the Conditional table, enter the following:

   #	typeOfFilter	panelGlobalSearch_visible	panelIndividualSearch_visible	pluginGetSubmissionsGlobal_trigger	pluginGetSubmissionsIndividual_trigger
   1	global	yes	no	GO
   2	individual	no	yes		GO
   3		no	no

   

7. Click Save Component.

8. Save your module.

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

Preview your module in Express View and select the Individual radio button. Use the filters to enter information and locate specific submission data. As you enter text in the filters, the dashboard populates with matches automatically.