Data Tables

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

The <DataTable> element supports the following child elements.

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

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.

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.

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.

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, PDF and TXT file can be previewed in the modal. Setting tvc.helium.showPreviewFileInModal should be set to true. By default, it’s false.

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.

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

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

Similarly we can show files that are connected the object using path, this can be achived by below configuration:

It might be scenario that some of files with specific format are irrelevant to show on UI. excludeFormat setting allows to exclude specified format files to show on UI.

This behavior can be configured in column as follows :-

or can be configured with global setting in tvc.properties as tvc.helium.files.excludeFormat=mxMedium Image,GIF

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.

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:

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

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.

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.

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.

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.

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

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

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

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:

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

Classification is a Enovia built-in feature provided by Library central. Any business-object can be classified as per the concept of Library central. Classification is maintained as hierarchy where Library objects act as root objects followed by Family or Classification objects . There can be more Family or Classification objects (also known as Sub Family) beneath a Family or Classification object forming a hierarchy. At the end of hierarchy, classified items will be present. Thus Library central forms the classification path for any business-object.

Columntype helium-classification enables you to configure a column to view and edit the classification path for the businessobjects listing in the datatable.

Below XML configuration displays the built-in classification column with options to add and remove classifications for the respective row object.

Columntype helium-classification was introduced in release 2022.3.0, to display a classification column and a icon to edit the classification from table-column. A edit form was opening on clicking the edit icon, to update the classification path by typing-in the known classifications. But there was no option to see all the available classifications.

From 2023.2.0 release, introducing a structure table to display the classification in hierarchy order. The edit icon in the classification column opens the default dashboard with a structure table to display the classification in hierarchy order. This hieraracal view helps to find the required classification and update to the respective row businessobject.

Refer a short video where a classification is updated to a row object.

Below are the optional settings to override the default behavior or the appearance of the classification column

Below is the sample classification column configuration with all optional settings.

As the user would like to make connections between object while editing a table cell, for ex connecting a specification to part. Now for such usecase we can configure related object column in helium.

As can be seen in the above config in settings we can pass a formconfig reference which would have all the details about the field which need to be edited.

Shows a favorite icon which will allow user to add or remove objects to/from favorite list.

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.

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:

Example:

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:

Inbuilt promote and demote command.

Example:

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.

Example:

In Widget Toolbar

In HeaderActions

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.

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.

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 :

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

Improve the Search And Connect command by adding customizable settings like upperSearchLimitValue and enableSelectAllCheckboxes, similar to NSX search.

We can also customize the Search and Connect Form by including a custom message for users.

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.

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

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

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.

Creating data groups based on specific conditions provides a convenient and functional way to meet our data grouping needs.

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 :

<AdvanceSorting/> built-in command can be added to toolbar in table widget. This command enable the user to sort the table. By clicking on this command, a UI will appear which enable user to choose desired sorting column and direction. Only sortable column will be appear in dropdown with which the user can choose to sort on up to three columns at same time.

When 'Save Sorting' is checked, the sorting preferences will be retained for future sessions or interactions with the application, providing consistency and convenience. If users prefer to sort temporarily for the current session without affecting future interactions, they can sort without checking the checkbox.

Context menus in tables allow users to access relevant operations for a specific row with just a right-click.

The commands and menus can be configured within the right-click context menu.

Context Menu can be configured like below :

ContextMenu xml can have multiple commands and sub menus , like below:

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.

The table javascript api can be found here

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.

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.

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

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.

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 Column Configurator for different tables.

In datatable toolbar :

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

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

In datatable toolbar :

Further, this feature has been extended to add advanced columns where config-admin can write the select expression manually. Refer Column Configurator section under In-App Designer section for more details.

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

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

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

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.

Row highlight duration post actions such as promote, demote, row refresh e.t.c can be configured as below :

tvc.helium.row.highlightDuration= 5000 //1000 is default value

The File column type is useful to display the related document(s) and their files in the side panel. However, the File column type will only display the related document(s) connected via the given/default relationships.

There might be cases when the table row object can have the document(s) connected via path (A virtual relationship).If there are document(s) related to the object, a paper clip icon will be displayed and the user can click the icon to get the list of files in the modal.

The list will show all related document(s) and the files related to each document.

For the document(s), the user will be able to check-in new files if user has access to do so, see basic properties of the document or open the document object in a popup window.

Also, per file, the user will be able to download, view, checkout, unlock, lock or update the file (again, depending on access rights, all actions might not be available).

Unless you provide any settings at all to this data handler, it will default look for "Reference Documents" and "Part Specifications" connected from the object in the table. You can change the behaviour by changing the following settings:

The example below illustrates how user/admin can construct the column of helium-pathattachment column type:

Favorite toolbar commands can be configured like below to handle multiple objects:

A column can be configured in table to view all relationship attribute in form.

Built in template can also be overridden

Form can be configured like below:

A column can be configured in table to display the history of connection in sidepanel.

Built in template can also be overridden

UIP table is a standalone UI component and it can be used for rendering table data in HELIUM and is currently being used for grid browser.

This can be enabled in helium now by adding attribute UIPTable to TableConfig element of dataTable widget like below:

UIPTable provides some improvised features as below:

UIPTable supports the following features: