Vega Table Component

Overview

The Vega Table component is a powerful tool that lets you gather, organize, and display data in your application. Using the Vega Table component, you can retrieve data and customize how it displays. You can also use Vega Table operations that give end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. the ability to dynamically modify the way they see your data.

IMPORTANT  To use the Vega Table component, you must enable Vega in your module. To learn more about enabling Vega, see the Adding a Vega Table Component section of this article.

Like the Panel or Field Group components, the Vega Table component acts as a grouping or storage component for fields (other components) configured inside it. Instead of creating self-contained pages or sections, the Vega Table uses the component fields to create table headers. You can add any Unqork component to your Vega Table, but each component behaves differently depending on the view settings of your Vega Table component.

Common ways you can use the Vega Table component include: 

• Collecting, editing, and displaying data from different sources on a single screen, such as a dashboard.

• Displaying dynamic data that end-users can manipulate using Vega Table Operations.

• Applying logic (rules, calculations, procedural operations, and so on) to multiple data records simultaneously.

TIP  To learn more about Vega Table operations, view our Vega Table Operations reference guide.

You can find the Vega Table component under the Display & Layout group to the left of the Module Builder.

What You'll Learn

After completing this article, you’ll know when to use a Vega Table component, how to configure its settings and operations, and how to use it in an Unqork application.

About the Configuration Window

TIP  To learn more about general component settings, view our General Component Settings article.

Display Panel

Label and View Mode Setting Description Label Text 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. View Type Displays Grid as a Spreadsheet or Form. NOTE  The View Type affects how component fields and their settings display in your Grid.

Default Display Options Setting Description Hide Label Hides the label in Express View. By default, the Hide Label toggle is set to (OFF). Disable User Input When set to (ON), end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, the Disable User Input toggle is set to (OFF). Hide Field Shows or hides the component from view. Setting the Hide Field toggle to (ON) hides the component in Express View. Setting the toggle to (OFF) shows the component. The component is always visible in the Module Builder. By default, the Hide Field toggle is set to (OFF). Read Only View When set to (ON), the component is display-only. If another component pushes content to the field, the end-user sees that content. Otherwise, end-users see the word None. By default, the Read Only View toggle is set to (OFF).

Actions Panel

Nested Data Structure

Setting	Description
Children	NOTE  This setting is still in development, but will allow you to easily create nested data in your table. Stay tuned for new developments and enhancements for this feature.
Label	Enter a component's Property ID to group data by that specific column header. After grouping, each section header in the table is collapsible and expandable.

Triggers

Setting	Description
When...	Select an action that, when it takes place, triggers another component selected using the Then... setting. Actions include: Row Is Added Row Is Deleted Row Is Saved Row Is Edited
Then...	When the action selected in the When... setting occurs, the component entered in this field triggers.

Data Panel

Initial Values

After adding components to the Vega Table component, the Initial Values table displays the fields as column headers. You can then enter and/or edit table values in each cell. You can also output values from other components, like a Plug-In component, to existing Vega Table fields. To customize the table columns or rows, use the Table Column and Table Row Settings.

Setting	Description
Table Column Settings	Hover over the column header and select the  (ellipsis) to open the Table Column Settings drop-down menu. From the column settings drop-down menu, select one of the following options: Copy column Cut column Paste column Clear Data Delete column
Table Row Settings	Hover over the column header and select the  (ellipsis) to open the Table Column Settings drop-down menu. From the row settings drop-down menu, select one of the following options: Copy row Cut row Paste row Insert row above Insert row below Clear Data  Delete column
(Add New Row)	Add a new row to all Table column fields. NOTE  Rows that contain no data in any column field do not display in Express View.
Store Data in Database	The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios: Navigating between Panels in a Navigation component. On navigation between pages (Panels), the component’s value saves to the database. Triggering a module save event using a Button component with an Action Type of Save. Navigating between screens of a workflow. On navigation between screens, the component’s value saves to the database. NOTE  By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to (OFF) when you don’t want to store the values from this field in the database. NOTE  When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. To learn more about Store Data in Database in the context of API modules, see the panelResponse Panel section of the API Specification Snippet article in our In-Product Help. TIP  Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked.
Add Row on Initialization	Adds one blank row if the Table contains no data entries on initialization. If the Table contains data entries, the row won't be added.

Validation Panel

User Input

Setting	Description
Required	When set to (ON), the end user must enter a value in the component's visible fields. Set the toggle to (OFF) when an entry is optional. By default, the Required toggle is set to (OFF).
Required Error Message	A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field.

Advanced Panel

Additional Styling

Setting	Description
Custom CSS Class	Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name.

Adding a Vega Table Component

In this example, use the Vega Table component to display a Market Summary spreadsheet for vehicle insurance. The Vega Table will include the insurance carrier, type, premium amount in USD, and the market status. Then add sorting and filter Vega Table operations that allow end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. to modify the grid view.

What You Need

Before starting this configuration, you'll need the following:

• A Workspace.

• An Unqork application.  

• A module with a title.

Accessing Vega

Currently, the Vega Table component is only available in the Vega runtime engine. To use the Vega runtime in your module:

1.

Open your workspace.

2.

Select your application.

3.

Open your application module.

4.

At the top of the Module Builder, select the version drop-down. By default, it's set to Runtime v1.0.0 .

5.

From the version drop-down, select Runtime v2.0.0 .

Configure the Text Field Components

You must start with the fields you want for your Vega Table. For this example, you'll add Text Field components to act as the Vega Table component's fields.

1.

Drag and drop four  Text Field components onto your canvas.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter the following:

3.

Save & Close each component as you add it.

Configure the Vega Table Component

Next, add your Vega Table component to use your Text Field components as table columns.

1.

Drag and drop a Vega Table component onto your canvas, placing it above your  Text Field components.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter tableInsurance.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Market Summary.

4.

Set the Read Only View toggle to (ON).

5.

Click Save & Close.

6.

Drag and drop the carrier, type, premium, and status  Text Field components inside the tableInsurance  Vega Table component.

7.

Hover over the tableInsurance Vega Table component and click the (Settings) button from the component toolbar.

8.

In the Initial Values table, enter the following values:

Carrier (carrier) Type (type) Premium (premium) Status (status) 1 Unqork Auto Motorcycle $10,000 Not Taken Up 2 State Farm Auto $20,000 Submitted 3 Nationwide RV $50,000 Not Taken Up 4 American Family Boat $25,000 Indication 5 Geico Auto $25,000 Submitted 6 Unqork Auto Auto $30,000 Submitted 7 Nationwide RV $60,000 Indication 8 Geico Auto $12,000 Not Taken Up 9 State Farm Motorcycle $5,000 Not Taken Up 10 American Family Boat $30,000 Submitted

9.

Click Save & Close.

Configure the colFilter Columns Component

Add a Columns component to organize the Vega Table operations that filter specific columns and cells in your table.

1.

Drag and drop a Columns component onto your canvas, placing it above your tableInsurance Vega Table component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter colFilter.

3.

Under Formatting, click (three columns).

4.

Click Save & Close.

Configure the initFilterGlobal Initializer Component

Next, you'll set up a global filter Vega Table operation that lets you filter the table by the Unqork Auto insurance carrier. This operation has the following syntax: TABLE_SET_GLOBAL_FILTER.

1.

Drag and drop an  Initializer component onto your canvas, placing it in the far-left column of the colFilter  Columns component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initFilterGlobal.

3.

In the Outputs table, enter the following:

4.

Click Save & Close.

Configure the btnFilterGlobal Button Component

In the same column of the colFilter  Columns component, you'll add a Button component to trigger the initFilterGlobal  Initializer component.

1.

Drag and drop a Button component onto your canvas, placing it in the far-left column of the colFilter  Columns component and above your initFilterGlobal   Initializer component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnFilterGlobal.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Global Filter By Unqork Auto.

4.

Set the Action Type The action performed by the button when selected. to Event.

5.

In the On Click field, enter or select initFilterGlobal.

6.

Click Save & Close.

Configure the initFilterSubmitted Initializer Component

Next, you'll set up a filter Vega Table operation that lets you filter the table by the Status column and one of its values. For this example, you'll have it filter for all Submitted statuses. This operation has the following syntax: TABLE_SET_COLUMN_FILTER.

1.

Drag and drop an  Initializer component onto your canvas, placing it in the far-right column of the colFilter  Columns component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initFilterSubmitted.

3.

In the Outputs table, enter the following:

4.

Click Save & Close.

Configure the btnFilterSubmitted Button Component

In the same column of the colFilter  Columns component, you'll add a Button component to trigger the initFilterSubmitted  Initializer component.

1.

Drag and drop a Button component onto your canvas, placing it in the far-right column of the colFilter  Columns component and above your initFilterSubmitted   Initializer component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnFilterSubmitted.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Filter By Submitted.

4.

Set the Action Type The action performed by the button when selected. to Event.

5.

In the On Click field, enter or select initFilterSubmitted.

6.

Click Save & Close.

Configure the colAddRow Columns Component

Let's add one more Columns component to organize the Vega Table operation that lets you add a new row to the bottom of the table.

1.

Drag and drop a Columns component onto your canvas, placing it below your tableInsurance Vega Table component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter colAddRow.

3.

Click Save & Close.

Configure the initAddRow Initializer Component

Configure an add row Vega Table operation to add a new, empty row to the bottom of the table. This operation has the following syntax: TABLE_ADD_ROW.

1.

Drag and drop an  Initializer component onto your canvas, placing it in the left column of the colAddRow  Columns component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. fields, enter initAddRow.

3.

In the Outputs table, enter the following:

4.

Click Save & Close.

Configure the btnAddRow Button Component

Lastly, you'll add a Button component to trigger the initAddRow  Initializer component.

1.

Drag and drop a Button component onto your canvas, placing it in the left column of the colAddRow  Columns component and above your initAddRow   Initializer component.

2.

In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnAddRow.

3.

In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Add Row.

4.

Set the Action Type The action performed by the button when selected. to Event.

5.

In the On Click field, enter or select initAddRow.

6.

Click Save & Close.

7.

Save your module.

Here's how the completed module looks in the Module Builder:

Preview your module in Express View Express View is how your end-user views you application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. to test out your Vega Table operations.

Resources

• Modify the Vega Table component using the toolbar settings.

• Vega Table Operations

• Additional Display and Layout Components