--- title: "How to: Create a Dashboard With Global Search" slug: "use-case-dashboard-with-global-search" description: "Enhance your dashboard navigation with global search functionality, allowing quick access to submissions by email or last name for improved efficiency." updated: 2025-12-08T20:08:27Z published: 2025-12-09T16:46:27Z canonical: "docs.unqork.io/use-case-dashboard-with-global-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 Global Search UDesignerClassic Designer 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.](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](/v1/docs/panel-component) 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](/v1/docs/initializer-component) component triggers the Plug-In component that you'll set up next. 1. Drag and drop an **Initializer** component onto your canvas, inside your 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: | Source | Type | Value | | --- | --- | --- | | pluginGetSubmissions | trigger | GO | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(474).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 5. Click **Save Component**. ### Configure the First Hidden Component This is the first of two [Hidden](/v1/docs/hidden-component) 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 your Initializer component. 2. In the **Property ID** and **Label Text** fields, enter `moduleId`. 3. In the **Default Value** field, enter `5eb01aa6811bf80215fd706b`. This is the source module's module ID. 4. Click **Save Component**. ### Configure the Plug-In Component This [Plug-In](/v1/docs/plug-in-component) 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 your `moduleId` **Hidden** component. 2. In the **Property ID** and **Label Text** fields, enter `pluginGetSubmissions`. 3. In the **Inputs** table, enter the following: | Property ID | Mapping | | --- | --- | | moduleId | moduleId | | 'firstName,middleName,lastName,email,dateOfBirth' | fields | > [!NOTE] > The first row references the module ID stored in the `moduleId` **Hidden** component. The second row shows which fields you're retrieving 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. 4. From the **Internal Service** drop-down, select **List Submissions for Dashboard**. The **Request Type** and **Data Source URL** autopopulate. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(475).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 5. Click **Save Component**. ### Configure the Second Hidden Component This Hidden component stores the submission ID. 1. Drag and drop a **Hidden** component onto your canvas, placing it below your Plug-In component. 2. In the **Property ID** and **Label Text** fields, enter `submissionId`. 3. Click **Save Component**. ### Configure the ViewGrid Component Next, let's add a [ViewGrid](/v1/docs/viewgrid-component) 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 **Property ID** field, enter `gridView`. 3. In the **Label Text** field, enter `View Grid`. 4. In the **Action** and **Event** fields, enter `View`. 5. In the **Inputs** table, enter the following: | # | Source | Required | | --- | --- | --- | | 1 | pluginGetSubmissions | Yes | 6. In the **Outputs** table, enter the following: | # | Source | Mapping | | --- | --- | --- | | 1 | submissionId | id | 7. In the **Display** table, enter the following: | # | ID | Formula | Heading | | --- | --- | --- | --- | | 1 | firstName | | First Name | | 2 | middleName | | Middle Name | | 3 | lastName | | Last Name | | 4 | email | | Email | | 5 | dateOfBirth | =MOMENT(MOMENT(dateOfBirth), 'format', 'MM/DD/YY') | Date of Birth | > [!NOTE] > The Moment.js in the Formula column formats the `dateOfBirth` values as MM/DD/YY. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(490).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 8. Click **Save Component**. ### Configure the Decisions Component This [Decisions](/v1/docs/decisions-component) 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 **Label Text** fields, enter `ruleButtons`. 3. In the **Inputs** table, enter the following: | # | Source | Type | Required | Silent | | --- | --- | --- | --- | --- | | 1 | buttonClick | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | | 2 | moduleId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | ![](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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (checked) | | 3 | submissionId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | ![](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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (checked) | > [!NOTE] > Every row in the Inputs table gets an associated column in the Conditionals table. If an input does not have a value in its Conditionals column, Unqork sets it to silent. In the next steps, you will not add values to the **moduleId** and **submissionId** columns. You'll only use these inputs in the **panelDashboard_pageOpen** conditional. So, you can mark these values as silent, or let Unqork do it for you. 4. In the **Outputs** table, enter the following: | # | Source | Type | | --- | --- | --- | | 1 | panelDashboard | pageOpen | 5. In the **Conditionals** table, enter the following: | # | buttonClick | panelDashboard_pageOpen | | --- | --- | --- | | 1 | View | =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId) > Replace `moduleId` and `submissionId` with your specific IDs. | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(493).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 6. Click **Save Component**. ### 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. > [!TIP] > To learn more about locating and adding snippets to your module, view our [Introduction to Snippets](/v1/docs/introduction-to-snippets) article. 1. Drag and drop a **Submission Search** snippet onto your canvas, placing it above your `panelDashboard` **Panel** component. 2. **Delete** the `moduleId` **Hidden** component and the `pluginGetSubmissions` **Plug-In** component from the `panelSubmissionSearch` **Panel** component. > [!NOTE] > 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](/v1/docs/data-workflow-component) 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 displays above the component. 2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) **(Settings)** button. 3. Click on the **Create Field** operator to open its Info window. > [!NOTE] > 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. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(494).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 4. In **Field 1**, replace `PROPERTYNAMEONE` with `email`. > [!NOTE] > 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`. > [!NOTE] > 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** **Component**. 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: | Setting | Selection | | --- | --- | | Category | Formula | | Label | Leave this field blank. | | 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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | | Field 1 | 0 = CONCATENATE('{"data.PROPERTYNAMEONE":"/', _arg, '/i"}') | | Field 2 | 1 = CONCATENATE('{"data.PROPERTYNAMETWO":"/', _arg, '/i"}') | | Field 3 | 2 = CONCATENATE('{"data.PROPERTYNAMETHREE":"/', _arg, '/i"}') | | Field 4 | 3 = CONCATENATE('{"data.PROPERTYNAMEFOUR":"/', _arg, '/i"}') | | Field 5 | 4 = CONCATENATE('{"data.PROPERTYNAMEFIVE":"/', _arg, '/i"}') | 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: | Setting | Selection | | --- | --- | | Category | Formula | | Label | Leave this field blank. | | 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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | | Field 1 | 5 = CONCATENATE('{"data.PROPERTYNAMESIX":"/', _arg, '/i"}') | | Field 2 | 6 = CONCATENATE('{"data.PROPERTYNAMESEVEN":"/', _arg, '/i"}') | | Field 3 | 7 = CONCATENATE('{"data.PROPERTYNAMEEIGHT":"/', _arg, '/i"}') | | Field 4 | 8 = CONCATENATE('{"data.PROPERTYNAMENINE":"/', _arg, '/i"}') | | Field 5 | 9 = CONCATENATE('{"data.PROPERTYNAMETEN":"/', _arg, '/i"}') | ## 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 ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) **(Settings)** button. 3. In the **Placeholder** field, enter `Search by email or last name`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(495).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 4. Click **Save Component**. ## 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 ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) **(Settings)** button. 3. In the **Data Source URL** field, enter `/fbu/uapi/system/getSubmissions?{{data.searchGlobalFilterOr}}`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(496).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 4. Click **Save Component**. 5. **Save** your module. Here's how your completed dashboard looks in Express View: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_GlobalSearch_Expressfic.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) Here's how your completed dashboard looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(497).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 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.](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](/v1/docs/panel-component) 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](/v1/docs/initializer-component) 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(500).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 5. Click **Save & Close**. ### Configure the First Hidden Component This is the first of two [Hidden](/v1/docs/hidden-component) 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](/v1/docs/plug-in-component) 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 | > [!NOTE] > 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. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(501).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 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](/v1/docs/viewgrid-component) 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 | > [!NOTE] > The Moment.js in the Formula column formats the `dateOfBirth` values as MM/DD/YY. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(502).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 8. Click **Save**. ### Configure the Decisions Component This [Decisions](/v1/docs/decisions-component) 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 | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | | moduleId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | ![](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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (checked) | | submissionId | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/icon_unchecked.png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | ![](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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (checked) | > [!NOTE] > 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. | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(503).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 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. > [!TIP] > To learn more about locating and adding snippets to your module, view our [Introduction to Snippets](/v1/docs/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. > [!NOTE] > 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](/v1/docs/data-workflow-component) 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 ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) **(Settings)** button. 3. Click on the **Create Field** operator to open its Info window. > [!NOTE] > 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. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(504).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 4. In **Field 1**, replace `PROPERTYNAMEONE` with `email`. > [!NOTE] > 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`. > [!NOTE] > 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: | Setting | Selection | | --- | --- | | Category | Formula | | Label | Leave this field blank. | | 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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | | Field 1 | 0 = CONCATENATE('{"data.PROPERTYNAMEONE":"/', _arg, '/i"}') | | Field 2 | 1 = CONCATENATE('{"data.PROPERTYNAMETWO":"/', _arg, '/i"}') | | Field 3 | 2 = CONCATENATE('{"data.PROPERTYNAMETHREE":"/', _arg, '/i"}') | | Field 4 | 3 = CONCATENATE('{"data.PROPERTYNAMEFOUR":"/', _arg, '/i"}') | | Field 5 | 4 = CONCATENATE('{"data.PROPERTYNAMEFIVE":"/', _arg, '/i"}') | 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: | Setting | Selection | | --- | --- | | Category | Formula | | Label | Leave this field blank. | | 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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%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-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (unchecked) | | 1 | 5 = CONCATENATE('{"data.PROPERTYNAMESIX":"/', _arg, '/i"}') | | 2 | 6 = CONCATENATE('{"data.PROPERTYNAMESEVEN":"/', _arg, '/i"}') | | 3 | 7 = CONCATENATE('{"data.PROPERTYNAMEEIGHT":"/', _arg, '/i"}') | | 4 | 8 = CONCATENATE('{"data.PROPERTYNAMENINE":"/', _arg, '/i"}') | | 5 | 9 = CONCATENATE('{"data.PROPERTYNAMETEN":"/', _arg, '/i"}') | ## 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 ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) **(Settings)** button. 3. In the **Placeholder Text** field, enter `Search by email or last name`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(505).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 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 ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) (**Settings**) button. 3. In the **Data Source URL** field, enter `/fbu/uapi/system/getSubmissions?{{data.searchGlobalFilterOr}}`. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(507).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) 4. Click **Save**. 5. **Save** your module. Here's how your completed dashboard looks in Express View: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_Dashboards_GlobalSearch_Expressfic.jpg?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%3D) Here's how your completed dashboard looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(498).png?sv=2026-02-06&spr=https&st=2026-11-09T16%3A59%3A11Z&se=2026-11-09T17%3A59%3A11Z&sr=c&sp=r&sig=0%2Bptbb6t7DSKPbUt0hzFg0XugQNcSN%2BpX%2B995fABZdw%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. A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address. 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. A JavaScript date library that lets you parse, validate, manipulate, and reformat dates. 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. 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.