This task is a sample of how to create and configure a paginated table in an XUI page.
To create a paginated table, the data that is required for the table must first be created. The steps that must be performed to create the data that is required for a paginated table are also described in this task.
To create and configure a paginated table in an XUI page
1 Create a UDTT Web Project named “PaginationHelloWorldWeb” in EAR project “PaginationHelloWorldEAR”.
Define the data for the paginated table in a flow context.
1 In the UDTT Project Explorer view of the UDTT perspective, expand PaginationHelloWorldWeb > Flows, and then click sampleFlow.
2 The sampleFlow flow is opened in the Transaction editor.
3 In the Data tab of the sampleFlow flow that is now opened in the Transaction editor, right-click in the Data panel and click New Child > record. In the id field of the Detailed Information panel, enter tableRow.
4 In the Data panel, right-click the tableRow KColl, and then click New Child > field to create a child field element. In the id field of the Detailed Information panel for the child field element, enter name.
5 In the Data panel, right-click the tableRow KColl, and then click New Child > field to create a second child field element. In the id field of the Detailed Information panel of this second child field element, enter address.
6 Right-click in the Data panel, and click New Child > list to create a list. In id field of the Detailed Information panel for the list, enter tableData.
7 In the Data panel, right-click tableData iColl, and then click New Child > refData. In the RefId field of the Detailed Information panel of the refData element, select tableRow.
8 In the Data panel, right-click the sampleFlowKColl, and then create two child refData elements. In the RefId field of the Detailed Information panel, select tableData for one refData element, and then select tableRow for the second refData element.
9 Save the sampleFlow file.
Create a paginated table in an XUI page.
1 In the UDTT Project Explorer, expand PaginationHelloWorldWeb > Views, and then click finalPage to open the finalPage view in the XUI editor.
2 In the finalPage view, drag a table widget from the Palette view to the container in the finalPage view.
Specify properties for the table widget that is in the finalPage view.
1 In the Properties view of the table widget, click the Properties tab.
2 In the Properties tab, enter table01 as the value of the id property.
3 For the dataName property, select tableRow as the value.
4 For the dataNameForList property, select tableData as the value.
5 For the isPageable property, select true.
The Pagination tab in the Properties view of the table widget is enabled.
6 In the Columns tab of the Properties view of the table widget, create two columns for the paginated table. Enter name as the header of the first column, and enter address as the header of the second column.
Define pagination data for the table01 table widget in the finalPage view
1 Open the sampleFlow flow in the Transaction editor, and click the Data tab.
2 Right-click in the Data panel of the Data tab, and click New Child > record.
3 In the id field of the Detailed Information panel of the kColl, enter paginationData.
4 Define the following field elements as children of the paginationData kColl:
table01_totalRowNumber
table01_enableNext
table01_enablePrevious
table01_errMsg
table01_rowsPerPage
table01_pageEvent
table01_pageNumber
5 In the Data panel of the sampleFlow flow, right-click the sampleFlowKColl kColl and then click New Child > refData. In the RefId field of the Detailed Information panel of the refData element, select paginationData.
The data in the Data tab of the sampleFlow flow should now be defined as shown here:
Specify the pagination properties for the paginated table that is in the finalPage view
1 In the Properties view of the table01 table widget, click the Pagination tab.
2 For the operationNameForPagination property, select PaginationBusinessOp.
The sample PaginationBusinessOp business operation must first be created before it is available to be selected for the operationNameForPagination property. For information on how to create the sample PaginationBusinessOp operation by extending a business operation for table pagination, see Extending a business operation for a paginated table sample.
▪ For the directPagination property, select false.
▪ For the paginationType property, select default.
3 Specify data mappings for the paginated table to define how the sampleFlow context data is mapped to the PaginationBusinessOp business operation context data.
For more information on data mapping between flow context data and business operation context data in a table pagination request, see Table pagination request handling.
4 For the nextInputMapping and the previousInputMapping properties in the Pagination tab of the Properties view, click the Browse icon in the Value column to map the context data of the sampleFlow flow to the context data of the PaginationBusinessOp business operation.
5 For the normalOutputMapping property in the Pagination tab, click the Browse icon in the Value column to map the context data of the sampleFlow flow to the context data of the PaginationBusinessOp business operation.
6 For the errorOutputMapping property in the Pagination tab, click the Browse icon in the Value column to map the error message data from the data context of the PaginationBusinessOp business operation to the error message data from the context data of the sampleFlow flow.
7 Save XUI page, and then publish the project in WAS and run in a browser:
