Advanced Datagrid Component

Overview

The Advanced Datagrid is another of Unqork's long-standing layout components. Like the Data Grid, the Advanced Datagrid helps you organize other components. But, unlike the Data Grid, the Advanced Datagrid displays them in a separate modal.

You can use an Advanced Datagrid to:

  • Display entries in a dashboard.

  • Collect detailed prescription medication information.

  • Collect beneficiary information, including percentage calculations.

When designing an Advanced Datagrid, you'll create headings for your end-user to see. In Express View, your end-users can add and store data in your grid. Your end-users can also edit and delete any stored data. All end-user edits take place in the modal instead of going through the module itself.

Other advantages of the Advanced Datagrid include:

  • The ability to build lists or combine other grids or tables into a single Advanced Datagrid.

  • Using reference keys to reference other tables or grids. Reference keys let you combine many types of information and layouts in your Advanced Datagrid.

You'll find the Advanced Datagrid in the Display & Layout group at the left of the Module Editor. Here's how an Advanced Datagrid looks in Express View:

What You'll Learn

In this article, you'll learn how to:

About the Configuration Window

General

Setting Description

Dataviewer

This tab shows the component's display, data, action, and validation-type settings.

Error Messages

This tab shows error message (Required Error) settings.

Custom CSS

This tab shows the following settings:

  • Custom CSS Class: Enter a Custom CSS Class to apply to your component.

  • Add Button Icon Class: Enter a Custom CSS Class to apply to your Add button.

  • Edit Button Icon Class: Enter a Custom CSS Class to apply to your Edit button.

If the field or element is part of a snippet or more than 1 module, using custom CSS keeps a consistent look and feel. When you update the CSS styling, it applies to all components that reference this custom class name.

Permissions Tab

Selecting this tab shows the component's RBAC (role-based access control) settings.

Save Button

Click this button to save all settings as configured and return to the canvas.

Cancel Button

Click this button to undo any unsaved configuration changes and return to the canvas.

Dataviewer Panel

Setting

Description

Label

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case.

Property Name

A Property Name (Property ID) is the unique field ID used by Unqork to track and link your module components.

The Property Name is how the software identifies your component. Using Property Names lets you link components, creating logic-based configurations and API (application programming interface) calls.

Property Names must use camel case (stylized as camelCase) without spaces or punctuation.

Data Reference Key

Enter the Property ID  of the component that you're pulling data from.

Yes/No Reference Key

This field is specific to components containing yes/no lists. Enter the Property ID (Property Name) of the component that you're pulling the data from.

Component Reference Key

Enter the Property ID (Property Name) of the Data Table component that you're pulling the data from. You'll notice that this field duplicates the functionality of the Data Reference Key field.

Modal Title

You can configure a pop-up that displays the loading progress of the Advanced Datagrid. This field lets you enter a title for the pop-up.

Modal Message

You can configure a pop-up that displays a submission's progress. By default, the message reads: "Loading please wait..."

OK Button

This button displays at the bottom left of your modal in Express View.

On button-press of the OK button, the pop-up closes. This field lets you choose the label text of the button.

By default, this button label text shows as OK.

Save Button

This button displays at the bottom left of your modal in Express View. On button-press, your updates store, and you'll return to the grid. This field lets you set the button label text for the button.

By default, this button label text shows as Save.

Cancel Button

This button displays at the bottom left of your modal in Express View. On button-press, your updates clear and you'll return to the grid. This field lets you set the button label text for the button.

By default, this button label text shows as Cancel.

Action

By default, the Advanced Datagrid has an Actions column in Express View. You can perform Actions on entries added to the table. This field lets you set the label text of the column.

By default, these actions are Edit and Delete.

Add Button

The Add button lets you add entries to your grid in Express View. This field lets you set the button label text for the button.

By default, this button label text shows as Add.

Edit Button

The Edit button displays at the right of your grid in Express View. On button-press, you can change or update your entries. This field lets you set the button label text for the button.

By default, the button label text shows as Edit.

Delete Button

This button displays at the right of your grid in Express View.

On button-press, you'll remove the entry associated with the button. This field lets you set the button label text for the button.

By default, the button label text shows as Delete.

View

When disabling a component, the View button lets your end-user see the entry but not edit it. This field lets you set the button label text for the button.

By default, the button label text shows as View.

When to reset the form

Choose when to restore the form to default values:

  • On Add: Restores the default values when a submission is added.

  • On Save: Restores the default values when a submission is saved.

This setting is optional.

Setting

Description

Error Title

When your end-user saves an invalid entry an error message shows. This field lets you set a title for that error message.

By default, the Error Title shows as: "Oops - {{ errors }} error(s) have been found!". {{ errors }} represents the count of errors returned.

Error Message

When your end-user saves an invalid entry an error message shows.

By default, the message reads: "Please check your module and fix fields outlined in red."

Delete Title

When deleting an entry in Express View, you can configure a pop-up to appear. This field lets you choose the title of the pop-up.

By default, the pop-up asks: "Are you sure you want to delete this item?"

Delete Text

When deleting an entry in Express View, you can configure a pop-up to display. This pop-up displays if you select the Confirm Deletion checkbox and try to delete an entry.

By default, the message reads: "Are you sure you want to delete this item?"

Confirm Deletion

When you select this checkbox, a pop-up displays if you try to delete an entry in Express View.

By default, this checkbox is clear.

Fullscreen

Sets your modal screen to expand to the entire width and height of the window.

By default, this checkbox is clear.

Required

When you select the Required checkbox, your end-user must enter a value into the field before they can save an entry. Clear the checkbox when an entry is optional.

By default, this checkbox is clear.

Draft Save

This checkbox gives you the option to save a draft. By default, this checkbox is clear.

Minimum Length

Sets the minimum number of rows to display in the grid inExpress View. When you reach this lower limit, the button disappears.

Maximum Length

Sets the maximum number of rows to display in the grid in Express View. When you reach this upper limit, the button disappears.

Disabled

Selecting the Disabled checkbox prevents end-users from interacting with or editing the input field in Express View. When your end-user hovers over the field, their cursor changes to alert them to the status change.

By default, this checkbox is clear.

Hidden

Selecting the Hidden checkbox hides the grid and all components from the end-user in Express View.

By default, this checkbox is clear.

Show Yes/No Instead of Delete/Edit

When selected, the grid shows Yes/No options instead of the default Delete/Edit buttons.

By default, this checkbox is clear.

Remember Scroll Position

Stores the page and vertical scroll position of your Advanced Datagrid. When selected, Unqork remembers the last place you scrolled to on your grid. When you return to the page, it directs you automatically to that position. This is helpful if you have a large grid and want to return to the same entries on your next visit.

By default, this checkbox is clear.

Show Select Option Instead of Add/Edit

When selected, this checkbox lets you display a Select option rather than Add/Edit buttons.

By default, this checkbox is selected.

Persistent

When you select the Persistent checkbox, data is stored each time the module executes.

By default, this checkbox is selected.

Hide Label

Selecting the Hide Label checkbox stops Label Text from displaying in Express View. Your Label Text still displays in Module Editor.

By default, this checkbox is clear.

Hide Table When Empty

This checkbox lets you hide your grid in Express View when there's no data in it.

By default, this checkbox is clear.

Filter Field

Enter the component containing a value that filters the list.

Filter Yes/No Component

When the Yes/No Reference Key contains a component Property ID (Property Name), you can use this field to filter the component’s yes/no list.

Setting

Description

New Row Trigger

Enter the Property ID (Property Name) of a component that, when triggered, creates a new grid row in Express View.

Edit Row Trigger

Enter the Property ID (Property Name) of a component that, when triggered, edits a grid row in Express View.

Display Inline Rows

The Advanced Datagrid defaults to a table style in the Express View. To set up data in an accordion, select this checkbox.

Default First Row to Open

Selecting this checkbox automatically opens the first row of the accordion in Express View.

By default, this checkbox is clear.

Show the Save Button in the Accordions

Selecting this checkbox displays a Save button in each row of your grid.

By default, this checkbox is clear.

Show a Modal for Confirmation of Save

After selecting this checkbox, a pop-up displays to confirm the saving of an entry in your grid.

By default, this checkbox is clear.

Message for Save Confirmation Alert

After selecting the Display Inline Rows checkbox, this checkbox creates a Save confirmation pop-up. This field lets you enter the text for that pop-up.

Title For Save Confirmation Alert

This checkbox lets you create a title for your save confirmation pop-up.

Save Event

This checkbox lets you create an event for your save confirmation pop-up.

Message While Saving

This field lets you enter a message that displays as an entry saves.

By default, the message reads: "Saving..."

Display

Setting

Description

ID

This field lets you map a component in your Advanced Datagrid. Enter the component's Property ID (Property Name) to display the component's data in your grid.

Heading

For each Property ID (Property Name) you enter in the ID fields, you can display a heading in Express View.

Yes/No Question Listing

Setting

Description

Code

Details coming soon!

Text

Details coming soon!

Required

When you select the Required checkbox, your end-user must enter a value into the field before they can save an entry. Clear the checkbox when an entry is optional.

By default, this checkbox is clear.

Tooltip

A short hint that displays when an end-user positions their cursor over the Questionmark Icon (Tooltip) icon. Tooltips can display across more than one line.

Subheader

Details coming soon!

Field Tags

Assign components one-word labels to help organize, identify, and group the components in your application.

Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API 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. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag.

Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component.

For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag.

Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.

Adding an Advanced Datagrid Component

In this example, you’ll set up an Advanced Datagrid with a couple of Text fields for data entry. In Express View, you can add, edit, or delete an application as needed. These instructions assume that you have an open module saved with a title.

For this module, you'll need the following components:

  • 1 Advanced Datagrid component

  • 2 Text Field components

  • 1 Email Component

  • 1 Phone Number component

Pre-Configure the Advanced Datagrid Component

In this step, you’ll create an Advanced Datagrid component to house your information fields.

1. In the Module Editor, drag and drop an Advanced Datagrid component onto your canvas.
2. Enter adgApplication in the Property Name and Label fields.
3. Enter Add Applicant in the Add Button field.

4. Click Save.

Configure the Text Field Components

Here you'll add and configure 2 Text Field components for your First Name and Last Name fields.

1. Drag and drop 2 Text Field components onto your Advanced Datagrid, positioning them one below the other.
2. Enter the Property ID and Label Text fields as follows:

Property ID

Label Text

firstName

First Name

lastName

Last Name
3. Click Save as you add each Text Field.

Configure the Email Component

Here you'll configure an Email component into your Advanced Datagrid.

1. Drag and drop an Email component onto your Advanced Datagrid, positioning it below your Text Field components.
2. Enter email in the Property ID and Label Text fields.
3. Click Save.

Configure the Phone Number Component

Here you'll configure a Phone Number component into your Advanced Datagrid.

1. Drag and drop a Phone Number component onto your Advanced Datagrid, positioning it below your Email component
2. Enter phoneNumber in the Property ID and Label Text fields.
3. Click Save.

Configure the Advanced Datagrid Component

Let’s revisit your Advanced Datagrid component so you can display your other components.

1. Hover over the Advanced Datagrid component.

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

2. Click the (Settings) button to open the Configuration window.
3. In the Display table, enter the following:
ID Heading

firstName

First Name

lastName

Last Name

email

Email

phoneNumber

Phone Number

4. Click Save.
5. Save your module.

In Express View, you can add information into the fields and click Save. Once you’ve populated some entries, you can even edit or delete them.

After adding some names and contact information, your Advanced Datagrid looks something like this:

Changing an Advanced Datagrid Component’s Settings

Let’s revisit and make changes to your saved component’s settings.

1. Hover over the Advanced Datagrid component.

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

2. Click the (Settings) button to open the Configuration window.
3. Make changes to the component’s settings as needed.
4. Click Save.
5. Save your module.

Moving an Advanced Datagrid Component

Let’s move your component to a new position in your module.

1. Hover over the Advanced Datagrid component.

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

2. Click and drag the (Move) button, dropping the component when it’s in position.
3. Save your module.

Copying an Advanced Datagrid Component

Let's make a copy of your component using the Copy and Paste tools. Copy and Paste creates an exact copy of your component, matching all settings. The only noticeable difference between the 2 components is the Property Name. The Property Name on the new component automatically updates. Remember, every component needs a unique Property Name. Property Names are the main method to track and connect components in Unqork.

1. Hover over the Advanced Datagrid component.

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

2. Click the (Copy) button.
3. Click the (Paste) button.
4. Update the copied component’s settings as needed.
5. Save your module.

Removing an Advanced Datagrid Component

Lastly, let’s delete your Advanced Datagrid component from your module.

1. Hover over the Advanced Datagrid component.

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

2. Click the (Remove) button.
3. Save your module.