The Table widget also supports pagination. A paginated table is a table widget that displays data elements from the backend system on different pages in a table. A paginated table can be used when the number of elements are both known or unknown. It can be defined by functional developers without having to develop a pagination operation for every table. One type of pagination operation corresponds to one specific scenario. Table pagination also supports the scenario in which the content of the first page that is retrieved by an initial operation and the pagination operation cannot be called when the table widget loaded.
The dataName property specifies the name of the data element that is used to cache the record in the table that is submitted.
dataNameForList
The dataNameForList property specifies the name of the data, from a UDTT context or a JSON string that contains the records for the table.
isPageable
The isPageable property specifies whether the table is single page table or pageable table. The default value is false. If the value is true, Pagination tab would appear where the user can complete the configuration.
sortEnabled
The sortEnabled property specifies whether the rows on the table can be sorted by a user or not.
If sortEnabled is set to true, starting visibility=hidden would cause problems. You cannot apply these 2 functions together.
nestedSort
The nestedSort property specifies the following methods for sorting table rows:
Nested column sorting
▪ The value of nestedSort property: true (default value)
▪ Description: If you sort column A first and then sort column B, column B is sorted based on the sorting result of column A.
Single column sorting
▪ The value of nestedSort property: false
▪ Description: The sorting result of a column totally depends on the data in this column. The result is not reflected by the sorting result of other columns.
The nestedSort property is available only if the sortEnabled property is set to true.
columnReordering
Indicates whether the columns can be reordered or not. The default value is false.
visibility
Defines how a widget is displayed on a GUI. The following values can be specified for this property:
visible
The widget is displayed on a GUI and users are able to interact with the widget.
hidden
The widget is not displayed on a GUI, but it occupies space on the GUI.
gone
The widget is not displayed on a GUI, and it does not occupy space on the GUI.
hint
A description of the widget that is displayed as a tooltip for a user. This property has multilingual support.
readOnly
To ensure that the Table widget and all the widgets that are contained in the Table widget are read-only, you must set the value of the readOnly property to trueand select Editable in the Details panel of the Columns tab, which is in the Table view of the Properties tab. If you do not select Editable, the widgets that are contained in the Table widget can be edited by a user.
selectionMode
The selectionMode property specifies the number of rows that can be selected by a user. Values that can be specified for the selectionMode property are none, single, and multiple.
selectionRequired
The selectionRequired property specifies whether a user is required to select a record. If the selectionRequired property is set to true and the user does not select a record, an error message displays.
isActionable
The isActionable property specifies whether to take action when a row on the table is double-clicked. The options for this property:
▪ false default value: no action would be ran.
▪ true: if there is an action, the action would be ran. Action tab would appear where the user can complete the configuration.
Generally, double-clicking a cell would enter the editing mode, instead of starting the action if the cell is editable and readOnly property is set false. Thus, it would start the action only when the cell is not editable and readOnly property is set true.
disabled
When the table is disabled, the background is set to be gray, indicating that it is not allowed to do all the operations, such as row selection, column reordering, scrolling, sorting, and editing.
styleClass
The styleClass property specifies the name of the CSS style ( also known as CSS style class) associated with the widget. This property is set by selecting a style from the CSS styles table in the Style tab of the Properties view. If you do not configure the styleClass property, the default style is used instead. For more detailed information, refer to Setting CSS style to widgets.
width
The width property specifies the width of the widget. This property is set in the Appearance tab of the Properties view.
height
The height property specifies the height of the widget. This property is set in the Appearance tab of the Properties view.
frozenColumnNum
The frozenColumnNum property specifies the number of the frozen columns. The value can be only Number type (The default value is 0). The scope must be between 1 to the total number of columns:
▪ less than 1: none of the columns are frozen.
▪ more than the total number: all of the columns are frozen.
▪ Hidden column is not included.
resizable
The resizable property specifies whether the table column can be resized by mouse action. If it is set true (default), users can drag the column side to expand or shrink its size. If it is set false, users cannot change its size.
cellOverflow
The cellOverflow property specifies whether to show the whole text when the length of the text is too long for the cell.
▪ whole: This is the default value. Show the whole text.
▪ ellipsis: Show an ellipsis that is appended to the truncated text.
headerRows
The 'headerRows' property is mandatory. It specifies how many rows are shown as the table header. It is used to support multi-header in a table when it is set to any integer value > 1 (Default = 1).
cellMerge
The 'cellMerge' property specifies which cells in table body are merged.
indirectSelection
This 'indirectSelection' property specifies whether the table can be indirectly selected (with radio button or check box preceding each row) or not. The default value is false.
summary
The summary property is the description of the widget that is displayed as a tooltip.
widgetType
The widgetType property controls whether to use full grid or simple grid table widget. The following values can be specified.
Auto
Default value. The widget type is automatically determined by UDTT according to the table generation rules. If all properties, events, and functions that are used in the table comply with the rules, simple grid table widget is used. If there is at least one property, event, or function that does not comply with the rules, full grid table widget is used.
Uses full grid table widget with all features. This option might have impact to the performance of table widgets. You can use this option for tables that frequently display lots of rows where full grid table widget will all Dojo features might be faster.
This property is the identification of the column.
text
The text property specifies the text that is displayed as the header of the column.
dataName
The dataName property is the name of the data element to which the column is bound. Currently only simple data and record(KColl) are supported.
width
The width property specifies the width of the column.
alignment
The alignment property specifies the alignment of the text in the cells of the table. Three values are available for the alignment property:
Left
Center
Right
The default value is Left.
Visible
The visible property specifies whether the column is visible or not. The default option is checked. If it is unchecked, the column would be hidden and
▪ For auto-sized table, the table would get shrunk. If all columns are hidden, the table would completely disappear.
▪ For fixed-sized table, the table would remain the original size and leave some blanket space on the right. If all columns are hidden, the table would show a blanket layout.
For auto-sized table, the error icon would also disappear. So it is suggested to set fixed size for the table.
Sortable
This property specifies whether
editable
The editable property specifies whether the cells in the table can be edited by a user. If the property is set false, the cell is only for read, and cannot be edited. Its value decides the selection list of widget property.
widget
The widget property is the widget to which the column is bound. Its selection list depends on whether the editable property is true or false. For details, see Widget in Table column.
If a value of true was selected for the isPageable property, the properties that are described below can be configured in the Pagination tab of the Properties view.
Properties that can be configured for the paginated table widget
Property
Description
operationNameForPagination
The operationNameForPagination property specifies the technical operation name for the pagination table.
directPagination
The directPagination property specifies whether the number of pagination table rows is known. The default value is false.
paginationType
The paginationType property specifies the pagination type that is registered in the btt.xml file. Default value is default.
RowsPerPage
The RowsPerPage property specifies the number of rows for each page in pagination table. The default value is 25.
timeout
The timeout property specifies the length of time after which an Ajax request time-out in a pagination table. Default is 500 milliseconds.
paginationWhenLoading
The paginationWhenLoading property specifies pagination or not when first loading the page. The default value is false.
When the value is true, it might cause problems to get focus of other widgets through ECA rules. So do not set focus of other widgets on this condition.
initialInputMapping
The initialInputMapping property specifies the initial page input mapping. This property is enabled when a value of true is specified for the paginationWhenLoading property.
nextInputMapping
The nextInputMapping property specifies the next page input mapping. This property is enabled when a value of false is specified for the directPagination property.
previousInputMapping
The previousInputMapping property specifies the previous page input mapping. This property is enabled when a value of false is specified for the directPagination property.
directInputMapping
The directInputMapping property specifies the direct page input mapping. This property is enabled when a value of true is specified for the directPagination property.
normalOutputMapping
The normalOutputMapping property specifies the normal response output mapping
errorOutputMapping
The errorOutputMapping property specifies the error response output mapping.
The inner data element can be either an IndexedCollection or a KeyedCollection. If the inner data element is a KeyedCollection, the values from each element that are contained in the KeyedCollection are displayed on a row of the table. If the inner data element is an IndexedCollection, the values of the elements that are contained in the IndexedCollection are displayed on a column.
The dataName property specifies the name of a data element that is retrieved from a UDTT context. Data that is entered into the rows of a table is submitted to the data element specified in the dataName property. The data element can be either an IndexedCollection or a KeyedCollection. If single is selected for the selectionMode property, the data element can be a KeyedCollection. If multiple is selected for the selectionMode property, the data element can be an IndexedCollection.
Sometimes, the application requires that the table widget bound with special data items on each row. When the table data is downloaded from the server side, the special data items are loaded with other table data, and the special data items are sent back to the server side when the selected rows are submitted. The difference between the special data items and normal table data is that the special data items are not displayed on the table widget though it can be displayed on the table widget like normal table data; therefore, special data items are called "hidden columns" here. For example, the "hidden columns" might be the key identifier of the rows, which are not displayed on the view but are required for the identification of the selected rows. The data field that corresponds to a "hidden column" must meet the following three conditions:
▪ The data field exists in the keyed collection or indexed collection that is specified in the dataName property.
▪ The data field exists in the indexed collection that is specified in the dataNameForList property.
▪ The data field is not an explicitly declared column.
The UDTT run time handles the data field as a "hidden column" for the table and send the field data to the table widget. The table widget retains the data and then posts it to the server with the selected rows.
For a paginated table, specify following data in the context of a pagination technical operation,
The titleStyle property specifies whether the header row contains a checkbox which determines the select/deselect status of all the checkboxes in the column. There are three options:
▪ text (default value): only text is shown. The title is specified as other widgets by the “Text” property in the standard tab.
▪ checkbox: only a checkbox is shown. Users could select/deselect this checkbox to control all the checkboxes in the column.
▪ both: both checkbox and text are shown.
This only affects the current page, not all the pages in pagination.
alwaysEditable
If true, the checkbox is always available for selection and there is no need to double-click the cell to enable the editable mode. If false, a label is displayed in the default mode and a checkbox is displayed in the editable mode.
TextBox
null
You may set the value of the textbox from the dataName property of this column
If true, the checkbox is always available for selection and there is no need to double-click the cell to enable the editable mode. If false, a label is displayed in the default mode and a checkbox is displayed in the editable mode.
▪ If the editable property is false, the items on the selection list are non-editable:
Widget
Property
Description
Image
null
You may set the location of the image from the dataName property of this column.
LabelFromList
urlForList
The urlForList property specifies the URL of the js file that contains the data of the list of choices that are available for selection on the widget.
Link
Text
specify the text that would be displayed in the column.
dataName
If renderMode is
▪ text, specify the text that would be displayed in the column by data binding. For constant text, this could be empty. The Data Name property has precedence over the text property.
▪ image, specify the image URL extracted from the context.
flowEvent
specify the flow event that will be fired after the column is clicked on.
dataNameForLink
specify the URL where the browser navigates to. The dataNameForLink property has precedence over the flowEvent property
dataNameForRow
specify the data which stores the row of the clicked widget.
dataNameForColumn
specify the data which stores the column of the clicked widget.
newWindow
specify whether to trigger the link in the same browser window. The default value is false, which means there is no pop-up window when the column is clicked on.
tooltip
specify the text that would be displayed when the user places the mouse over the column.
dataNameForTooltip
specify the tooltip by data binding. The dataNameForTooltip property has precedence over the tooltip property.
dataNameForClickable
If the value is null or false, the widget is unclickable and rendered just as normal text or image. If the value is true, the widget is clickable.
renderMode
Available values for renderMode:
▪ text (default value): The widget is rendered as text.
▪ image: the widget is rendered as an image.
Button
Text
specify the text that would be displayed in the column.
dataName
specify the text that would be displayed in the column by data binding. For constant text, this could be empty. The Data Name property has precedence over the text property.
flowEvent
specify the flow event that will be fired after the column is clicked on.
dataNameForLink
specify the URL where the browser navigates to. The dataNameForLink property has precedence over the flowEvent property
dataNameForRow
specify the data which stores the row of the clicked widget.
dataNameForColumn
specify the data which stores the column of the clicked widget.
newWindow
specify whether to trigger the link in the same browser window. The default value is false, which means there is no pop-up window when the column is clicked on.
tooltip
specify the text that would be displayed when the user places the mouse over the column.
dataNameForTooltip
specify the tooltip by data binding. The dataNameForTooltip property has precedence over the tooltip property.
dataNameForClickable
If the value is null or false, the widget is unclickable and rendered just as normal text or image. If the value is true, the widget is clickable.
This property indicates which cell widget is bound with this menu. When the cell widget is clicked, the menu will pop up.
hasCloseButton
This property indicates if there is a close button on the pop-up page. The default value is ‘false’.
leftClickToOpen
This property indicates if the pop-up page is invoked by left mouse key (true) or right mouse key (false). The default value is ‘true’.
position
This property indicates the position of the pop-up page: under the current mouse point (point) or below the current cell (below). The default value is ‘point’.
The toolkit supports only one layer of menu items for each context menu.
Property
Description
ID
This property indicates the identifier for current menu item. When adding a new menu item, a default id with incremental number will be generated automatically. This ID should be unique in one context menu. There will be validation for the global uniqueness of menu item.
Text
This property indicates the content shown in runtime page. When adding a new menu item, a default incremental text will be generated automatically. It provides NLS dialog to choose NLS text from resources. And also, users could also modify the text manually. Note: The text value is linked with the name shown in menu item list.
Type
This property indicates the action type of current menu item. The available options for this property: noAction,link, submit, submit with no data, submit without validation.
options for Type property
Property
Description
noAction
This option indicates there will be no feedback when user clicks menu item. There is no more configuration when type is “noAction”.
link
If this option is selected, the action details could only be set as ‘Launch URL’, and users need to manually input the target URL address. New window. This property indicates whether the response will be shown in a new create page or not. The default value is ‘false”. This property is only available when the action type is set as ‘link’, otherwise, it will be hidden.
submit
This option means the data of selected row will be submitted to server. The menu item may be disabled if there is validation error in current page. The actions for "submit" type are: Change Flow Event, Launch New Flow, and Launch Operation.
submit without validation
This option means the data of selected row will be submitted to server, just like “save” function. The actions for "submit without validation" type are: Change Flow Event, Launch New Flow, and Launch Operation.
submit with no data
This option means the action will only ask to change sever state but there will be no data submit, just like “cancel” function. The actions for "submit with no data" type are: Change Flow Event, Launch New Flow, and Launch Operation.
