---
title: "Dynamic View Grid Snippet"
slug: "dynamic-view-grid-snippet"
updated: 2025-09-26T01:47:11Z
published: 2025-09-26T01:47:11Z
canonical: "docs.unqork.io/dynamic-view-grid-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.

# Dynamic View Grid Snippet

## Overview

The Dynamic View Grid snippet gives you the framework to add and store information to a ViewGrid. Essentially, you’ll have the same functionality as an Advanced DataGrid without the pop-up. Once you’ve configured the snippet, your end-users can add new data in Express View. Or your end-users can change or delete any of their stored data as needed.

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

And here's an example of a customized Dynamic View Grid snippet in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Snippets-Dynamic_View_Grid01.gif?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%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 **Marketplace** at the top right of the Unqork Designer Platform.

> [!NOTE]
> You can also access the Marketplace at any time by visiting [https://marketplace.unqork.io](https://marketplace.unqork.io/#/).
2. Enter Dynamic View Grid in the **Search the Marketplace** field.
3. Click on the **Dynamic View Grid** tile.
4. Click **Install to Environment**.
5. 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

So, you installed the Dynamic View Grid snippet to your environment. Now what? Now you can drag and drop the snippet right into your module:

1. In the left sidebar of the Module Builder, click the **Snippet****s** button.
2. Enter Dynamic View Grid in the search bar.
3. Drag and drop the **Dynamic View Grid** 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. The snippet comes standard with 3 placeholder Text Fields: Field A, Field B, and Field C. The initSnippetOnLoad Initializer triggers the calcRequiredFieldsCheck Calculator. As it stands, the first Text Field in this snippet is a required field. The Calculator component works with the ruleRequiredFieldsCheck Decisions component. Your end-user can only add an entry after completing the first Text Field.

The initResetInputs Initializer clears and resets the entry fields after your end-user adds an entry to the ViewGrid. The ruleButtonHandler Decisions component looks for a button-click event. The Decisions component triggers a Data Workflow based on the action your end-user takes. Lastly, there's a ViewGrid component called **Your Entries**. This is where you set up how your dashboard looks in Express View.

## Setting Up the Snippet

In this section, we'll cover how to set up the Dynamic View Grid snippet. Through these steps, you'll also learn some ways you can further customize your snippet. While the Dynamic View Grid snippet works right off the shelf, it comes with placeholder fields. You'll want to change these fields to fit your needs. Below, we cover the steps that make this happen.

> [!NOTE]
> We'll walk you through the steps to change the placeholder fields to Applicant Name, Current Job Title, and Account Type Requested. Of course, you can change these to whatever works for you.

### Updating the Text Fields

The snippet comes standard with 3 placeholder Text Fields: Field A, Field B, and Field C. You'll want to update these to something that fits your specific use case. To follow along with our example use case, these steps update the fields to Applicant Name, Current Job Title, and Account Type Requested.

To update each Text Field component:

1. Hover over the **Text Field** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.

A 5-button toolbar appears above the component on hover-over.
3. Update the Property ID and Canvas Label Text as follows for the 3 Text Field components:

| Property ID | Canvas Label Text |
| --- | --- |
| name | Applicant Name |
| jobTitle | Current Job Title |
| accountType | Account Type Requested |
4. Click **Save** in each component after you update it.
5. **Save** your module.

### Updating the Calculator Component

As it stands, the first Text Field in this snippet is a required field. The Calculator component ensures your end-user can only add an entry if they've completed the first Text Field.

To update the Calculator component:

1. Hover over the calcRequiredFieldsCheck **Calculator** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.
3. Update the **Inputs** table as follows:

| Property ID | Alias | Required |
| --- | --- | --- |
| name | A | No (unchecked) |

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

### Updating the initResetInputs Initializer Component

The initResetInputs Initializer resets the entry fields when your end-user adds a row to the ViewGrid.

To update the Initializer component:

1. Hover over the initResetInputs **Initializer** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.
3. Update the **Outputs** table with the updated Property IDs of your Text Fields as follows:

| Property ID | Type | Value |
| --- | --- | --- |
| name | multi | clear,reset |
| jobTitle | multi | clear,reset |
| accountType | multi | clear,reset |
| vgIndex | multi | clear,reset |

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

### Updating the Data Table Component

Next, you'll make a few quick changes to your Data Table.

1. Hover over the dtBindedDynamicInputs **Data Table** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.
3. In the **Data Table** table, update columns A, B, and C to match the updated Property IDs of your Text Field components. To follow along with our use case, update as follows:

| name | jobTitle | accountType |
| --- | --- | --- |
| =name | =jobTitle | =accountType |

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

### Updating the dwfEditPull Data Workflow Component

This update takes place in 6 operators. Here's how your dwfEditPull Data Workflow will look after the updates:

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

#### Updating the Get Operators

The dwfEditPull Data Workflow has 3 Get operators. By default, these pull from the original placeholder Text Fields. So, you'll change each of them so they connect to your updated Text Fields.

1. Hover over the dwfEditPull **Data Workflow** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.
3. Click the **Get** operator that you want to update. Adjust the settings for each as follows:

| Category | Label | Path |
| --- | --- | --- |
| Get | Get Name | [0].name |
| Get | Get Job Title | [0].jobTitle |
| Get | Get Account Type | [0].accountType |
4. Click **Save**.

#### Updating the Output Operators

The 3 Output operators output to the snippet's placeholder Text Fields. A quick change to each Output operator will make your Data Workflow behave the way it should.

1. Hover over the dwfEditPull **Data Workflow** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.
3. Click the **Output** operator that you want to update. Adjust the settings for each as follows:

| Category | Component | Action |
| --- | --- | --- |
| Output | name | value |
| Output | jobTitle | [0].jobTitle |
| Output | accountType | [0].accountType |
4. Click **Save**.
5. **Save** your module.

### Updating the ViewGrid Component

Lastly, you'll update the ViewGrid component so that the dashboard displays with the updated fields. This is also where you can personalize the column headings for your dashboard.

1. Hover over the vgDynamicViewGrid **ViewGrid** component.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Settings(25).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%3D) (**Settings**) button.
3. In the **Display** table, update the ID and Heading columns to match your updated Text Field components. To follow along with our use case, update as follows:

| ID | Formula | Heading | Type |
| --- | --- | --- | --- |
| name |  | Applicant Name | string |
| jobTitle |  | Current Job Title | string |
| accountType |  | Account Type Requested | string |
| Edit |  | Edit |  |

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

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

Now, when you preview your module in Express View, you'll see the updated entry fields and ViewGrid.

## 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 Dynamic View Grid snippet:

1. In the Module Builder, hover over the **panelDynamicViewGrid** Panel.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppBuildButton_Remove(15).jpg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A19Z&se=2026-11-08T19%3A01%3A19Z&sr=c&sp=r&sig=3XYJ%2FdlGiXbMlJ6FPgwnbjthzS1naQsO89QQJyqTU3s%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.

## Lab

You'll find the completed lab for this use case here: [https://training.unqork.io/#/form/60d23337f32edc02e4375835/edit](https://training.unqork.io/#/form/60d23337f32edc02e4375835/edit).