The Table widget provides the ability to display data in a table.
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, and 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 has already been retrieved by an initial operation and the pagination operation should not be called when loading the table widget.
Property | Description |
---|---|
id | The id is the identifier for the widget. |
dataName | The dataName property specifies the name of the data element that is used to cache the record in the table that is submitted. For more information, please refer to Data binding. |
dataNameForList | The dataNameForList property specifies the name of the data, from a WebSphere® Multichannel Bank Transformation Toolkit context or a JSON string, that contains the records for the table. For more information, please refer to Data binding. |
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 could complete the configuration. Please refer to Table 3. |
sortEnabled | The sortEnabled property specifies whether the
rows on the table can be sorted by a user. Note: If sortEnabled is
set true, invoking visibility=hidden would cause problems. Please
do not apply the two fuctions at one time.
|
columnReordering | The columnReordering property specifies whether the order in which the columns of the table are displayed can be changed by a user. The default value is false. |
visibility | The visibility property
defines how a widget is displayed on a GUI. The following values can
be specified for this property:
|
hint | The hint is a description of the widget that is displayed as a tooltip for a user. The hint property has multilingual support. |
readOnly | The readOnly property is an expert-level property,
which means that it is available for use in the XUI editor only if
the XUI editor is configured to display expert properties. If you
select a value of true for the readOnly property,
the widget is displayed on a GUI but a user cannot interact with it.
If a widget has the value of its readOnly property set to true and
the value of its disabled property set to false,
the data of the widget is taken into account during form submission.
The default value for the readOnly property is false. Note: To
ensure that the Table widget and all the widgets contained in the
Table widget are read-only, you must both set the value of the readOnly
property to true and select the Editable check
box in the Details panel of the Columns tab,
which is in the Table view of the Properties tab.
If you do not select the Editable check box,
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 the action
when a row on the table is double-clicked on. The options for this
property:
|
disabled | Disabled elements
cannot have focus, do not receive or fire mouse events, cannot receive
user input. If you select a value of true for the
disabled property, the widget is displayed on a GUI but a user cannot
interact with it. Data contained in a disabled widget is not processed
when the form is submitted. The default value for the disabled property
is false. Note: 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. |
Property | Description |
---|---|
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 we only support simple data and record(KColl). |
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:
|
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
Note: For auto-sized table, the error icon would also disappear.
So it is suggested to set fixed size for the table.
|
editable | The editable property specifies whether the cells in the table can be edited by a user. If the property is setfalse, 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 is depending on whether the editable property istrue or false. For details, please refer to Available widgets for selection. |
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 times 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. |
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 data that is specified in the dataNameForList property must be an IndexedCollection from the WebSphere Multichannel Bank Transformation Toolkit context hierarchy.
For more detailed information about data binding, you can see: Binding data to a table widget
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 WebSphere Multichannel Bank Transformation Toolkit context. Data that are entered into the rows of a table are 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 should be a KeyedCollection. If multiple is selected for the selectionMode property, the data element should be an IndexedCollection.
<kColl id="pageRetrieverData" dynamic="false"> <field id="start" value="0"/> <field id="count" value="15"/> <field id="totalRowNumber" value="101"/> <field id="enableNext" value="true"/> <field id="enablePrevious" value="false"/> <field id="errMsg"/> <field id="sort"/> <field id="rowsPerPage" value="25"/> <field id="pageNumber" value="1"/> <field id="pageEvent"/> <kColl id="queryConditions" dynamic="false"> <field id="aFilter" value="%"/> <field id="bFilter" value="0"/> </kColl> <refData refId="item"/> <iColl id="items"> <refData refId="item"/> </iColl> </kColl> <!—the inner data in KeyedCollection item are the data column for the pagination table.--> <kColl id="item"> <field id="index" value="1"/> <field id="gender" value="male"/> … </kColl>
<kColl id="paginationData"> <field id="table01_totalRowNumber" value="100"/> <field id="table01_enableNext" value="true"/> <field id="table01_enablePrevious" value="true"/> <field id="table01_errMsg" value="no msg"/> <field id="table01_rowsPerPage" value="15"/> <field id="table01_pageEvent"/> <field id="table01_pageNumber" value="1"/> </kColl>
Event | Description |
---|---|
onClick | Is fired when the left mouse button is clicked. |
onFocus | Is fired when the widget receives focus because the user moves the mouse pointer over the widget. |
onBlur | Is fired when the widget does not receive focus, or when the user clicks outside the widget, or when the widget is hidden. |
onKeyDown | Is fired when a keyboard key is pressed. |
onKeyUp | Is fired when a keyboard key is released. |
onKeyPress | Is fired when a keyboard key is pressed or held down. |
onMouseDown | Is fired when a mouse button is clicked. |
onMouseUp | Is fired when a mouse button is released |
onMouseEnter | Is fired when the mouse pointer moves over the widget. |
onMouseLeave | Is fired when the mouse pointer moves out of the widget. |
onMouseMove | Is fired when the mouse pointer moves over nodes that are contained in the widget. |
onSelected | Is fired when a row on the table is selected. |
onRowClick | Is fired when a row on the table is clicked on. Note: Do not
use onRowDblClick at the same time.
|
onRowDblClick | Is fired when a row on the table is double-clicked on. Note: Do
not use onRowClick at the same time.
|
onCellEdit | Is fired when the cell enters the edit state. |