---
title: "Paginated Dashboard Snippet"
slug: "paginated-dashboard-snippet"
updated: 2025-09-26T07:08:45Z
published: 2025-09-26T07:08:45Z
canonical: "docs.unqork.io/paginated-dashboard-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.

# Paginated Dashboard Snippet

## Overview

As the name suggests, the Paginated Dashboard snippet comes with a pre-built dashboard. We’ve configured the dashboard to work with an API (application programming interface) that uses offset pagination. API pagination is a helpful strategy to make sure your APIs run smoothly and effectively. Pagination divides records across multiple pages rather than showing all results at once. The total number of records calculate server-side before they're paginated and returned client-side. Using limit and offset commands, you can quickly page through your data and display it on your dashboard.

> [!NOTE]
> The Paginated Dashboard snippet works hand-in-hand with the [Paginated Submissions API snippet](/v1/docs/paginated-submissions-api-snippet). You’ll use the Paginated Submissions API snippet to pull submissions into your paginated dashboard.

Here's an example of the snippet looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets-Paginated_Dashboard-express.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)

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

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets-Paginated_Dashboard00.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)

## Adding the 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. Click **Templates** at the top right of the Unqork Designer Platform.
2. Click **Marketplace**.

> [!NOTE]
> You can also access the Marketplace at any time by visiting [https://marketplace.unqork.io](https://marketplace.unqork.io/#/).
3. Enter Paginated Dashboard in the **Search the Listings Directory** field.
4. Click the **Paginated Dashboard** tile.
5. Click **Install to Environment**.
6. 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 adding the 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. Enter Paginated Dashboard in the search bar.
3. Drag and drop the **Paginated Dashboard** 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

Let's take a look at how this snippet works:

1. The Plug-In retrieves the submissions you want to display from the module ID specified in the Plug-In's Data Source URL.
2. The calcSetTotal Calculator uses Lodash to calculate the total number of submissions. It passes this information to the ViewGrid.
3. The vgSubmissions ViewGrid displays your submissions in a dashboard in Express View.

## Setting Up the Snippet

Here’s what’s required to get the snippet up and running. First, you'll need a server-side module built from the Paginated Submissions API snippet. Then, you'll:

1. Update the Paginated Dashboard snippet so it pulls submissions from your Paginated Submissions API module.
2. Update the ViewGrid with the fields you want to display in your dashboard.
3. Updating the number of submissions per page.

### Updating the Data Source URL

You'll do a quick update in the pluginGetSubmissions Plug-In component. This maps your dashboard module to your Paginated Submissions API module.

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

A 5-button toolbar appears 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(32).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) (**Settings**) button.
3. Enter your Paginated Submissions API module's ID in the **Data Source URL** field.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets-Paginated_Dashboard_Plugin.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)
4. Click **Save**.
5. **Save** your module.

### Adding Your Fields to the ViewGrid

Now, you'll update the ViewGrid component so that the dashboard shows the columns you want to display. This is also where you can personalize the column headings for your dashboard.

1. Hover over the vgSubmissions **ViewGrid** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(32).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) (**Settings**) button.
3. In the **Display** table, update the **Heading** column's fields to what you want displayed on your dashboard in Express View.

> [!NOTE]
> Make sure the **Type** field is correct for each component. This is best practice when working with ViewGrids and helps with sorting. For example, you could pick from the following types: date, currency, number, or string.
4. Click **Save**.
5. **Save** your module.

### Updating the Submissions Per Page

You can easily update the number of submissions displayed per page. The snippet defaults to five. If you'd like to change that, do the following:

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

A 5-button toolbar appears 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(32).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) (**Settings**) button.
3. Enter your desired number of submissions per page under the **Enable server side pagination** setting.
4. Click **Save**.
5. **Save** your module.

## Removing the Snippet

What if you're no longer interested in using this snippet? No problem. We'll walk you through the quick steps to remove the snippet from your module. Then, you'll learn how to uninstall the snippet from your environment.

### Removing the Snippet from Your Module

Removing a snippet from your module is easy. To remove the Paginated Dashboard snippet:

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

A 5-button toolbar appears 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(23).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) (**Remove**) button.
3. **Save** your module.

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