Data Tables

05 May 2016

1. Datatable

The datatable widget presents data in a table. It is possible to interact with data in multiple ways. Some of the things the table supports are.

  • Filtering/Searching

  • Sorting

  • Pagination

  • Inline editing of cells

  • Exporting to PDF, CSV and Excel

  • Custom rendering of cells via either CSS or by applying a Handlebars template

  • Internationalization

Datatable

Find the possible configuration options for a table below

1.1. Widget

To create a data table widget you must first create an xml with the following contents:

<DataTable>
    <Title>Data Table</Title>
    <TableConfig namespace="helium">TableConfig.xml</TableConfig>
</DataTable>

The <DataTable> element supports the following child elements.

Name Description Example

Title

The title of the data table.

Note Currently not rendered in UI.

<Title>Data table title</Title>

TableConfig

Specifies the data table config file

 
<TableConfig namespace="helium">
    TableConfig.xml
</TableConfig>

Responsive

Specifies whether the table should be responsive, i.e adjust it self to small screens. If this element is set to true and the all the columns can’t fit on the screen an additional column containing a plus icon will be rendered. When the user clicks the icon the 'hidden' columns will be folded out. Defaults to true.

<Responsive>true</Responsive>

Paginated

This setting is deprecated and will no longer be supported from Helium release 2019.1.0 onward. The pagination setting provided in table configuration will be used for enabling/ disabling pagination.

<Paginated>true</Paginated>

Sortable

Specifies whether the table should support sorting or not. Defaults to true

<Sortable>true</Sortable>

FixedHeader

Specifies whether the table headers should be fixed or not. Defaults to false 

This can also be enabled at the global level for all the tables by using the key tvc.helium.datatable.fixedHeader=true in tvc.properties. The default value is false. This global setting can be overridden by individual level fixed header setting if explicitly adds FixedHeader.

<FixedHeader>true</FixedHeader>

PersistentExpandState

Specifies whether the structure will be expanded the same way the next time the same object view is loaded.

Note Please see Structure Browser Chapter for more details on how to configure persistent expand state and max count through init params

<PersistentExpandState>true</PersistentExpandState>

HotKeysNavigation

Enables user to use arrow keys for navigating from one cell to another while editing, Defaults to false.

Note In order to move within a text or select field, user can use arrow keys with ctrl.
Note This feature is currently supported for non responsive tables with client side processing true.

<HotKeysNavigation>true</HotKeysNavigation>

or globally

tvc.helium.datatable.hotKeysNavigation = true

1.2. Table Configuration

The <TableConfig> element can have the following children. Full example.

Name Description Example

Title

The title of the table.

Note Currently not rendered in UI. 
<Title>Title of table</Title>

DataLoader

References to the dataset to be loaded into the table via the child element <DateSet> or <SearchBasedLoader>. SearchBasedLoader can be used when table is expected to load data from search side panel. See On Search Result for more details on search and search based loader.

Note When SearchBasedLoader is defined, ClientSideProcessing should be false and DisplayMode can only be flat. 
<DataLoader>
  <DataSet>
    tvc:dataset:helium/MyDataset.xml
  </DataSet>
</DataLoader>

Table

References to table configuration file that defines the columns

<Table namespace="helium">TableConfig.xml</Table>

DisplayMode

Valid options are flat and structure. Note: For structure mode tables, you also must provide the ExpandSettings element.

<DisplayMode>flat</DisplayMode>

ExpandSettings

Mandatory element for structure mode tables. Point out a filter and optionally initial expand depth.

InitialExpandDepth

InitialExpandDepth defines how many level root object(s) should be expanded on initial load. Default value is 1.

Mode

By default only first root node will be expanded. This can be overridden by using attribute mode on InitialExpandDepth. Valid values are none,first and all.

Custom Expander

In more advanced situations, custom java expander can be used to perform the expansion.

Note When InitialExpandDepth is defined along with Data Set Expand, InitialExpandDepth takes precedence over Data Set Expand depth.
EvaluateExpandableNodes

Optionally this can be set to True (default is False) to evaluate whether a node is a leaf node and make it non-expandable. This will improve usability as leaf nodes are indicated without an expand symbol (plus sign). This can also be controlled globally through the init-param tvc.core.structure.evaluate.expandable.node (default false) in web.xml.

Note This evaluation will make an extra expand which may affect performance (often very little). This feature is by default off. 
<ExpandSettings>
    <Filter ns="helium">EBOMFrom.xml</Filter>
    <InitialExpandDepth mode="none">1</InitialExpandDepth>
</ExpandSettings>
<ExpandSettings>
<Expander>java:com.acme.MyExpander</Expander>
    <InitialExpandDepth mode="all">1</InitialExpandDepth>
</ExpandSettings>
<ExpandSettings>
   <EvaluateExpandableNodes>true</EvaluateExpandableNodes>
</ExpandSettings>

ForceReload

Whether the table is forced to load data from the server each time widget is refreshed. Valid value is either true or false. By default it is false.

<ForceReload>true</ForceReload>

RowSelect

Whether the rows in the table should be selectable or not. Valid values none, single and multi.

<RowSelect>multi</RowSelect>

Pagination

Whether the table should support pagination or not. The element supports the following attributes:

disabled

If pagination should be disabled or not. Valid values, true or false

size

The default number of rows to show

lengthMenu

Comma seperated list of values that should be added in the menu as number of rows to show. Defaults to 10, 25, 50, 100. If the size value is not included in this list it will automatically be added.

<Pagination size="15" disabled="false" />

ClientSideProcessing

Whether sorting, filtering and pagination should be handled on the client or on the server. The element supports the following attributes:

enabled

Valid values true or false

threshold

If the table has more rows then the configured threshold (defaults to 10 000) then server side processing automatically will be turned on. For example: Client side processing is enabled via 'enabled="true"' and the threshold is set to 100 via 'threshold="100"'. If the current table contains 101 rows the 'enabled="true"' flag will be overridden and server side processing will be used.

 
<ClientSideProcessing enabled="true"
                      threshold="100" />

EvalCurrentPage

Whether table columns should be evaluated page wise.

It can also be defined globally via structure browser setting tvc.structurebrowser.evalCurrentPage. Setting defined in table config takes precedence over global setting. Default value is true.

Note

Only when client processing is disabled, page wise evaluation if enabled will take place.

<EvalCurrentPage>true</EvalCurrentPage>

StructureGUI

Whether the expand button should be rendered in its own column or in the first configured column.

default

The expand button is rendered in its own column.

caret

The expand button is rendered in the first configured column in the table.

Warning In-cell editing is deactivated for the column that is used as the structure navigation column. 
<StructureGUI>caret</StructureGUI>

ResizeColumns

Allow table columns to resize from UI. Valid value is either true or false. By default it is false.

Resize columns feature can also be enabled at the global level for all the tables by using the key tvc.helium.datatable.resizeColumns.enabled=true in tvc.properties. The default value is false.

While resizing the column if column header or data is truncated, then tooltip automatically enabled on column header and data. This feature can be disabled at the global level for all the tables by using the key tvc.helium.datatable.tooltip.onResizeColumns=false in tvc.properties. The default value is true.

<ResizeColumns>true</ResizeColumns>

FixedColumns

Allowing the specified number of left most non reponsive table columns to fix while horizontally scrolling.

<FixedColumns>2</FixedColumns>

1.2.1. Example

<TableConfig>
    <!-- This is the title element -->
    <Title>This is the default title</Title>
    <Title>Table title</Title>

    <DataLoader>
        <DataSet>tvc:dataset:helium/MyParts.xml</DataSet>
    </DataLoader>

    <Table>tvc:table:helium/BasicInfo.xml</Table>

    <DisplayMode>flat</DisplayMode>

    <StructureGUI>default</StructureGUI>

    <RowSelect>multi</RowSelect>

    <Pagination size="15" disabled="false" />

    <ClientSideProcessing enabled="false" threshold="100" />
</TableConfig>

1.2.2. StructureGUI

image
Figure 1. StructureGUI in default vs caret mode

1.3. Column configuration

How to configure columns is described below. This is the file that is referenced above in the Table configuration

The <Table> element supports the following child elements.

Name Description Example

DisplayName

The display name of the table.

Note Currently not rendered in UI. 
<DisplayName>
    Basic Information
</DisplayName>

Column

Creates a column in the table

See Column specific details below

1.3.1. Column

The <Column> element describes the properties of a data table column.

The <Column> element supports the following child elements.

Name Description Example

ColumnType

 
<ColumnType>helium-column-actions</ColumnType>

Description

The brief details of the column that is rendered as a column header tooltip.

<Description>Brief detail of column</Description>

Alt

This setting renders brief details of the column as a column header tooltip. This setting is an alternative to the Description setting.

Note If Alt and Description settings are defined together then Description setting is given preference.

<Alt>Brief detail of column</Alt>

Editable

Whether the cells in the column should be editable or not.

Note If column editable setting is defined as false, then cell cannot be made editable via DataHandler. If it is intended that DataHandler should make cell editable or non-editable depending on some condition, then column editable setting should be set to true.

<Editable>true</Editable>

Expression

The expression that fetches the data from the backend.

<Expression>name</Expression>

InputType

If the column is editable, what input element should be rendered. Allowed values are:

textbox

will render a text input field

textarea

will render a text area

combobox

will render a select box

radiobutton

will render radio buttons

checkbox

will render checkboxes

datepicker

will render a date picker

If no input type is given the cell will default to an textbox.

<InputType>textarea</InputType>

Label

The name of the column that is rendered as a table header.

<Label>name</Label>

Name

The name of the column

Note The name is mandatory

<Name>Column name</Name>

NoWrap

This setting defines whether the column’s values will be wrapped or not.

True
The column’s values will not be wrapped. This is default behaviour.

False
The column’s values will be wrapped whenever needed to fit within the bounds of the column without enlarging the table too much.

 
<NoWrap>true</NoWrap>

Setting

Column specific setting. The supported attributes are:

name

the name of the setting

value

the value of the setting

If the ColumnType is set to helium-column-actions a setting with the name menu must be added and a value that points to an menu xml file. See second example.

If the name of the setting is options it is possible to add a json object as the element value. This way you can control client side validation, autocomplete settings,On Edit and column filter.

If the name of the setting is class it is possible to add class names as value for custom CSS classes

If the name of the setting is groupHeaderClass it is possible to add class names as value for custom CSS classes on group header just like class

 
<Setting name="template" value="helium/templates/table/test" />
<Column>
    <Label>emxComponents.Common.Actions</Label>
    <RegisteredSuite>Components</RegisteredSuite>
    <ColumnType>helium-column-actions</ColumnType>
    <Setting name="menu" value="tvc:menu:helium/ColumnActions.xml" />
</Column>
<Column>
    ...
    <Setting name="options">
        {
            "footerFilter": true
            "autocomplete": {
                "selectize": {
                    "preload": true
                },
                "handler" : {
                    "name": "user",
                    "localize": "true",
                    "contains": "true",
                    "caseSensitive": "false"
                }
            }
        }
    </Setting>
    ...
</Column>
<Setting name="class" value="col-weight col-bold col-red col-small" />
<Setting name="groupHeaderClass" value="green-color" />

AlternateOIDExpression

This setting can be used to control to which object the user should be routed when the column’s data is displayed as a hyperlink.

Note While using Alternate OID Expression, the default template is used and no custom template is supported. The value for this setting should be a valid select expression that returns object-ids.

$<to[relationship_DesignResponsibility].from.id>

$<to[relationship_EBOM].from.id>

Sortable

Specifies whether the column should be sortable or not. Valid values: true or false. Defaults to true.

<Sortable>false</Sortable>

SortDirection

Specifies the sort direction. Valid values: ascending and descending.

<SortDirection>ascending</SortDirection>

SortOrder

Specifies what column to make the initial sort on. Valid values: A positive integer (zero based). For example if you want the initial sorting to be based on the second column you would add the value 1.

<SortOrder>1</SortOrder>

SortType

Specifies the sort type, i.e numeric, string, numeric or date

<SortType>numeric</SortType>

TextLength

Defines number of characters to be displayed before truncation. The rest will be displayed in a tooltip.

 
<TextLength>25</TextLength>

TruncateDirection

Defines truncate direction on column, If the number of characters in a cell text exceeds the text length. Valid values: right, left or center. default value is right.

Note If truncate direction is center then user needs to provide additional setting LeftTextLength & RightTextLength. 
<TruncateDirection>left</TruncateDirection>
<TruncateDirection>center</TruncateDirection>
<LeftTextLength>3</LeftTextLength>
<RightTextLength>3</RightTextLength>

Rows

Defines number of rows to be displayed before truncation. The rest will be displayed in a tooltip.

 
<Rows>3</Rows>

usesBusinessObject

This attribute value on column tag defines if column is for relationship.

true
Column expression is object selectable . This is default behaviour.

false
Column expression is relationship selectable

 
<Column usesBusinessObject="false">
...
</Column>

Visible

This setting defines whether a column should be visible or not.

The user is able to define his/her own set of visible columns.

True
The column will be visible (Default).

False
The column is not visible.

TargetLocation

This setting can be used when we are opening routing to emxTree.jsp in 3dspace.

Content
The object will open in same window.

Popup
The object will open in popup.

Href

Defines the Href

<Href>/${ROOT_DIR}/SomePage.jsp</Href>

AllowMultipleEdit

Specifies whether the column should be mass update or not. Valid values: true and false.

<AllowMultipleEdit>true</AllowMultipleEdit>

GroupHeader

Defines a group header for the column. Typically, a group header is used to group several columns together, with a common label. The setting need to be defined on all columns that are part of the group.

<GroupHeader>The group header</GroupHeader>

ColumnWidth

Defines the column width in pixels. If content is exceeding the defined width, then truncated content will be shown with ellipses and also tooltip will be enabled for the same.

<ColumnWidth>100</ColumnWidth>

1.3.2. Column template

The default rendering of a column cell can be overridden with a handlebars template.

{{!--
  Sample Handlebars template that can be applied to columns in a datatable.

  <Column>
  ...
  <Setting name="template" value="/path/to/this/template/test" />
  </Column>

  <Setting name="template" value="helium/templates/table/object-link" />
  <!-- If same table column is used in embeded mode, standalone mode and 3dashboard  -->

  <Setting name="template" value="helium\templates\table\object-link-with-alternate-oid" />
    <!-- For the column which has AlternateOIDExpression or columntype path, same table column is used in embeded mode, standalone mode and 3dashboard -->

  Available variables are:
  - object
  - row
  - cell

  To inspect what the content of the variables are, run {{debug variable}} and check your console

--}}
<a href="javascript:App.routing.open('{{objectId}}');">{{value}}</a>

1.3.3. Configurable column CSS classes

It is possible to add configurable CSS classes to columns in the column XML, use <Setting> with class as the name and the custom class names as value, separated by spaces

<Setting name="class" value="col-weight col-bold col-red col-small" />

Then in your custom css, you can target column level styling, e.g.

Warning Some selectors require higher specificity or the use of !important rule. 
.col-bold {
    font-weight: bold !important;
}

.col-red {
    color: red;
}

.col-small {
    width: 50px;
}

You can also specifically target a column’s header or body with th/td, e.g.

th.col-weight {
    font-weight: bold !important;
    color: darkred !important;
}

th.col-description {
    font-style: italic;
    color: darkgreen !important;
}

td.col-revision {
    color: darkorange;
}

1.3.4. Client side validation

It is possible to provide a javascript function that performs client side validation. This is achieved by applying the following element to an column:

<Setting name="options">{
    "validator": "App.custom.someJavascriptFunction",
    "validatorMsg": "Error message, either an message or a i18n key"
}</Setting>

The javascript function will be executed when the cell is blurred and with the value of the field passed in. The function must return a boolean, true if the value is valid and false otherwise.

1.3.5. Column filter

It is possible to add a filter to either the footer or the header of a column by specifying the following setting. Valid values for position is "footer" and "header". Default value is "footer".

<Setting name="options">{
    "filter": {
        "position": "footer"
     }
}</Setting>

This will render an input field in the column footer, where the user can filter out rows based on the values in that column. User can use multiple queries by using "|" as delimeter in between query.

Warning It is not supported to have filters in both the header and the footer in the same table.
Column filter with row filter

It is possible to add a row filter to a column filter by specifying the setting rowFilter. The value should be a css class that matches the a row that the filter should be applied to. For example to apply the filter to only a certain level of a structure table add the value ".row-level-n" where n is the level the filter should be applied to.

<Setting name="options">{
    "filter": {
        "position": "footer",
        "rowFilter": ".row-level-1"
    }
}</Setting>

If the filter is applied on a row in a structure table and that row is expanded the child rows will not be affected of the filter.

1.3.6. On Edit

It is possible to configure different behavior on edit of a cell. This can be configured as below :

<Column>
    ...
    <Setting name="onEdit" value="refresh-parents" />
    ...
</Column>

Possible values are refresh-parents, refresh-table, or some custom javascript function.

If onEdit is not configured than only the current row will get refreshed.

In custom js function it will have context of datatable and row jquery element and column instance as arguments.

onColumnEdit : function($rowElement,column)  {
    	    		App.toaster.success("column edit successfully")
    	},
Name Description

refresh-parents

It will refresh the parent rows of the edited cell.

refresh-table

It will refresh the table.

some custom js function

It will call the js function passed in the value once the cell is edited.

1.3.7. headerNoTruncate

ResizeColumns allow table columns to resize from UI. This will allow user to truncate the column below the actual content of the header. This behavior can be controlled using the headerNoTruncate setting i.e. user can not resize the column below the actaul content of the header. This can be configured as below :

<Column>
    ...
    Setting name="headerNoTruncate" value="true" />
    ...
</Column>

Possible values are true, or false. The default value is false.

1.3.8. Autocomplete

All columns which renders an select field have basic autocomplete support. With the options outlined below the behavior can be customized to great extent.

Note For autocomplete to work the <InputType> element must be set to combobox

To customize autocomplete provide the following setting:

<Setting name="options"><![CDATA[
{
    "autocomplete": {
        "template": "...",
        "selectize": { ... },
        "handler" : { ... }
    }
}
]]>
</Setting>

Each block, template, selectize and handler is described below.

template

Provide an path to an template to customize the dropdown. Example of template:

<div>
    <p>{{label}}</p>
</div>
selectize

The client utilizes Selectize and all options described in the docs can be used here.
handler

All settings that are described in the core admin guide can be used in the handler block including all predefined handlers.

If you wan’t to create a custom autocomplete handler, follow the admin guide and pass the java class as the value for the name key.

Full example:

<Setting name="options"><![CDATA[
    {
        "autocomplete": {
            "template": "/helium/templates/form/autocomplete",
            "selectize": {
                "preload": true,
                "maxItems": null,
                "labelField": "name",
                "searchField": ["name"]
            },
            "handler" : {
                "name": "dataset",
                "dataset": "tvc:dataset:helium/MyParts.xml",
                "select": ["name",  "current"]
            }
        }
    }
    ]]>
</Setting>

1.3.9. Highlight updated row cross-widget

Datatable rows that have their data updated via another widget will be highlighted to show the changes.

Showing cross-widget object update highlight
Note There is a API for highlighting any jQeury element here

1.3.10. Access Control

The access restriction for table column in Helium can be defined similar to TVC Classic based upon following settings:

  • AccessMask (Access mask for the current object)

  • AccessProgram and AccessFunction (A JPO and a function that evaluates the access rights)

  • AccessExpression (MQL expression that evaluates the access)

The example below illustrates how you can construct the access restriction:

<AccessMask>checkout,modify</AccessMask>

Or use an access program and access function:

<AccessProgram>MyAccessProgram</AccessProgram>
<AccessFunction>checkAccess</AccessFunction>

Or use an access expression:

<AccessExpression>policy == 'EC Part'</AccessExpression>

Please refer following links of TVC documentation for more details

Controlling Access to UI Components

Child Elements for Column

1.3.11. Example

<Table xmlns="http://technia.com/TVC/Table" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://technia.com/TVC/Table http://products.technia.com/tvc/schema/latest/Table.xsd">
    <DisplayName>Basic Information</DisplayName>
    <Column>
        <Name>Type</Name>
        <Expression>type</Expression>
        <Label>Type</Label>
        <Fixed>TRUE</Fixed>
        <ShowTypeIcon>True</ShowTypeIcon>
        <NoWrap>true</NoWrap>
    </Column>
    <Column>
        <Name>Name</Name>
        <Expression>name</Expression>
        <Label>Name</Label>
        <Fixed>TRUE</Fixed>
        <SortDirection>ascending</SortDirection>
        <SortOrder>1</SortOrder>
        <Setting name="template" value="helium/templates/table/test" />
    </Column>
    <Column>
        <Name>Revision</Name>
        <Expression>revision</Expression>
        <Label>Revision</Label>
        <Fixed>TRUE</Fixed>
        <Editable>TRUE</Editable>
    </Column>
    <Column>
        <Name>Material Category</Name>
        <Expression>attribute[Material Category]</Expression>
        <Label>Material Category</Label>
        <AllowShowMore>TRUE</AllowShowMore>
        <Editable>TRUE</Editable>
        <InputType>combobox</InputType>
        <SortType>string</SortType>
        <AccessExpression>policy == 'EC Part'</AccessExpression>
    </Column>
    <Column>
        <Name>Desc</Name>
        <Expression>description</Expression>
        <Label>Description</Label>
        <Description>Describes this object in detail.</Description>
        <AllowShowMore>TRUE</AllowShowMore>
        <Editable>TRUE</Editable>
        <Columns>45</Columns>
        <Rows>5</Rows>
        <InputType>textarea</InputType>
        <SortType>string</SortType>
        <TextLength>40</TextLength>
    </Column>
    <Column>
        <Name>Owner</Name>
        <Expression>owner</Expression>
        <Label>Owner</Label>
    </Column>
    <Column>
        <Name>Weight</Name>
        <Label>Weight</Label>
        <Expression>attribute[Weight]</Expression>
        <Editable>TRUE</Editable>
        <SortDirection>ascending</SortDirection>
        <Setting name="class" value="col-weight col-bold col-red col-small" />
    	<AccessMask>checkout,modify</AccessMask>
    </Column>
</Table>
Note For Autocomplete functionality with Inquiry Dataset, USERQUERY macro can be used to pass user input to inquiry.

Example:

<Setting name="options"><![CDATA[
    {
        "autocomplete": {
            "handler" : {
                "name": "dataset",
                "dataset": "tvc:dataset:helium/MyParts.xml",
            }
        }
    }
    ]]>
</Setting>

and Dataset Inquiry is:

<Inquiry>
    <Code>temp query bus Part '*${USERQUERY}*' * where "owner == '${USER}'" limit 100 select id dump |</Code>
    <Format>${OID}</Format>
    <Pattern>*|*|*|${OID}</Pattern>
</Inquiry>

1.3.12. Cell content in modal instead of tooltip

The data in the cell content can be huge and it will be better to such data in the modal as it provides the ability to scroll and makes more user friendly while ready such content.

This can be achieved by adding following configuration.

<Column>
	...
	<TextLength>25</TextLength>
	<Rows>5</Rows>
	<TruncateDirection>right</TruncateDirection>
	<Setting name="class" value="he-tooltip-as-modal" />
	...
</Column>

By default, after text length limit three dot (…​) will be rendered on UI. If want to change this three dot then need to configure below properties in translation JSON files.

"dataTable": {
 "column": {
  "textLength": {
   "textToShowTooltip": "... (more)"
  }
 }
}

In some cases user might not want to see the close icon that could be achieved by below configuration.

<Column>
	...
	<UseVersion2>true</UseVersion2>
	<TextLength>25</TextLength>
	<Rows>5</Rows>
	<TruncateDirection>right</TruncateDirection>
	<Setting name="class" value="he-tooltip-as-modal he-without-close" />
	...
</Column>

By default a close icon will be shown on modal, to close the modal. If user doesn’t to see the close icon and wants the modal to close if he clicks anywhere outside the modal. this can be achieved with below config.

<Column>
	...
	<Setting name="class" value="he-tooltip-as-modal he-without-close" />
	...
</Column>

1.4. Progress Column

image The progress column will render a progress bar based on the value. Unlike the progress column in TVC Classic this column is only responsible for rendering the value. By default it will also show the percentage as text and in tooltip. This can be controlled with the options setting.

<Setting name="options">
    	{
			"showText" : false,
			"showTooltip" : false
		}
</Setting>
<Column>
	<Name>progress</Name>
	<Label>Progress</Label>
	<ColumnType>helium-progress</ColumnType>
	<Expression>${attribute[attribute_PercentComplete]}</Expression>
	<Setting name="options">
    	{
			"showText" : false,
			"showTooltip" : false
		}
	</Setting>
</Column>

1.5. Files Column

Note This feature requires the TVC File Manager license.

In a table displayed in Helium, you may have a column containing links to files related to objects in ENOVIA. There is a built-in column type that simplifies configuring this.

<Table>
	<Column>
		<Label>emxComponents.Common.Actions</Label>
		<RegisteredSuite>Components</RegisteredSuite>
		<ColumnType>helium-files</ColumnType> 1
	</Column>
</Table>
1 Column type set to helium-files

This column inherts behaviour from the TVC File Manager component regarding configuration and others.

See this page for more details on how to configure the File Manager.

The screenshot below illustrates the file column

image
Figure 2. Files Column

Also, It is possible to reverse the lock icon to match the file lock status. Ex. When the file is locked, show the lock icon and similarly, when the file is unlocked, show the unlock icon.

This can be achieved by using below system property in tvc.properties.

Property Description Default Value

tvc.core.fileActions.reverseLockIcon

Reverse the lock icon

false

<Expression> tag support for Column type set to helium-files

A column set to Column type helium-files along with <Expression> tag as shown below, will display the file from related object found through the expression value. And file column with expression will always be non-editable.

<Table>
	<Column>
		<Label>Related Files</Label>
		<RegisteredSuite>Components</RegisteredSuite>
		<ColumnType>helium-files</ColumnType>
		<Expression>${from[relationship_ReferenceDocument].to}</Expression> 2
	</Column>
</Table>

As an example in below screen, a part object displays the file from its related object found traversing through relationship "Reference Document"

Note

All the files from all object found through the expression value will be displayed. For example, out of given expression if 3 objects are found, all files from all 3 objects will be displayed.
image
Figure 3. Files Column with Expression

1.6. Drop Zone Column

Note This feature requires the TVC File Manager license.

In a table displayed in Helium, you may have a column containing a drop zone were the user may drag’n’drop files to be checked into ENOVIA™. Helium contains a built-in column type that simplifies configuring this.

<Table>
	<Column>
        <Alt>Drop Zone</Alt>
		<ColumnType>helium-dropzone</ColumnType> 1
	</Column>
</Table>
1 Column type set to helium-dropzone to enable this feature.

You may include a file-dropzone in many places, as long as you have configured the column regarding what to do with the file depending on what object it is being dropped for. In some cases, you should create a new Document object, connect it with a certain relationship and then check-in the file.

Here is a complete example of how to configure a helium dropzone:

<Column>
    <Name>Dropzone</Name>
    <Label>Dropzone</Label>
    <ColumnType>helium-dropzone</ColumnType>
    <Setting name="dropzone:type_Part">
        relationship=relationship_ReferenceDocument,
        direction=from,
        type=type_Document,
        policy=policy_Document,
        vault=vault_eServiceProduction,
        format=generic,
        oneobjectperfile=true,
        refresh=refresh,
        selectformat=false
    </Setting>
</Column>

Please see file manager chapter for more details on how to configure a Drop Zone using TVC.

1.7. Primary Image Column

Showing a table column with thumbnails of an object’s primary image, is often helpful for identifying a particular object or to get an overview. Helium features a built-in columntype for this.

image

The tablecolumn uses lazy-loading to only request images that are within the visible area of the web browser, in order to not waste bandwidth. Images that come into the visible screen area after scrolling will be automatically fetched at that time.

<Table>
    <Column>
        <Name>PrimaryImage</Name>
        <Label>Image</Label>
        <ColumnType>helium-primaryimage</ColumnType>
    </Column>
</Table>
1 Column type set to helium-primaryimage to enable this feature.

1.8. User Column

Inbuilt ColumnType for showing an avatar/profile picture in a table cell. Useful for indicating who owns, created, or is assigned to an object. Needs a valid <Expression> to identify the User.

image

The tablecolumn uses lazy-loading to only request images that are within the visible area of the web browser, in order to not waste bandwidth. Images that come into the visible screen area after scrolling will be automatically fetched at that time.

<Table>
    <Column>
    	<Name>owner</Name>
    	<Expression>owner</Expression>
    	<Label>Owner</Label>
    	<Editable>false</Editable>
    	<ColumnType>helium-user</ColumnType>
    </Column>
</Table>
1 Column type set to helium-user to enable this feature.

1.9. Attachments Column

Showing a column with an attachments icon and clicking on the icon will open all the attachments related to that row in a modal. This can be configured as

<Column>
    <ColumnType>helium-attachment</ColumnType>
	<Setting name="Relationship" value="relationship_ReferenceDocument"/>
	<Setting name="Direction" value="From"/>
</Column>

Default value for Relationship is "Reference Document,Part Specification" and is defined on`tvc.office.server.attachmentRelationships` and for direction is "From".

1.10. Version Actions

This can be used to show the actions available on a particular version objects like download a file, check in, check out e.t.c

All Versions

1.11. Go There

Shows navigate icon which allows to navigate to a widget. The basic use case can be to show properties or structure of any object. This can be configured as below:

<Column>
	<Label>column.label.goThere</Label>
	<ColumnType>helium-go-there</ColumnType>
	<Setting name="widgetRef" value="tvc:widget:hex:engineering/EBOM.xml" />
</Column>

1.12. Add To Clipboard

Shows add to clipboard icon, which enables user to add an object to clipboard. This can be configured as below:

<Column>
		<Label>Add To Clipboard</Label>
		<ColumnType>helium-addToClipboard</ColumnType>
		<Alt>Add to Clipboard</Alt>
	</Column>

1.13. Create and connect row command

In a structure table it is possible to create and insert a new row at a chosen depth. Select a row and click the "Create and connect row" command to add a child row to the selected parent row.

1.14. Upload File Command

Note This feature requires the TVC File Manager license.

This feature is similar to the "Dropzone above table" in the file manager chapter. Creates a row/new rows when a file is uploaded. The row will not be created until the file is uploaded successfully.

Currently supports the following options:

The table below shows and explains what parameters that you can use:

Parameter Value Notes / Description

createSettings

String or Object

The id of a predefined createSettings or the createSettings can be defined inline here. See the following createSettings: parameters.

createSettings:type

String type

The type of object that will be created. Can be a symbolic name or real name

createSettings:policy

String policy

The name of the policy to be used for the object that will be created. Can be a symbolic name or real name

oneFilePerObject

True or False

Whether or not to create one document object per file that is dropped. E.g. if the user drops three files, if this setting is set to true, three document objects will be created.

Default is false.

badChars

String/JS function

Chars that are not allowed in the file name. [1]

validFileExtensions

Array of Strings/JS function

Valid file extensions. [1]

maximumFileSize

Number/JS function

The maximum allowed file size in bytes. [1]

preProcessor

JS function

JS function executed before any table row is created.

postProcessor

JS function

JS function executed after all table rows are created.

when not configured, table is reloaded. custom postProcessor can take care of reloading the table or return true to reload.

  1. Can either be a value, or the name of a JS function returning a value

Example:

<Command>
    <Label>Save file</Label>
    <FontIcon>he-save</FontIcon>
    <OnClick>App.file.uploadFileCommand</OnClick>
    <OnClickParams><![CDATA[{
        "oneFilePerObject": true,
        "createSettings": {
            "type": "type_CADDrawing",
            "policy": "policy_CADDrawing"
        },
        "badChars": "App.custom.noSpaceOrComma",
        "validFileExtensions": [".png", ".jpg", ".jpeg", ".bmp", "gif", ".psd"],
        "maximumFileSize": "App.custom.fiveMegaBytes",
        "preProcessor" : "App.custom.validateFileSize",
        "postProcessor" : "App.custom.returnTrue"
    }]]></OnClickParams>
</Command>

1.15. Promote and Demote Command

In order to promote and demote business object(s) from a table widget, the promote and demote methods of App.table.BusinessObject JS API can be used. The API requires a data table reference as the mandatory first argument. After the action is performed, an optional status message can be displayed in the UI, informing whether action was successful or not. To display such message, an optional second argument containing a Toaster instance should be passed..

Example:

new App.table.BusinessObject(this).promote();
new App.table.BusinessObject(this, windows.App.toaster).promote();
new App.table.BusinessObject(this).demote();
new App.table.BusinessObject(this, windows.App.toaster).demote();

Inbuilt promote and demote command.

App.table.action.promote
App.table.action.demote

Example:

<Command>
    <Label>Promote</Label>
    <FontIcon>fa-forward</FontIcon>
    <OnClick>App.table.action.promote</OnClick>
</Command>

<Command>
    <Label>Demote</Label>
    <FontIcon>fa-backward</FontIcon>
    <OnClick>App.table.action.demote</OnClick>
</Command>

To print the content of widget, the print method of App.Widget JS API can be used. Command can be used either in widget toolbar or header actions. In responsive table only visible content can be printed.

Note This feature is supported only in View mode.

Example:

In Widget Toolbar

<Command>
	<Label>Print</Label>
	<OnClick>App.Widget.print</OnClick>
</Command>

In HeaderActions

<Command>
    <Label>Print</Label>
    <Setting name="OnClick" value="App.Widget.print" />
</Command>

1.17. Display Density Command

A built-in command <DisplayDensity /> can be added to a toolbar in a Table widget. This command allows decreasing height between rows resulting in more rows to be visible. User preference is preserved across sessions.

Note The user preference will be saved only for the Table widget where this command is used.
Change Display Density

1.18. File Package Download Command

A built-in command <FilePackageDownload /> can be added to a toolbar in a Table widget. This command allows bulk download of documents from selected objects using native file manager.

<FilePackageDownload>
    <!-- Optional fields-->
    <Label>FPD</Label>
    <FontIcon>cloud download icon</FontIcon>
    <Configuration>tvc:fpd:hex:engineering:homepage/NativeFilesForSelectedModels.xml</Configuration>
</FilePackageDownload>
Note To use this command, native file manager needs to be installed and enabled in user’s device.

1.19. Table Configurator Command

A built-in command <TableConfigurator /> can be added to a toolbar in a Table widget. This command allows adding,updating and removing user defined tables and maintaining End User Defined Columns for different tables.

Note The addition of new columns can only be done for end user tables and not the default file based table defined for a widget.

In datatable toolbar :

    <TableConfigurator default="columns" excludeInterfacePrefix="true" />
image
Figure 4. Table Configurator Menu Columns View
image
Figure 5. Table Configurator Menu Tables View

The table below shows and explains the available attributes for <TableConfigurator /> command:

Field Value Notes / Description

default

columns or tables

The default attribute defines which tab is active by default in menu.

Default selected tab is columns.

excludeInterfacePrefix

True or False

Whether the interface attributes should show interface name prefix in available columns' list.

Default value is true.
Note It is recommended not to add <ToggleColumnVisibility /> command if <TableConfigurator /> is used as it would be redundant to have both together in a toolbar.
Table Configurator

1.20. Search And Connect Command

A built-in command <SearchAndConnect></SearchAndConnect> can be added to a toolbar in a Table widget. This command opens a search modal configured with given searchform and relationships and user can select search results and connect to selected object.

In datatable toolbar :

    <SearchAndConnect >
        <Relationships >
            <Relationship default="true">
                relationship_EBOM
            </Relationship>
            <Relationship direction="to">
                relationship_PartSpecification
            </Relationship>
        </Relationships >
        <SearchConfig>tvc:search:hex:common/SearchAndConnect.xml</SearchConfig>
        <ExpandRow>true</ExpandRow>
    </SearchAndConnect>

The table below shows and explains the available tags for SearchAndConnect` command:

Field Value Notes / Description

Relationships

Relationship[]

The list of relationships available for connection in search modal.

Relationship

string

Name of the relationship to be added.It has two attributes default (sets the relationship as default selected for connection) and direction(the relationship direction to be used for connection)

Default value for direction is false. Default value for default is false.

SearchConfig

string

The search config path for the search modal.For further details see New Search Experience

ExpandRow

boolean

Whether context object in table should be expanded after new objects are connected from the modal.

OnSubmit

The OnSubmit configuration can be used to perform custom action when user click on submit button on search page.

<OnSubmit>App.hex.doConnections</OnSubmit>.

SubmitButtonLabel

This will overide submit button label. Default value is Submit

<SubmitButtonLabel>Add To Collection</SubmitButtonLabel>

Connect

Want to perform custom action which is not dependent on relationship, then this tag can be set false. The default value of this is true.

<Connect>false</Connect>

SelectionCriteria

To enable/disable command based on row selection. Valid values are
none : command is always enabled,
single : only enable when one row is selected,
multi : enable when at least one row is selected
many : only enable when at least two rows are selected.

<SelectionCriteria>none</SelectionCriteria>
Search And Connect Objects

1.21. Data Group Command

The data grouping function can be used to group data, based upon column values, into different groups.This function is available from any table page (flat list or structure), and operates on the data within a table/structure.

The data grouping function is launched via a built-in command <DataGroup/>, that can be added to a toolbar in a Table widget.

image
Figure 6. Data Grouping Button

As an example, assume that you have a structure like in the screenshot below.

image

Launching the data grouping function and define two groups: type + current state, would give a result like the screenshot below.

image

The different groups have different colours, and above the table there is a legend where the colour is mapped to the group. The first column after the structure shows the value (label) and the number of rows that mapped the group.

A group can be expanded in order to see the content of a particular group.

image

1.21.1. Light Mode Data Group

This enable user to open a data grouping form inline where user can select the column and apply the grouping even user can cancel the grouping.

This can enable by passing an attribute lightMode value as a true in exiting data group commnad.

<DataGroup lightMode="true"/>
image
Figure 7. Light Mode Data Group Form

1.22. Pre configure Data Group

For some tables user might want to see the preconfigured datagroups, the data can be grouped when the tabe is loaded initially loaded by providing simple configurations in the table config as follows :

 <DataGroup>
    <GroupBy>
        <Name>Material Category</Name>
		<Group condition="match" value="Glass" />
	</GroupBy>
	<ThenBy>
	    <Name>owner</Name>
	</ThenBy>
	<FinallyBy>
		<Name>State</Name>
	    <Group condition="match" value="In Work" />
	</FinallyBy>
	<GoBackAllowed>true</GoBackAllowed>
</DataGroup>

1.23. Internationalisation

The data table widget supports internationalization. If a translation key is given to an <Label> element the translation for that key will be rendered. If no value is found for that key the actual value of the <Label> element will be rendered.

1.23.1. Customize messages

The following messages is defined in the default.json language file.

{
    "dataTable": {
        "messages": {
            "decimal":        "",
            "emptyTable":     "No data available in table",
            "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty":      "Showing 0 to 0 of 0 entries",
            "infoFiltered":   "(filtered from _MAX_ total entries)",
            "infoPostFix":    "",
            "thousands":      ",",
            "lengthMenu":     "_MENU_",
            "loadingRecords": "Loading...",
            "processing":     "Processing...",
            "search":         "Search:",
            "zeroRecords":    "No matching records found",
            "paginate": {
                "first":      "First",
                "last":       "Last",
                "next":       "Next",
                "previous":   "Previous"
            },
            "aria": {
                "sortAscending":  ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            }
        },
        "editor": {
            "messages": {
                "create": {
                    "button": "New",
                    "title":  "Create new entry",
                    "submit": "Create"
                },

                "edit": {
                    "button": "Edit",
                    "title":  "Edit entry",
                    "submit": "Update"
                },

                "remove": {
                    "button": "Delete",
                    "title":  "Delete",
                    "submit": "Delete",
                    "confirm": {
                        "_": "Are you sure you wish to delete %d rows?",
                        "1": "Are you sure you wish to delete 1 row?"
                    }
                },

                "error": {
                    "system": "A system error has occurred (More information)"
                },

                "multi": {
                    "title": "Multiple values",
                    "info": "The selected items contain different values for this input. To edit and set all items for this input to the same value, click or tap here, otherwise they will retain their individual values.",
                    "restore": "Undo changes"
                }
            }
        }
    }
}

It is possible to override the each message in your own language file by providing a key that matches one of the above. For example to override the dataTable.messages.emptyTable key you would add the following to your language files.

    {
        "dataTable": {
            "messages": {
                "emptyTable": "Currently no rows"
            }
        }
    }

Many translations for the tables can be found on here

1.24. API

The table javascript api can be found here

1.25. Mass Update

When <AllowMultipleEdit> has been set to true on a table column, the column is editable, and the user has access to edit at least one cell in the column, an icon will appear on the column header that the user can click in order to edit multiple cells in a single column to the same value.

image
Figure 8. Mass Update icon

The mass update form is shown in modal. If there is more than one column allowed for mass updating, the user can easily change the working column from the drop down list showing the column. The user can choose whether to edit the selected rows or all rows.

User can check "Keep Selection" to retain selection for further mass updating other columns.

By default "Keep Selection" is unchecked.

image
Figure 9. Mass Update form

1.26. Customization

The end user can change certain settings of a TableWidget, and automatically persist those customizations. Settings that are customizable include:

  • Column visibility (hide/show)

  • Data grouping (show/hide)

  • Column order (reorder the initial order from configuration)

  • Pagination length (number of table rows displayed per page)

  • Last sorted column (The column based on which the table should be sorted. Overrides the default/configured sort order)

image
Figure 10. Checkbox indicates column visibility. Drag-and-drop to reorder.
image
Figure 11. Pagination

Changes to the above settings are stored per TableWidget, and remembered across page changes and browser sessions, as long as the Dashboard Customization property is enabled.

To reset any customizations for a TableWidget, you can use the Widget Customization reset icon.

1.27. Styling / CSS

1.27.1. Offline available table rows

If dynamic caching of object pages has been enabled, the TableWidget now automatically applies a CSS class .offline-available on every <tr> element that has a cached entry.

This opens up for conditional styling, that helps the user understand which objects are cached and thereby possible to open while offline.

Below example is achieved with CSS:

tr.offline-available {
	background-color: #9fd39f !important;
}
image
Figure 12. Specific styling of offline-available objects

1.28. End User Defined Columns

Users can add, remove and update columns in a table from the existing list of attributes based on objects present in table including the unified type and interface attributes.

It is also possible to exclude some attributes from the addable list by adding following init-param in web.xml:

    tvc.core.attributes.excludedAttributes

It accepts comma-separated attribute names to be excluded. Furthermore, attribute labels support localization through framework properties.

In datatable toolbar :

    <TableConfigurator />
image
Figure 13. Columns menu

There are two ways of adding a new column to the existing table. User can simply check one/more columns from the existing list or use Add Advanced Column icon to add column with more custom settings.

The table below shows and explains the available settings in advanced mode:

Field Value Notes / Description

Name

String

The name appears as table column header

Description

String

The description acts as tooltip for column header.

Expression

String

The expression field provides a list of attributes to select from for the column data.

Is Editable

True or False

Whether the column should be editable or not.

Default is false.

InputType

String

List of input types to select from in case of editable field. E.g. If the attribute is of date format, you can select date as input type which will present a date picker to choose from in edit mode.

No Wrap

True or False

Whether the content of column should be wrapped. Default is true.

Filter

True or False

Whether column should have its own column filter.

Default is false.

Sortable

True or False

Whether column should be sortable or not.

Default is true.
image
Figure 14. Add Advanced Column form

After addition user can delete the column by unselecting it and update by using the pencil icon next to column item in the menu. Edit form provides same properties as add advanced form.

1.29. CDM document details widget

We can view the versions of the document object by configuring the columntype helium-go-there as given below:

<Column>
	<Label>Go There</Label>
	<ColumnType>helium-go-there</ColumnType>
	<Setting name="widgetRef" value="tvc:widget:helium:cdm/CDMDocumentVersions.xml" />
</Column>

Specification

If a document object would have several files checked in, you will first see the active version objects for each file checked in.

Active Versions

By simply clicking the go-there again for a particular file, you will then see all the versions of that file.

All Versions

1.30. Limitations of the date format table columns

When ClientSideProcessing is disabled, then the search performed using the column filter on date format columns will not give expected results if the date format specified with the tag DateFormat in Helium.xml is identified as invalid by the standard java class java.text.SimpleDateFormat.

For example, if the date format specified with the tag DateFormat in Helium.xml is MMMM Do YYYY, then the SimpleDateFormat Class consider this as an illegal pattern by logging error Illegal pattern character 'o'. In this case, the search results won’t be accurate.