Table Component

Overview

The Table component is a Centauri (1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. component that organizes components into rows and columns for efficient readability. The Table component is similar to the  Columns component. But, the Columns component can only organize components in vertical groups. The Table component aligns components both vertically and horizontally.

You can use the Table component in the following ways:

• 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.

About the Configuration Window

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Adding a Table Component

In this example, you'll configure a Table component in a module and display a short survey about an end-user's 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. experience with an application.

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

Configure the Table Component

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

1.

In the Module Builder, drag and drop a 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 and Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter tableSurvey.

3.

In the Set Number of Rows field, enter 2.

4.

Set Display Bordered Cells to  (ON).

5.

Set Display Alternating Colored Rows to  (ON).

6.

Set Highlight Row on Hover to  (ON).

7.

Click Save Component.

Configure the HTML Element Components

Place the first HTML Element component above the tableSurveyTable component to provide the end-user 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. with instructions about the survey. Then, configure two more HTML Element component inside the Table component to display text the end-user can either agree or disagree with.

Configure the First HTML Element Component

1.

Drag and drop an  HTML Element component onto your canvas, placing it above the tableSurvey 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 htmlSurvey.

3.

In the Content component field, enter Please rate your experience in using the application.

4.

In the Tag field, enter h3.

5.

Click Save Componente.

Configure the Second HTML Element Component

1.

Drag and drop an  HTML Element component onto your canvas, placing it in the top-left cell of the tableSurvey 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 htmlEasy.

3.

In the Content field, enter The application was easy to use.

4.

Click Save Component.

Configure the Third HTML Element Component

1.

Drag and drop an  HTML Element component onto your canvas, placing it in the bottom-left cell of the tableSurvey 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 htmlHelpful.

3.

In the Content field, enter I found the documentation thorough and helpful.

4.

Click Save Component.

After adding the Table and HTML Element components, your canvas looks like the following in the Module Builder:

Configure the Radio Buttons Components

Configure two Radio Buttons components for the end-user 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 rate their experience. Apart from their Property IDs, all other settings are the same.

1.

Drag and drop two Radio Buttons components onto your canvas, placing them in the top and bottom rows of the tableSurvey Table component's middle column.

2.

Complete 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:

3.

Navigate to each component's Data settings.

4.

In the Values table of each component, enter the following:

5.

Navigate to each component's Validation settings.

6.

Set Required to  (ON).

7.

Click Save Component for each component as you complete it.

Configure the Text Area Components

Lastly, configure 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, placing them in separate cells of the right-most tableSurvey Table component column.

2.

Complete 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:

3.

Click Save Component for each component as you add it.

4.

Save your module

Preview your module in Express View Express View is how your end-user views your 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.. Here's how your module displays:

Overview

The Table component is a Centauri (1.0) The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. component that organizes components into rows and columns for efficient readability. The Table component is similar to the  Columns component. But, the Columns component can only organize components in vertical groups. The Table component aligns components both vertically and horizontally.

You can use the Table component in the following ways:

• 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.

About the Configuration Window

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Adding a Table Component

In this example, you'll configure a Table component in a module and display a short survey about an end-user's 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. experience with an application.

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

Configure the Table Component

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

1.

In the Module Builder, drag and drop a 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  (ON).

5.

Set Display Alternating Colored Rows to  (ON).

6.

Set Highlight Row on Hover to  (ON).

7.

Click Save & Close.

Configure the HTML Element Components

Place the first HTML Element component above the tableSurveyTable component to provide the end-user 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. with instructions about the survey. Then, configure two more HTML Element component inside the Table component to display text the end-user can either agree or disagree with.

Configure the First HTML Element Component

1.

Drag and drop an  HTML Element component onto your canvas, placing it above the tableSurvey 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.

5.

Click Save & Close.

Configure the Second HTML Element Component

1.

Drag and drop an  HTML Element component onto your canvas, placing it in the top-left cell of the tableSurvey 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  HTML Element component onto your canvas, placing it in the bottom-left cell of the tableSurvey 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 htmlHelpful.

3.

In the Content field, enter I found the documentation thorough and helpful.

4.

Click Save & Close.

After adding the Table and three  HTML Element components, your canvas looks like the following in Express View Express View is how your end-user views your 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.:

Configure the Radio Buttons Components

Configure two Radio Buttons components for the end-user 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 rate their experience. Apart from their Property IDs, all other settings are the same.

1.

Drag and drop two Radio Buttons components onto your canvas. Place these Radio components in the top and bottom rows of the tableSurvey Table component's middle column.

2.

Complete 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:

3.

From the component's configuration window, select Data.

4.

In the Values table of each component, enter the following:

5.

From the component's configuration window, select Validation.

6.

Set Required to  (ON).

7.

Save & Close each component as you complete it.

Configure the Text Area Components

Lastly, configure 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 Table component column.

2.

Complete 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:

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 your 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.. Here's how your module displays: