---
title: "Date Filters Snippet"
slug: "date-filters-snippet"
updated: 2025-09-26T02:16:35Z
published: 2025-09-26T02:16:35Z
canonical: "docs.unqork.io/date-filters-snippet"
---

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

# Date Filters Snippet

## Overview

For an easy way to filter through submissions in a dashboard, use the Date Filters snippet. At first, you might find navigating your dashboard without filters to be simple. As your dashboard accumulates submissions, though, navigation can grow more challenging. That's where the Date Filters snippet helps.

Imagine trying to find one specific submission in a dashboard of hundreds. You can probably guess that's no small feat. With the Date Filters snippet, you can view submissions from a range of dates. You can either set a custom date range or choose from preset options in a drop-down menu.

Here's how the snippet looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_ExpressView.gif?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

And here's how the snippet looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_ModuleEditor.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

## Adding the Snippet

Once you determine a need to filter by date, you'll add the Date Filters Snippet.

Before you use this snippet in your application, you must install the snippet to your environment.

### Adding the Snippet to Your Environment

To add the snippet to your environment:

1. At the top right of the Unqork Designer Platform, click **Library**.
2. Click **Template****s**.
3. Click **Marketplace**.

> [!NOTE]
> You can also access the Marketplace at any time by visiting [https://marketplace.unqork.io](https://marketplace.unqork.io/#/).
4. In the **Search the Listings Directory** field, enter Date Filters.
5. Click the **Date Filters** tile.
6. Click **Install to Environment**.
7. Click **Install** **Template**.

> [!NOTE]
> If you aren't logged in, you'll see a field for **Environment URL** and a **Login** button. Enter your environment's URL where you want to install the template. For example: [environmentname.unqork.io]. Click the **Login** button. Then, return to step 4 and click **Install to Environment** again. Follow the remaining steps as listed.

Now, you can now use your newly installed snippet in your application.

### Adding the Snippet to Your Module

After installing the Date Filters snippet to your environment, you can drag and drop the snippet into your module:

1. In the left sidebar of the Module Builder, click the **Snippet****s** button.
2. In the search bar, enter Date Filters.
3. Drag and drop the **Date Filters** snippet onto your canvas.

> [!NOTE]
> If you don't see the snippet at first, make sure to expand the **Marketplace Snippets** section.
4. **Save** your module.

## How the Snippet Works

In the Date Filters snippet, you'll use two Date Input components to set a date range. Your dashboard updates to only show submissions that fall in that date range.

You also have the option to choose a preset date range. For preset date ranges, the snippet uses a Multi-Select Dropdown component. When you make a selection there, your Date Input fields populate accordingly.

At first glance, the Date Filters snippet might seem simple. But behind the scenes, a lot is going on. The snippet has several Calculator components that each determine a different date range. Each selection from the Multi-Select Dropdown component triggers a different Calculator. For example, by selecting **Previous Year**, you trigger a Calculator called calcDateValuesYTD. This Calculator takes today's date and finds the date one year ago.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_ModuleEditor_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)

For custom ranges, the snippet includes a Data Workflow that validates the entries. This Data Workflow ensures that your From date always comes before your To date. If the dates entered are invalid, an issue occurs in the Data Workflow. An error message displays from a hidden Text Field component.

While this snippet offers a lot of functionality, it doesn't work off-the-shelf. First, you'll configure the components to connect to your existing dashboard.

> [!NOTE]
> If you have more than one date field in your dashboard, you can set the snippet to sort by any field of your choosing. A walk-through for this is in the next section.

## Setting Up the Snippet

Your Date Filters snippet collects the date range you want to view. The configuration you complete communicates that date range to your actual dashboard. Since this snippet requires more setup than most, here is a sample use case.

Create a dashboard where you can view some customer information. Your dashboard module will draw submissions from a source module (**5ef380b5804251020c3b019b**). Each submission has a field for Investment Date. Using the Date Filters snippet, you'll sort by this Investment Date.

### What You Need

To complete this use case, you need:

- 1 Panel component
- 1 Button component
- 2 Initializer components
- 1 Calculator component
- 3 Hidden components
- 1 Plug-In component
- 1 ViewGrid component
- 1 Decisions component
- 1 Date Filters snippet

The Date Filters snippet includes:

- 1 Panel component
- 1 Columns component
- 1 Multi-Select Dropdown component
- 2 Date Input components
- 2 Text Field components
- 6 Calculator components
- 1 Data Workflow component
- 1 Hidden component
- 2 Decisions components

### Pre-Configuration

First, create a new module from scratch to hold a dashboard. You'll use that dashboard to display submissions from your source module. You'll use a Plug-In component to perform a Get Submissions API call. And you'll use a ViewGrid component to display the results of that call.

#### Configure the Panel Component

To keep things organized, you'll add a Panel component to hold the core pieces of your dashboard.

1. Drag and drop a **Panel** component onto your canvas.
2. In the **Property ID**, enter panelDashboard.
3. Click **Save**.

#### Configure the Initializer Component

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

1. Drag and drop an **Initializer** component onto your canvas. Place your Initializer inside the Panel.
2. In the **Property ID** and **Label Text** fields, enter initStart.
3. Select **New Submission** from the **Trigger Type** options.
4. In the **Outputs** table, enter the following:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_Initializer_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
  1. **Property ID**: enter pluginGetSubmissions.
  2. **Type**: enter trigger.
  3. **Value**: enter GO.
5. Click **Save**.

#### Configure the Hidden Component

This is the first of 2 Hidden components you'll use for your dashboard. It houses the module ID of your source or submission module. You can pull the module ID from the source module’s hyperlink as follows: https://training.unqork.io/#/form/**5ef380b5804251020c3b019b**/edit.

1. Drag and drop a **Hidden** component onto your canvas. Place your Hidden component below the Initializer.
2. In the **Property ID** and **Label Text** fields, enter moduleId.
3. In the **Default Value** field, enter 5ef380b5804251020c3b019b. This is the source module's module ID.
4. Click **Save**.

#### Configure the Plug-In Component

This Plug-In connects your module to the outside world. To make this connection, use an application programming interface (API). You'll use this Plug-In to get submissions to display in your dashboard.

1. Drag and drop a **Plug-In** component onto your canvas. Place your Plug-In below the moduleId Hidden component.
2. In the **Property ID** and **Label Text** fields, enter pluginGetSubmissions.
3. From the **Unqork Service** drop-down, select **List Submissions for Dashboard**. /fbu/uapi/system/GetSubmissions will appear in the **Data Source URL** field.
4. Select **Manual** from the **Trigger Type** options.
5. Complete the **Inputs** table as follows:

| Property ID | Mapping |
| --- | --- |
| moduleId | moduleId |
| 'firstName,middleName,lastName,email,dateOfBirth' | fields |
| 'investmentDate,investmentAmount,transferringBank' | fields |

> [!NOTE]
> The first row references the module ID stored in the moduleId Hidden component. The second and third rows show which fields you're pulling into the dashboard. Here, you'll pull the firstName, middleName, lastName, email, dateOfBirth, investmentDate, investmentAmount, and transferringBank fields. The values entered in the Mapping column (moduleId and fields) are native values recognized by the Unqork Designer Platform. Add these as shown.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_PlugIn_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
6. Click **Save**.

#### Configure the Hidden Component

This is the second Hidden component you'll use for your dashboard. It houses 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 **Label Text** fields, enter submissionId.
3. Click **Save**.

#### Configure the ViewGrid Component

Next, addn a ViewGrid component to display your dashboard.

1. Drag and drop a **ViewGrid** component onto your canvas. Place your ViewGrid 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** field, enter View.
5. In the **Event** field, enter View.
6. In the **Inputs** table, enter the following:
  1. **ID**: enter pluginGetSubmissions.
  2. **Required**: select Yes.
7. In the **Outputs** table, enter the following:
  1. **ID**: enter submissionId.
  2. **Mapping**: enter id.
8. In the **Display** table, enter the following:

| ID | Formula | Heading |
| --- | --- | --- |
| firstName |  | First Name |
| lastName |  | Last Name |
| email |  | Email |
| investmentAmount |  | Investment Amount |
| transferringBank |  | Transferring Bank |
| investmentDate |  | Investment Date |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_ViewGrid_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
9. Click **Save**.

#### Configure the Decisions Component

1. Drag and drop a **Decisions** component onto the canvas. Place it below your ViewGrid component.
2. In the **Property ID** and **Label Text** fields, enter ruleButtons.
3. Select **Watch** from the **Trigger Type** options. This setting means your Decision watches for any change before executing.
4. In the **Inputs** table, enter the following:

| Property ID | Type | Required | Silent |
| --- | --- | --- | --- |
| buttonClick | exact |  |  |
| moduleId | exact |  | Yes (checked) |
| submissionId | exact |  | Yes (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 use these inputs in the **panelDashboard_pageOpen** micro decision. So, you can mark these values as silent, or let Unqork do it for you.
5. In the **Outputs** table, enter the following:
  1. **Property ID**: enter panelDashboard.
  2. **Type**: enter pageOpen.
6. In the **Micro Decisions** table, enter the following:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_Decisions_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
  1. **buttonClick**: enter View.
  2. **panelDashboard_pageOpen**: enter =concatenate('/#/display/',moduleId,'/', submissionId , '/',moduleId).
7. Click **Save**.

### Configuration

Now that you have your dashboard to view submissions, add the Date Filters snippet. Then, you'll customize the snippet to integrate with your dashboard.

#### Add the Date Filters Snippet

1. In the left sidebar of the Module Builder, click **Snippet****s**.
2. In the **Search** bar, enter Date Filters.
3. Drag and drop the **Date Filters**snippet onto your canvas. Place the snippet above your dashboard.

#### Configure the Calculator Component

Next, add a Calculator component. Your Calculator puts your date range into a single string called a query string. You'll later add this query string to the Plug-In component for your dashboard.

1. Drag and drop a **Calculator** component onto your canvas. Place your Calculator component above the dwfDateValidation Data Workflow component.
2. In the **Property ID** and **Label Text** fields, enter calcDateQuery .
3. Select **Manual** from the **Trigger Type** options.
4. In the **Inputs** table, enter the following:

| Property ID | Alias |
| --- | --- |
| filterStartDate | A |
| filterEndDate | B |
5. In the **Outputs** table, enter the following:

| Property ID | Formula |
| --- | --- |
| startDateF | =MOMENT(MOMENT(A), 'format', 'YYYY-MM-DD') |
| endDateF | =MOMENT(MOMENT(B), 'format', 'YYYY-MM-DD') |
| dateQuery | =CONCATENATE('data.investmentDate>=',startDateF,'"T00:00:00.000Z"','&data.investmentDate<=',endDateF,'"T00:00:00.000Z"') > [!NOTE] > In this example, queries are for the Investment date. Change investmentDate to any date field you want to filter. |

> [!NOTE]
> In your ID column, dateQuery refers to the Hidden component you'll add in the next step.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_Calculator_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
6. Click **Save**.

#### Configure the Hidden Component

Next, add a Hidden component to house the query string from your Calculator. Later, you'll reference this component in your Plug-In component.

1. Drag and drop a **Hidden** component onto your canvas. Place your Hidden component above the dwfDateValidation Data Workflow component.
2. In the **Property ID** and **Label Text** fields, enter dateQuery.
3. Click **Save**.

#### Update the pluginGetSubmissions Plug-In Component

To tie your Date Filters to your dashboard, you'll need to modify your Plug-In component. You'll update the Data Source URL using the data from your dateQuery Hidden component.

1. In the Module Builder hover over the pluginGetSubmissions**Plug-In**.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(23).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (**Settings**) button.
3. At the end of the **Data Source URL**, add ?{{data.dateQuery}}.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_PlugIn_02.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
4. Click **Save**.

#### Configure the Initializer Component

Next, you'll add a second Initializer component to the configuration. The initStart Initializer for your dashboard fires on page load. So, you'll need to add another that fires when you update your Date Filters. Your new Initializer will trigger both your calcDateQuery Calculator and your Plug-In component. Later, you'll add a Button component to trigger this Initializer.

1. Drag and drop an **Initializer** component onto your canvas. Place your Initializer component above the calcDateQuery Calculator component.
2. In the **Property ID** and **Label Text** fields, enter initSearch.
3. Select **Manual** from the **Trigger Type** options.
4. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| calcDateQuery | trigger | GO |
| pluginGetSubmissions | trigger | GO |

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_Initializer_02.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
5. Click **Save**.

#### Configure the Button Component

Finally, add a Button component to trigger your Initializer. Clicking this button is what results in your filtered dashboard view.

1. Drag and drop a **Button** component onto your canvas. Place your Button component above the initSearch Initializer component.
2. In the **Property ID** field, enter btnSearch.
3. In the **Label Text** field, enter Search.
4. Select **Event** from the **Action Type** options.
5. In the **Trigger on Click** field, enter initSearch.
6. Click **Save**.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Templates_DateFilters_Button_01.jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D)
7. **Save** your module.

With this configuration complete, you can now preview your module in Express View. You'll see your Date Filter options above your dashboard. Enter a date range and click Search. Your dashboard updates to only show the applicable submissions.

## Removing the Snippet

You might want to remove a snippet from your application. Here, you'll learn how to remove the snippet from your module. Then, you'll learn how to uninstall the snippet from your environment.

### Remove the Snippet from Your Module

To remove the Date Filters snippet:

1. In the Module Builder, hover over the **panelDateRangeFilter** Panel.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(13).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A05%3A06Z&se=2026-11-08T19%3A05%3A06Z&sr=c&sp=r&sig=QL6kOmfEWWbcQRUwTTSKeM%2BVslRUWI0hDvf4nBQjTzQ%3D) (**Remove**) button.
3. **Save** your module.

### Remove the Snippet from Your Environment

Use the Unqork Template Library to remove unused snippets. To uninstall a snippet from your environment:

1. At the top right of the Unqork Designer Platform, click **Library** or **Template****s**.
2. Find the snippet you want to uninstall.
3. Click the **ellipsis** (...) in the snippet's tile header.
4. Click **Uninstall** **Template**.
5. Click **Yes, Uninstall** in the confirmation modal.

You can visit the Marketplace and reinstall the snippet at any time.

> [!NOTE]
> What if you have an existing application built using this snippet and then uninstall the snippet from your environment? No problem. Your existing application remains unaffected. Also, your application doesn't have any ties to the snippet. So, let's say you reinstall a newer version of the snippet in the future. You can rest assured that the installation doesn't impact your existing application.