HTML Table Operator

Overview

The HTML Table operator converts a data table into an HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. format. You'll use this operator when you want to display a clean, simple HTML version of your data. Additionally, this operator lets Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. customize the appearance of the table in the following ways:

• Striped: Alternating row colors for readability.

• Bordered: Adds borders around the table and cells.

• Hoverable: Highlights rows when the user hovers over them.

• Condensed: Creates a more compact table layout.

Creators can also use the argument port to create and apply their own CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. custom classes.

The HTML Table operator is located under the Table group to the left of the Data Workflow canvas.

About the Info Window

Learn more about each setting in the HTML Table operator's Info window:

Info
Category	Grayed out and non-adjustable setting indicating the operation type.
Label	Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows.
Preserve Argument Type	When selected, this setting ensures the argument data type is respected when the operator executes.
Striped	Sets the HTML table class as striped. The resulting table has alternating color rows.
Bordered	Sets the HTML table class as border. The resulting table has an exterior border.
Hover	Sets the HTML table class as hoverable. The rows in the resulting table change color when hovered over.
Condensed	Sets the HTML table class as condensed. The resulting table shows in a smaller format.
Custom Class	Lets you set a custom HTML class for your table. You can also set a custom class using an argument by connecting an Input operator to the HTML Table operator's argument port. Then, entering _arg in this field.

Adding an HTML Table Operator

For this example, configure a Data Workflow component to retrieve data from a Data Table component. Use the HTML Table operator to convert the data to HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. data. Then, send the HTML data to an HTML Element component to display it in the browser.

Configure the Data Table Component

First, configure a Data Table component to store sample data.

1.

In the Module Builder, drag and drop a Data 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 dtDogs.

3.

In the data table, enter the following:

4.

Click Save Component.

Configure the HTML Element Component

Configure an HTML Element component to receive the HTML table data from the Data Workflow.

1.

Drag and drop a  HTML Element component onto your canvas, placing it below the dtDogs Data 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 htmlExportTable .

3.

Click Save Component.

Configure the Data Workflow Component

Configure a Data Workflow component to retrieve the dtDogs Data Table component data and convert it into HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. data. Then, configure the output to send the data to the htmlExportTable HTML Element component. You'll also configure a Console operator to view how the data passes through the Data Workflow in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

1.

Drag and drop a Data Workflow onto your canvas, placing it below the htmlExportTable  HTML Element 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 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 dwfExportTable.

Configure the Input Operator

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

Configure the HTML Table Operator

1.

Drag and drop an HTML Table operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

3.

Connect the output port (right) of the dtDogs Input operator to the input port (left) of the Convert Table of Dogs HTML Table operator.

Configure the Output Operator

Next, output the HTML table data to htmlExportTable  HTML Element component.

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

3.

Connect the output port (right) of the Convert Table of DogsHTML Table operator to the input port (left) of the htmlExportTableOutput operator.

Configure the Console Operator

Add a Console operator as an output to the HTML Table operator so you can review the results in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

1.

Drag and drop a Console operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

3.

Connect the output port (right) of the Convert Table of Dogs HTML Table operator to the input port (left) of the HTML Console Console operator.

4.

Click Save Component.

Here's how the completed Data Workflow looks:

Configure the Button Component

Lastly, configure a Button component to trigger the Data Workflow 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..

1.

Drag and drop a Button component onto your canvas, placing it below the htmlExportTable HTML Element 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 btnShowTable.

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 Show Table.

4.

From the Action Type drop-down, select Event.

5.

From the On Click drop-down, select dwfExportTable.

6.

Click Save Component.

7.

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. and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Then, click Show Table to display the data.

Overview

The HTML Table operator converts a data table into an HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. format. You'll use this operator when you want to display a clean, simple HTML version of your data. Additionally, this operator lets Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. customize the appearance of the table in the following ways:

• Striped: Alternating row colors for readability.

• Bordered: Adds borders around the table and cells.

• Hoverable: Highlights rows when the user hovers over them.

• Condensed: Creates a more compact table layout.

Creators can also use the argument port to create and apply their own CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. custom classes.

The HTML Table operator is located under the Table group to the left of the Data Workflow canvas.

About the Info Window

Learn more about each setting in the HTML Table operator's Info window:

Setting	Description
Category	Grayed out and non-adjustable setting indicating the operation type.
Label	Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows.
Preserve Argument Type	When selected, this setting ensures the argument data type is respected when the operator executes.
Striped	Sets the HTML table class as striped. The resulting table has alternating color rows.
Bordered	Sets the HTML table class as border. The resulting table has an exterior border.
Hover	Sets the HTML table class as hoverable. The rows in the resulting table change color when hovered over.
Condensed	Sets the HTML table class as condensed. The resulting table shows in a smaller format.
Custom Class	Lets you set a custom HTML class for your table. You can also set a custom class using an argument by connecting an Input operator to the HTML Table operator's argument port. Then, entering _arg in this field.

Adding an HTML Table Operator

For this example, configure a Data Workflow component to retrieve data from a Data Table component. Use the HTML Table operator to convert the data to HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. data. Then, send the HTML data to an HTML Element component to display it in the browser.

Configure the Data Table Component

First, configure a Data Table component to store sample data.

1.

In the Module Builder, drag and drop a Data 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 dtDogs.

3.

In the data table, enter the following:

4.

Click Save.

Configure the HTML Element Component

Configure an HTML Element component to receive HTML table data from the Data Workflow.

1.

Drag and drop a  HTML Element component onto your canvas, placing it below the dtDogs Data 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 htmlExportTable.

3.

Click Save.

Configure the Data Workflow Component

Configure a Data Workflow component to retrieve the dtDogs Data Table component data and convert it into HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. data. Then, configure the output to send the data to the htmlExportTable HTML Element component. You'll also configure a Console operator to view how the data passes through the Data Workflow in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

1.

Drag and drop a Data Workflow onto your canvas, placing it below the htmlExportTable  HTML Element component.

2.

In the Canvas Label Text and Property Name fields, enter dwfExportTable.

Configure the Input Operator

1.

Drag and drop an Input operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

Configure the HTML Table Operator

1.

Drag and drop an HTML Table operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

3.

Connect the output port (right) of the dtDogs Input operator to the input port (left) of the Convert Table of Dogs HTML Table operator.

Configure the Output Operator

Next, output the HTML table data to htmlExportTable  HTML Element component.

1.

Drag and drop an Output operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

3.

Connect the output port (right) of the Convert Table of DogsHTML Table operator to the input port (left) of the htmlExportTableOutput operator.

Configure the Console Operator

Add a Console operator as an output to the HTML Table operator so you can review the results in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software..

1.

Drag and drop a Console operator onto your Data Workflow canvas.

2.

Configure the operator's Info window as follows:

3.

Connect the output port (right) of the Convert Table of Dogs HTML Table operator to the input port (left) of the HTML Console Console operator.

4.

Click Save.

Here's how the completed Data Workflow looks:

Configure the Button Component

Lastly, configure a Button component to trigger the Data Workflow 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..

1.

Drag and drop a Button component onto your canvas, placing it below the htmlExportTable HTML Element 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 btnShowTable.

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 Show Table.

4.

Set the Action Type as Event.

5.

From the On Click drop-down, select dwfExportTable.

6.

Click Save & Close.

7.

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. and open the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.. Then, click Show Table to display the data.