Table Component

Estimated Reading Time:  8 minutes

Overview

The Table component organizes components into rows and columns for efficient readability. The Dropdown Component Icon Table component is similar to the Columns Component Icon Columns component. But, the Columns Component Icon Columns component can only organize components in vertical groups. The Dropdown Component Icon Table component aligns components both vertically and horizontally.

Use the Dropdown Component Icon Table component to:

  • Organize components into columns and rows.

  • Display components in a grid-like format.

You can find the Table component in 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 Table component and how to configure it in an Unqork application.

About the Configuration Window

General

A static image displaying the Table Component's General configuration settings.(click image to expand)

Setting

Description

Property ID

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

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and 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. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

Notes Note-Icon

Select this tab to display the component's Notes area. You can use notes to keep your teammates informed.

The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.

Display Icon Display

Select this tab to manage your component's display settings.

Permissions Icon Permissions

Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component.

Field Tag Icon 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.

Shortcuts Icon Shortcuts

Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:

  • Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal.

  • Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal.

  • Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom.

  • Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top.

  • Enter (Return): When tabbing to a Tooltip Icon (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.

Additional keyboard shortcuts:

  • Drop-down menus: When you Tab to a settings drop-down, use the keyboard's Up-Arrow Icon (up)/ Down-Arrow icon (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.

Documentation IconDocumentation

Select this tab to access the component documentation in Unqork's In-Product Help.

Cancel

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

Save & Close

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

Display Panel

A static image displaying the Table component's Display settings.(click image to expand)

Setting

Description

Set Number of Rows

Sets the number of rows the table has. By default, the Table has three rows.

Set Number of Columns

Sets the number of columns the table has. By default, the Table has three columns.

Display Bordered Cells

When set to Toggle On Icon (ON), each cell in the table displays a gray border.

By default, this setting is Toggle Off icon (OFF).

Reduce Padding Between Rows

Padding sets the amount of space between the border of a table cell and its contents. When set to Toggle On Icon (ON), the table's padding lessens, bringing rows closer together.

By default, this setting is Toggle Off icon (OFF).

Display Alternating Colored Rows

When set to Toggle On Icon (ON), table rows alternate between gray and white backgrounds.

By default, this setting is Toggle Off icon (OFF).

Highlight Row on Hover

When set to Toggle On Icon (ON), individual rows highlight when you hover over them. Use this setting to display related components by row.

By default, this setting is Toggle Off icon (OFF).

Hide Field

When set to Toggle On Icon (ON), the table and all components inside the table become hidden from the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.. Use this setting rather than hiding each component.

By default, this setting is Toggle Off icon (OFF).

Adding a Table Component

For this example, you'll add a Dropdown Component Icon Table component to a module to display a short survey about an end-user's End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. experience with an application.

NOTE  These instructions assume that you have an open module saved with a title.

What You Need

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

Configure the Table Component

This component organizes the other components in your module into columns and rows. That way, your survey displays in a grid-like format.

1. In the Module Builder, drag and drop a Dropdown Component Icon Table component 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. field, enter tableSurvey.
3. In the Set Number of Rows field, enter 2.
4. Set Display Bordered Cells to Toggle On Icon (ON).
5. Set Display Alternating Colored Rows to Toggle On Icon (ON).
6. Set Highlight Row on Hover to Toggle On Icon (ON).

A static image displaying the Table component's Display settings.(click image to expand)

7. Click Save & Close.

Configure the HTML Element Components

You'll place the first  Columns Component Icon HTML Element component above the tableSurvey Dropdown Component Icon Table component to provide the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. with instructions about the survey. Use two more to display sentences the end-user can either agree or disagree with.

Configure the First HTML Element Component

1. Drag and drop an  Columns Component Icon HTML Element component onto your canvas, placing it above the tableSurvey Dropdown Component Icon 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. 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 htmlSurvey.
3. In the Tag field, enter h3.
4. In the Content component field, enter Please rate your experience in using the application.

A static image displaying the HTML Element's settings. The Tag and Content fields are highlighted and filled out.(click image to expand)

5. Click Save & Close.

Configure the Second HTML Element Component

1. Drag and drop an  Columns Component Icon HTML Element component onto your canvas, placing it in the top-left cell of the tableSurvey Dropdown Component Icon 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. 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 htmlEasy.
3. In the Content field, enter The application was easy to use.
4. Click Save & Close.

Configure the Third HTML Element Component

1. Drag and drop an  Columns Component Icon HTML Element component onto your canvas, placing it in the bottom-left cell of the tableSurvey Dropdown Component Icon 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. 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 htmlEasy.
3. In the Content field, enter I found the documentation thorough and helpful.
4. Click Save & Close.

After adding the Dropdown Component Icon Table and three  Columns Component Icon HTML Element components, your canvas looks like the following 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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View:

A static image displaying the Module Editor's Canvas. The Table component and three HTML components help shape how the survey will look.(click image to expand)

Configure the Radio Buttons Components

Add two Radio Buttons icon Radio Buttons components for the end-user End-Users are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. to rate their experience. Apart from their Property IDs, all other settings are the same.

1. Drag and drop two Radio Buttons icon Radio Buttons components onto your canvas. Place these Radio components in the top and bottom rows of the tableSurvey Dropdown Component Icon Table component's middle column.
2. Set 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 as follows:

Property ID

Label Text

radioEasy

Please select one:

radioHelpful

Please select one:
3. From the component's configuration window, select Data Icon Data.
4. In the Values table of each Radio Buttons icon Radio Buttons component, enter the following:
 

Option Label

Value to Store in Submission Data

1

Strongly Agree

stronglyAgree

2

Agree

agree

3

Neutral

neutral

4

Disagree

disagree

5

Strongly Disagree

stronglyDisagree

A static image displaying one of the Radio buttons component's configuration window. The Values table is displayed and the Option Label and Value to Store fields are filled out.(click image to expand)

5. From the component's configuration window, select Validation Icon Validation.
6. For both components, set Required to Toggle On Icon (ON).
7. Save & Close each component as you complete it.

Configure the Text Area Components

Lastly, add two  Text Area components to each cell in the far right column for the end-user to add comments. Apart from their Property IDs, all other settings are the same.

1. Drag and drop two  Text Area components onto your canvas. Place the Text Area components in separate cells of the rightmost tableSurvey Dropdown Component Icon Table component column.
2. Set 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 as follows:

Property ID

Label Text

commentEasy

Additional Comments

commentHelpful

Additional Comments
3. Save & Close each component as you add it.
4. Save your module

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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View. Here's how your module displays:

A static image displaying the module in Express View. The Table component sorts the other components into an orderly list of rows and columns.(click image to expand)

Resources