Authored by Anonymous
Review the following sample use cases that can help you achieve advanced capabilities within the hierarchical table control.
Text wrapping
Text wrap is not supported in the hierarchical table out-of-the-box.
To enable text wrapping, retrieve the node name of the cell and add the code below in the additional stylesheets of the skin:
div[node_name="<node> "] .ht-cell-content span {
white-space:normal;}
With the above code, if the string after wrapping does not fit in the default cell size (height or width), the cell does not grow automatically to overlap the cell above or below. This behavior takes place because the position of cells in the hierarchical table is marked as absolute, whereas in the regular table, the position of the cells is relative. As a result, the height of a regular table grows automatically when the text wrap check box is selected on the Presentation tab of the field.
If your requirement has a string which overlaps with other cells, use a smart info event on the Hover action of the cell. For the Hover action, in the Applicability list, select Both (above the action set configuration).
Internet Explorer 11 and Edge limitations
Some new Pega Platform UI components are not fully supported by the Internet Explorer (IE) and Edge browsers. You can find detailed information about supported browsers in the Pega Platform Client Operating System and Browser Support guide on Pega Community.
Hierarchical tables are displayed in legacy mode for Edge and IE 11 browsers. As a result, such tables do not support new controls, such as multiselect. If the userbase for your application includes users of Edge and IE 11, the UI page should toggle between the regular table and the hierarchical table for IE 11 or Edge and other browsers, such as Google Chrome. Pega Platform™ provides functions to identify the browser. Use these functions to identify the browser and put a Visibility when condition on the table:
- For IE:
@BrowserIsIE(tools) - For non-chromium Edge (traditional Edge browser):
@pyBrowserIsNonChromiumEdge()
Deletions in hierarchical tables
By default, the delete event does not work on hierarchical tables. To enable deletions, configure an action set on click, and then run a data transform that corresponds to the delete functionality.
In the data transform, retrieve the active row index and complete a page removal from the list.
Note: If the active element context has not been identified through a data transform, use a wrapper activity to call the above data transform.
Deletions in the regular tables do not delete data that is in an editable form. For example, if you have a check box that is initially cleared and can be modified by the user, make that particular field blank and then use the same data transform for the delete action.
Row edits
The hierarchical table is primarily designed to only view data. If you need to make any edits, use a regular table or hierarchical table in legacy mode.
Edits in Edge
The edit icon for each row in the hierarchical table does not work on IE 11 and Edge if the edited UI element contains newer controls like multiselect. In the scenario where both hierarchical table view and edit are required with Edge and IE 11 browsers, maintain a hierarchical table only for the display of information and a separate option for edits. For this functionality, an Edit button can be added to the section, outside the hierarchical table control. By clicking the Edit button, a modal window can be displayed where the user can select a row from the table to edit. Clicking Submit in the modal window should have the logic to update the details of the selected row.
Note: When you have the Edit button at the top of the table, make sure that the table and the button are in the same section, so that the section is refreshed automatically and shows the modified data in the table.
Data test ID for automations
To get the data test ID in the DOM for the user portal, add the data-id access role to the access group of an operator. This access role is useful for creating automation scripts.
Scrollbars
Multiple scrollbars are displayed on the screen to support pagination and usability.
Operations for hierarchical tables
Note that Grid operations for hierarchical tables are limited compared to the options that are available for a table.