HTML Table Operator

The HTML Table operator lets you create an HTML version of a data table. This is useful if you want to display a simple HTML version of your data. You can also customize the appearance of your final table directly in the operator's Info window. Here, you'll find options to set the HTML class of your table. You can set the table as striped, bordered, hoverable, or condensed. You can also set a custom class using the argument port of the HTML Table operator.

To show your HTML table in Express View, you'll use a Content component to reference your final data. And to go a step further, once you've created your HTML table, you can then download it in an Excel format.

You’ll find the HTML Table operator under the Table group at the left of the Data Workflow canvas.

What You'll Learn

In this article, you'll learn:

• About the HTML Table operator's settings.

• How to add and configure an HTML Table operator.

• How to modify an HTML Table operator's settings.

• How to copy an HTML Table operator.

• How to remove an HTML Table operator.

About the Info Window

Here's what the HTML Table operator looks like, along with its Info window:

And here's a breakdown of each setting in the 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.
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. To do that, connect an Input operator to the HTML Table operator's argument port. Then, enter _arg in this field.

Adding an HTML Table Operator

To show the HTML Table operator in action, let's look at an example. You'll set up a Data Table component with some sample data. Then, you'll use a Data Workflow and Content component to show the table and download it as an Excel file.

Here's how the completed use case will look in the Module Builder:

Here's how the completed use case will look in Express View along with a look at the DevTools Console:

What You'll Need

To set up this use case, you’ll need:

• 1 Data Table component

• 1 Hidden component

• 1 Content component

• 1 Button component

• 1 Initializer component

• 1 Data Workflow component

To set up your Data Workflow, you'll need:

• 1 Input operator

• 1 HTML Table operator

• 1 Output operator

• 1 Console operator

These instructions assume you have a new module open, saved with a title.

Configure the Data Table Component

First, you'll add a Data Table component to hold your sample data.

1.

In the Module Builder, drag and drop a Data Table component onto your canvas.

2.

Enter dtDogs in the Label and Property Name fields.

3.

In the data table, enter the following:

4.

Click Save.

Configure the Hidden Component

Before you can configure your Data Workflow, you'll need a place to store your output. You'll use a Hidden component for that.

1.

Drag and drop a Hidden component onto your canvas. Place your Hidden component below your Data Table.

2.

Enter tableOutput in the Property ID and Canvas Label Text fields.

3.

Click Save.

Configure the Data Workflow Component

Now let's add your Data Workflow. Here, you'll use an Input operator to reference your Data table. Then, you'll add an HTML Table operator to handle the conversion. From there, you'll send the converted table to your Hidden component using an Output operator. You'll also include a Console operator to see what's happening behind the scenes.

1.

Drag and drop a Data Workflow component onto your canvas. Place your Data Workflow below your Hidden component.

2.

Enter dwfExportTable in the Canvas Label Text and Property Name fields.

Configure the Input Operator

1.

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

2.

Configure the Input 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 HTML Table operator's Info window as follows:

3.

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

Configure the Output Operator

1.

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

2.

Configure the Output operator's Info window as follows:

3.

Connect the output port (right) of the HTML Table operator to the input port (left) of the Output operator.

Configure the Console Operator

1.

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

2.

Configure the Console operator's Info window as follows:

3.

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

4.

Click Save.

Configure the Content Component

Now let's add a way to display the HTML version of your table. You'll set up a Content component to show your table using some simple HTML. To reference the data in your Hidden component, you'll use this basic line of HTML: <span ng-bind-html="data.tableOutput"></span>. Here, you'll also set your Content component to download the table in an Excel file format.

1.

Drag and drop a Content component onto your canvas. Place your Content component below your Data Workflow.

2.

Enter contentExportTable in the Property ID and Canvas Label Text fields.

3.

Set the Include Excel Download Link toggle to ON.

4.

Click Save.

5.

Enter <span ng-bind-html="data.tableOutput"></span> in the Content component field.

Configure the Initializer Component

To trigger your Content component, you'll use an Initializer. The Initializer watches your Hidden component to see when it holds data. Once your Hidden component receives data from your Data Workflow, the Initializer triggers your Content component. This is what causes your HTML table to show to your end-user.

1.

Drag and drop an Initializer component onto your canvas. Place your Initializer above your Data Table.

2.

Enter initExportExcel in the Property ID and Canvas Label Text fields.

3.

Select Watch as the Trigger Type.

4.

In the Inputs table, enter the following:

5.

In the Outputs table, enter the following:

6.

Click Save.

Configure the Button Component

Finally, let's add a button to trigger your Data Workflow.

1.

Drag and drop a Button component onto your canvas. Place your button below your Content component.

2.

Enter btnExport in the Property ID field.

3.

Enter Show and Download Table in the Label Text field.

4.

Select Event as the Action Type.

5.

Enter dwfExportTable in the Trigger on Click field.

6.

Click Save.

7.

Save your module.

Now it's time to test your Data Workflow. Open your module in Express View and click the Export to Excel button. Your table will download to your computer. You can also open the DevTools Console to watch the Data Workflow convert your table to HTML in real time.

Changing an HTML Table Operator's Settings

You can revisit and make changes to this operator.

1.

Click the dwfValueData Workflow component.

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

2.

Click the (Settings) button to open the Data Workflow canvas.

3.

Click the operator to open its Info Window.

4.

Make changes to the operator's settings as needed.

5.

Click Save Component.

6.

Save your module.

Copying an HTML Table Operator

You can make a copy of your operator using familiar keyboard settings. You can copy and paste an exact copy of your operator, matching all settings.

1.

Hover over the dwfValueData Workflow component.

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

2.

Click the (Settings) button to open the Data Workflow canvas.

3.

Click the operator you want to duplicate.

4.

On your keyboard, press Command + C (Mac OS) or Ctrl + C (Windows/Linux) to copy the operator.

5.

On your keyboard, press Command + V (Mac OS) or Ctrl + V (Windows/Linux) to paste the copied operator(s) to the Data Workflow canvas.

6.

Click Save Component

7.

Save your module.

Did you know you can copy an operator and paste it into a different Data Workflow? You'll use the same steps outlined above.

Removing an HTML Table Operator

Lastly, you can delete this operator from your Data Workflow canvas. You can also use these same steps to delete a connection between two operators.

1.

Hover over the dwfValueData Workflow component.

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

2.

Click the (Settings) button to open the Data Workflow canvas.

3.

Click the operator you want to delete.

4.

On your keyboard, press Delete.

5.

Click Save Component.

6.

Save your module.

Lab

You can view this complete use case here: https://training.unqork.io/#/form/60353f563f8e213c6ee48c10/edit.