Adding a paginated table widget sample

About this task

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.

For an overview of table pagination and information on the architecture of table pagination for WebSphere® Multichannel Bank Transformation Toolkit, see Table pagination overview and Table pagination architecture. For detailed information on how a table pagination request is handled, see Table pagination request handling.

Procedure

To create and configure a paginated table in an XUI page, do the following steps:

  1. Create a BTT Web Project named “PaginationHelloWorldWeb” in EAR project “PaginationHelloWorldEAR”.
  2. Define the data for the paginated table in a flow context.
    1. In the BTT Project Explorer view of the BTT perspective, expand PaginationHelloWorldWeb > Flows, and then click sampleFlow. The sampleFlow flow is opened in the Transaction editor.
    2. 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 > KColl. In the id field of the Detailed Information panel, enter tableRow.
    3. 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.
    4. 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.
    5. Right-click in the Data panel, and click iColl to create an iColl. In id field of the Detailed Information panel for the iColl, enter tableData.
    6. 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.
    7. 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.
    8. Save the sampleFlow file.
  3. Create a paginated table in an XUI page.
    1. In the BTT 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.
  4. 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.
  5. 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.
  6. 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 > KColl.
    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:
      <kColl id="sampleFlowKColl" dynamic="true">
      		<refData refId="paginationData"/>
      		<refData refId="tableRow"/>
      		<refData refId="tableData"/>
      	</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>
      
      	<kColl id="tableRow">
      		<field id="name"/>
      		<field id="address"/>
      	</kColl>
      
      	<iColl id="tableData">
      		<refData refId="tableRow"/>
      	</iColl>
  7. 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.
      Note: 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.
    3. For the directPagination property, select false.
    4. For the paginationType property, select default.
  8. Specify data mappings for the paginated table to define how the sampleFlow context data is mapped to the PaginationBusinessOp business operation context data.
    Note: 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.
    1. 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.
    2. 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.
    3. 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.
  9. Save XUI page, and then publish the project in WAS and run in a browser: http://localhost:9080/PaginationHelloWorldWeb/EstablishSession The paginated table is displayed in the browser.
    Figure 1. A paginated table that is displayed in a browser

Extending a business operation for a paginated table sample

This section provides a sample of how to extend a business operation for a paginated table. After the business operation for a paginated table is created, the business operation is available for selection for the operationNameForPagination property in the Pagination tab of the Properties view.

Procedure

To extend a business operation for a paginated table, do the following steps:

  1. Create a new .operation file, and in the Filename field, enter PaginationBusinessOp.
  2. In the Data tab of the PaginationBusinessOp operation file, create data elements.
    1. Create the following two root kColl data elements:
      • pageRetrieverData
      • item
    2. For the pageRetrieverData root kColl, create the following field data elements as child elements:
      • start
      • count
      • totalRowNumber
      • enableNext
      • enablePrevious
      • errMsg
      • sort
      • rowsPerPage
      • pageNumber
      • pageEvent
    3. For the pageRetrieverData root kColl, create a refData element as a child element. In the RefId field for the refData element, select item.
    4. For the pageRetrieverData root kColl, create an iColl element as a child element. In the id field for the iColl, enter items.
    5. For the items child iColl, create a refData element as a child element. In the RefId field for the refData element, select item.
    6. For the item root kColl, create the following two field data elements as child elements:
      • name
      • address
    The structure of the data for the PaginationBusinessOp operation is shown here:
    <context id="pageRetrieverCtx" type="op">
    		<refKColl refId="pageRetrieverData"/>
    	</context>
    
    	<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"/>
    		<refData refId="item"/>
    		<iColl id="items">
    			<refData refId="item"/>
    		</iColl>
    	</kColl>
    
    	<kColl id="item">
    		<field id="name" value="1"/>
    		<field id="address" value="a"/>
    	</kColl>
  3. Set the pagination table control logic in the business operation. For example:
    IndexedCollection tableData = (IndexedCollection) this.getContext().getKeyedCollection().getElementAt("items");
    	  	tableData.removeAll();
    	  	Context ctx = getContext();
    
    	  		int size = Integer.parseInt(ctx.getValueAt("rowsPerPage").toString());
    	  		int pageNumber = Integer.parseInt(ctx.getValueAt("pageNumber").toString());
    	  		if (ctx.getValueAt("pageEvent") != null) {
    	  			if ("next".equalsIgnoreCase(ctx.getValueAt("pageEvent").toString())) {
    	  				pageNumber++;
    	  			} else {
    	  				pageNumber--;
    	  			}
    	  		}
    	  		for (int i = 0; i < size; i++) {
    
    	  			  KeyedCollection tableKColl = (KeyedCollection)   tableData.createElement(false);
    	  			tableKColl.setValueAt("name", "BTT"+rand.nextInt());
                         tableKColl.setValueAt("address", "CDL"+rand.nextInt());
    				   tableData.addElement(tableKColl);
    	  		}
    	  		int total = Integer.parseInt(ctx.getValueAt("totalRowNumber").toString());
    
    	  		int pageSize = total / size;
    	  		if (total % size > 0) {
    	  			pageSize++;
    	  		}
    
    	  		ctx.setValueAt("totalRowNumber", total);
    	  		ctx.setValueAt("pageNumber", pageNumber);
    			
    			if (pageNumber <= 1) {
    				ctx.setValueAt("enableNext", "true");
    				ctx.setValueAt("enablePrevious", "false");
    			} else if (pageNumber == pageSize) {
    				ctx.setValueAt("enableNext", "false");
    				ctx.setValueAt("enablePrevious", "true");
    			} else {
    				ctx.setValueAt("enableNext", "true");
    				ctx.setValueAt("enablePrevious", "true");
    			}
    	}