---
title: "How to: Create a Dashboard With Individual Search"
slug: "use-case-dashboard-with-individual-search"
description: "Learn to enhance your dashboard with individual and global search features for better navigation and specific data retrieval."
updated: 2026-01-20T17:49:25Z
published: 2026-01-20T20:38:53Z
canonical: "docs.unqork.io/use-case-dashboard-with-individual-search"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Create a Dashboard With Individual Search

Your dashboard is only useful if it's easy to navigate. But navigation becomes more difficult as more submission data displays on your dashboard. In this how-to guide, you'll learn how to add an **individual search** feature to your dashboard.

## What Is Individual Search?

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

> [!TIP]
> To learn more about creating a global search tool in your dashboard, view our [How to: Create a Dashboard With Global Search](/v1/docs/use-case-dashboard-with-global-search) article.

## Configuration

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

- First Name
- Last Name
- Date of Birth
- Phone Number
- Comment

In this how-to guide, you'll set up an individual and global search function on a dashboard for comparison. Lastly, you'll set up a [Radio Buttons](/v1/docs/radio-buttons-component) component to toggle between these options.

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

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

Select the tab that corresponds to your Unqork Designer experience:

UDesignerClassic Designer

### Configure the Panel Components

These [Panel](/v1/docs/panel-component) 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(ON)** |
| 2 | panelIndividualSearch | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(ON)** |

> [!NOTE]
> Later, you'll use a [Decisions](/v1/docs/how-to-guide-decisions-component) 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](/v1/docs/introduction-to-snippets) 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 ![ellipsisButtonDummy.jpg](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsisButtonDummy.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(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`.

![Text field settings with placeholder text replaced with "Search all fields."](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1767800857884.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) (checked) |
| Preserve Argument Type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) (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"}') |

![Data Workflow canvas with Create Field operator Fields filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_dwSearchGlobal.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
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 |

![Plug-in configuration settings including List Submissions for Dashboard and input mappings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image-1767801739382.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
4. Click **Save Component**.

### Configure the ViewGrid Component

Next, let's configure a [ViewGrid](/v1/docs/viewgrid-component) 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 |

> [!NOTE]
> 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.

![ViewGrid component settings with Display table and Action field highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_gridSubmissionsGlobal.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
6. Click **Save Component**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) 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"}]}`.

> [!NOTE]
> 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**.

![Plug-in configuration with Internal Services, Data Source URL, and the Inputs table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_pluginGetSubmissionsIndividual.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
7. Click **Save Component**.

### Configure the HTML Element Component

This [HTML Element](/v1/docs/html-element-component) 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`.

![HTML element settings with Content and Tag fields highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_htmlIndividualFilter.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
5. Click **Save Component**.

### Configure the Columns Component

A [Columns](/v1/docs/columns-component) 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`.

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

![Columns component settings with Customize Columns and the Column width table highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_colIndividualFilters.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
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](/v1/docs/viewgrid-component) 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 |

![ViewGrid settings with Display table and Action field highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_gridSubmissionsIndvidual.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
5. In the **Action** field, enter `null`.
6. Click **Save Component**.

### Configure the Radio Buttons Component

The [Radio Buttons](/v1/docs/radio-buttons-component) 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](/v1/docs/how-to-guide-decisions-component) 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) (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 |  |  |

![Decisions component settings with Trigger Type, Inputs, Outputs, and Conditionals highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_ruleShowFilters.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
7. Click **Save Component**.
8. **Save** your module.

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

![Completed Module Builder containing all components.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/IndividualSearch_ModuleEditor.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)

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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_IndSearch_Express_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)

### Configure the Panel Components

These [Panel](/v1/docs/panel-component) 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(ON)** |
| 2 | panelIndividualSearch | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(771).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) **(ON)** |

> [!NOTE]
> Later, you'll use a [Decisions](/v1/docs/how-to-guide-decisions-component) component to display these Panel components depending on which radio button option the end-users select.
3. Click **Save** for each component as you add it.

### Add the Submission Search Snippet

Next, you'll add the **Submission Search** [snippet](/v1/docs/introduction-to-snippets) 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. Above the Component Tray, to the left of the Module Builder, click **Snippets**.
2. In the search bar, enter `Submission Search`.
3. Drag and drop the Submission Search snippet inside the `panelGlobalSearch` **Panel** component.
4. **Delete** the `panelSubmissionSearch` **Panel** component.
5. **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.
2. In the **Placeholder Text** field, replace the value with `Search all fields`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Bootcamp_IndividualSearch_TextField_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
3. Click **Save**.

#### 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.
2. In the **Default Value** field, enter `5ebec714ce23f0020fbf9667`.
3. Click **Save**.

#### 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.
2. Select the **Create Field** operator to open its **Info** window.
3. In the **Info** window, enter the following:

| Setting | Value |
| --- | --- |
| Category | Create Field |
| Label |  |
| Do Not Sanitize Formula | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(7).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) (checked) |
| Preserve Argument Type | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) (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"}') |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Dashboards_IndividualSearch_DWF.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
4. Click **Save**.

#### 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.
2. In the **Property ID** and **Label Text** fields, replace the values with `pluginGetSubmissionsGlobal`.
3. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName,lastName,dob,phoneNumber,comment' | fields |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Bootcamp_IndividualSearch_Plugin_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
4. Click **Save**.

### Configure the ViewGrid Component

Next, let's configure a [ViewGrid](/v1/docs/viewgrid-component) 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 **Label** and **Property Name** 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 |
| --- | --- | --- |
| dob | =MOMENT(MOMENT(dob), 'format', 'MM/DD/YYYY | Date of Birth |
| firstName |  | First Name |
| lastName |  | Last Name |
| phoneNumber |  | Phone Number |
| comment |  | Comment |

> [!NOTE]
> 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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_IndivSearch_VGGlobal.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
6. Click **Save**.

### Configure the Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) 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. Set the **Trigger Type** as **Watch**.
4. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName,lastName,dob,phoneNumber,comment' | fields |
| searchFirstName |  |
| searchLastName |  |
| searchDob |  |
| searchPhoneNumber |  |
| searchComment |  |
5. From the **Internal Services** drop-down, select **List Submissions for Dashboard**.
6. 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"}]}`.

> [!NOTE]
> 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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Bootcamp_IndividualSearch_Plugin_02.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
7. Click **Save**.

### Configure the HTML Element Component

This [HTML Element](/v1/docs/html-element-component) 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 **HTML Tag** field, enter `h4`.
4. In the **Content** field, enter `Filter`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Bootcamp_IndividualSearch_Html_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
5. Click **Save**.

### Configure the Columns Component

A [Columns](/v1/docs/columns-component) 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 **Custom** as the **Column Layout**.
4. Click **Add Column** until you have six columns.
5. In the **Width** field for each column, enter `2`.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Bootcamp_IndividualSearch_Columns_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
6. Click **Save**.

### 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**.

### 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. **Save** each component as you add it.

### Configure the ViewGrid Component

Next, add another [ViewGrid](/v1/docs/viewgrid-component) 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 **Label** and **Property Name** fields, enter `gridSubmissionsIndividual`.
3. In the **Action** field, enter `null`.
4. In the **Inputs** table, enter `pluginGetSubmissionsIndividual`.
5. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| dob | =MOMENT(MOMENT(dob), 'format', 'MM/DD/YYYY') | Date of Birth |
| firstName |  | First Name |
| lastName |  | Last Name |
| phone |  | Phone Number |
| comment |  | Comment |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_IndivSearch_VGIndiv.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
6. Click **Save**.

### Configure the Radio Buttons Component

The [Radio Buttons](/v1/docs/radio-buttons-component) 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. Set your **Option Label** and **Value to Store in Submission Data** as shown below:

| Option Label | Value to Store in Submission Data |
| --- | --- |
| Global | global |
| Individual | individual |
5. Click **Save**.

### Configure the Decisions Component

Next, you’ll configure a [Decisions](/v1/docs/how-to-guide-decisions-component) 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 |
| --- | --- | --- |
| typeOfFilter | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Checked_Box(12).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D) (checked) |
5. In the **Outputs** table, enter the following:

| Property ID | Type |
| --- | --- |
| panelGlobalSearch | visible |
| panelIndividualSearch | visible |
| pluginGetSubmissionsGlobal | trigger |
| pluginGetSubmissionsIndividual | trigger |
6. In the **Micro Decisions** table, enter the following:

| typeOfFilter | panelGlobalSearch_visible | panelIndividualSearch_visible | pluginGetSubmissionsGlobal_trigger | pluginGetSubmissionsIndividual_trigger |
| --- | --- | --- | --- | --- |
| global | yes | no | GO |  |
| individual | no | yes |  | GO |
|  | no | no |  |  |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Bootcamp_IndividualSearch_Decisions_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)
7. Click **Save**.
8. **Save** your module.

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_IndivSearch_EditorFix.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)

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.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_IndSearch_Express_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A52Z&se=2026-11-08T04%3A56%3A52Z&sr=c&sp=r&sig=7DLAbckgEF6J5D919VG%2FQS0Db5ZWjnkaaKtFeVKO%2BU0%3D)

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

A UI (User Interface) Drawer is a layout panel that slides out from the side of the screen to display content. In UDesigner, components display their configuration panels in a drawer.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

Enter inputs components and actions you want the component to perform..

A JavaScript date library that lets you parse, validate, manipulate, and reformat dates.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Enter outputs components and actions you want the component to perform.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

A Property ID is the unique field ID used by Unqork to track and link components in your module.