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:

And here's how the snippet looks in the Module Builder:

What You'll Learn

In this article, you'll learn:

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 Templates.
3. Click Marketplace.

NOTE  You can also access the Marketplace at any time by visiting 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 Snippets 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.

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:
a. Property ID: enter pluginGetSubmissions.
b. Type: enter trigger.
c. 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.

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:
a. ID: enter pluginGetSubmissions.
b. Required: select Yes.
7. In the Outputs table, enter the following:
a. ID: enter submissionId.
b. 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

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:
a. Property ID: enter panelDashboard.
b. Type: enter pageOpen.
6. In the Micro Decisions table, enter the following:
a. buttonClick: enter View.
b. 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 Snippets.
2. In the Search bar, enter Date Filters.
3. Drag and drop the Date Filterssnippet 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.

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 pluginGetSubmissionsPlug-In.

A 5-button toolbar displays above the component on hover-over.

2. Using the toolbar, click the (Settings) button.
3. At the end of the Data Source URL, add ?{{data.dateQuery}}.

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

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.

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 (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 Templates.
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.