HTML Table Operator

Overview

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 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. The label you enter here shows beneath your 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

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

name

breed

Ivy

Golden Retriever

Lucy

Golden Retriever

Wally

Hound

Nacho

Pug

Thor

Corgidor

Holly

Golden Retriever

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:

Setting

Value

Category

Input

Component

dtDogs

Required

Yes

Source

Default

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:

Setting

Value

Category

HTML Table

Label

Convert Table of Dogs

Striped

No

Bordered

No

Hover

No

Condensed

No

Custom Class

 
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:

Setting

Value

Category

Output

Component

tableOutput

Action

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

Setting

Value

Category

Console

Label

HTML Console
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.

NOTE  If you only want to view your table and not download it, leave the Include Excel Download Link toggle set to OFF. Similarly, if you only want to download your table and not show it in Express View, you can set the Hide Component 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:
Property ID Required

tableOutput

Yes (checked)
5. In the Outputs table, enter the following:
Property ID Type Value

contentExportTable

trigger

GO

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

TIP  You can copy more than one operator at a time. Hold Command or Ctrl on your keyboard and click all the operators you want to copy. Follow the rest of the steps as usual.

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.
7. Save your module.

TIP  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 Data 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.

NOTE  Once you delete this operator, make sure to connect your remaining operators. If your Data Workflow path doesn't end with an Output or Console operator, your Data Workflow won't work. So, once you delete an operator, make sure to update any remaining paths to end at an Output or Console operator.

5. Click Save.
6. Save your module.

Lab

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