Table

The Table portlet is used to display data in a table format. The portlet can be read only or editable, the data can be formatted per column as text, number, date etc, the data can be grouped, and exported to Excel (.xlsx).

General

General data is required for all portlets.

General configuration

Advanced settings

Exportable: enables a button to export the data as a Microsoft Excel File (.xlsx)

Render value as HTML: If the source data contains HTML tags the data be formatted accordingly

Draggable: Adds drag and drop possibility to the table. Table rows can be dragged to Gantt, Scheduler and Kanban using the drag-and-drop workflow configured in the receiving portlet.

Listeners

The portlet can listen to the following events:

  • On Row Selection

  • On Refresh

  • On Point Selection

  • On Filter

  • On Tree Node Selection

The portlet can send the following events:

  • On Row Selection

  • On Refresh

Listeners configuration

Data

Data source

The portlet data source configuration enables the portlet to execute specified queries towards the chosen database connector to fetch data, or fetch data from a workflow.

  • Database: uses a flow connector to retrieve data from a database

  • Workflow: runs a workflow to retrieve data

Data source configuration

Workflow source configuration

Data source columns

Copy from portlet: sets the default column size and order. To change the size of the columns, click and drag the column margin until the correct size is reached. To change the order of columns, drag and drop a column to a new location.

Manage: the columns can be configured in a grid view as well as the list view. This view can help for a better overview and quicker configuration when a lot of columns used.

Click Execute in the data source section to fetch the columns. Each column can be configured with:

  • display name

  • column type

  • whether the column should be visible

  • whether the column should be editable

  • if the text in the column should be wrapped

There are a number of column types to choose from. The default column type is text.

  • Text: use to display column as a text fields

  • Number: use for number fields where the number is an integer

  • Decimal: used for numbers with decimals

  • Date: will display the column as a date with no time

  • Date & Time: use to display date and time

  • Checkbox: the column field will be a checkbox The checkbox component only supports Boolean values.

  • List of Value: connect the column to a list of values, which will be a drop-down list in the column field. Click the Manage button to go to Manage lists of values. Follow the link below to read more about lists of values.

  • Link: will display the content as a clickable link

Default presentation

  • Wrap header: choose whether to have the header content wrap instead of being clipped if the text does not fit. Note - column text wrap is configured in Data source column on the individual columns

  • Unique row identifier column: If the table contains a column with a unique identifier for each row, it is possible to assign this here. This will allow the table to keep rows selected even after running a workflow or refreshing the data. Notice that Portal 2 will not check if the values are unique so it is the user's responsibility that the values are unique. (Released in version 2020.13.1 of Portal 2)

  • Sort by: choose whether sorting should be by a specific column and/or if sorting should be in ascending or descending order. Note that if a column is formatted as a number but the value coming from the database is not a number, the columns can be sorted as text.

  • Groupable: choose if the table content should be groupable by the users. It is also possible to set a default grouping for the content.

  • Rows per page: set the number of rows shown on each page, and use pagination to go to the next page. Note: if the portlet size is smaller than the number of rows to be shown, the portlet will get a scroll bar.

  • Copy cell sizes: choose to set the configured size of font and row size as default. To configure the font and row height, use the menu located in the bottom left corner of the table portlet. Once set, click the 'Copy cell sizes' to save the size as the default.

Edit operations

Edit operations are used to connect actions, such as creating, updating and deleting workflows through the portlet. The workflows can be either user or machine-type.

Tick allow selection of multiple rows to enable selection of more than one row in the table. Use the Shift key to select multiple rows.

Click the drop-down to select an existing workflow or New to create a new one. In Supported Actions, tick the actions the workflow is to perform: create, update, or delete.

The variables sent to the workflow needs to be specified in the start step:‌

  1. Table with table name specified in output.

  2. All columns to be specified as variables inside the table.

  3. Type variable which contains the action create, update and delete.

Click New to create a new workflow. A text box will pop up. Fill in the name of the workflow. Use Add, Map and Remove All to add the workflow input parameters.

  • Add: add a user-defined column

  • Map: adds all selected columns

  • Remove All: removes all columns

Interaction

Quick action

Quick action is a row-specific action available to the user by clicking the cogwheel in the first grid column. The row data is sent as in-parameters to the workflow and can be picked up in the start step (and thus used in the workflow).

The quick action workflow is added by selecting a workflow from the drop-down list.

Custom button

The custom button is used to enable access to workflows in the portlet. The button will be placed in the portlet header.

Click New to add a custom button. Enter the button name: this text will be displayed on the button in the portlet. Select the workflow which is to be connected to the custom button from the drop-down list.

Configure when the custom button should be enabled:

  • Always: the button is always available

    • if no rows are selected in the table, an empty data set is sent to the workflow

    • if one or more rows are selected, this data will be sent to the workflow

  • Condition: the button is enabled if the condition is true for ALL selected rows

    • the selected row data is sent to the workflow

Row color rules

Alternate row color sets every other row to a default light grey color in order to make the table row visualization better. The color can be configured by clicking on the color box and selecting a color.

The table rows can have one or more color rules. To enter a new rule:

  • click New

  • select a color

  • enter the condition field, operator and value

  • preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.

Style

In the style section for the table portlet, it's possible to change the header text color and add a header stripe. It is also possible to set up color rules for table rows and cells.

Row color rules

Alternate row color sets every other row to a default light grey color in order to make the table row visualization better. The color can be configured by clicking on the color box and selecting a color.

The table rows can have one or more color rules. To enter a new rule:

  • click New

  • select colors

  • enter the condition field, operator and value

  • preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.

Cell color rules

The table cells can have one or more color rules. To enter a new rule:

  • click New

  • select colors

  • enter the condition field, operator and value

  • preview the result or save

To edit an existing rule, click on the rule and it expands into edit mode.

More about style configuration below.

Style configuration

Table Usage

The following sections briefly explain how a user can interact with the table portlet in the Portal.

Column rearrangements

The user can rearrange columns if preferred by dragging and dropping from the column’s header.

Sorting

The user can choose to sort the data in the table by either clicking directly in the header cell or by clicking on the column menu and selecting the appropriate sorting. It is also possible to sort multiple columns. To sort multiple columns, hold CTRL key and click the column header. To clear sort for a column, hold SHIFT key and click the column header.

Filter

The user can choose to filter the data in the table to show the requested data. The filter is accessible from the column menu by choosing Filter. The user can then choose the appropriate filter operator and value to filter on.

Export to Excel

If the table portlet has been configured to allow exports, the user can choose to export the table data to Excel by clicking on the export button in the top right corner of the table portlet. The user is then given the choice to either export all of the data results, or the results from the specific page in the table.

Render values as HTML

When checked, the table cells will render the contents as HTML. I.e. the cell data could be:

<strong>Some heading text</strong>
<br /><br />
Cell data here

Full screen

By clicking the full screen button in the top right corner of the table portlet, the table portlet can be viewed in full screen mode.

Last updated