Generating an XUI page from context data

About this task

To accelerate the development of XUI pages, you can generate XUI pages by associating the data elements from a context of an operation or a flow to UI widgets through the WebSphere® Multichannel Bank Transformation Toolkit Transaction editor.
Note: Data elements are associated to specific UI widgets by default; for example, a field data element is associated to a Text widget by default, and an iColl data element is associated to a Table widget by default. You can change and specify the UI widget that is associated to a data element by using the Type list in the Data tab of the Transaction editor as shown in Figure 1, or by using the "View generation from data" window as described in step 9 of the procedure in this topic.
Figure 1. Modifying the UI widget that is associated to a kColl data element in the Data tab of the Transaction editor.
Modifying the UI widget that is associated to a kColl data element in the Data tab of the Transaction editor.

Procedure

To generate an XUI page by associating the data elements from the context of an operation or a flow to UI widgets, do the following steps:

  1. Open the operation or the flow file that contains the data elements that you are using to generate the XUI file.
  2. In the Transaction Dashboard, double-click the Derive that is located between Context and User Interface. The "View generation from data" window opens.
    Note: If you are using the BTT perspective to generate the XUI page, you can right-click the operation or flow file in the Project Explorer view, and then click Generate view to open the "View generation from data" window.
  3. In the "Select the parent folder" pane of the "View generation from data" window, select the folder in which you want to save the XUI file that is generated.
  4. In the File name field, enter a name for the XUI file.
  5. Optional: From the Template list, select the template that you want to use to generate the XUI file.
  6. Click Next.
  7. From the Context list, select the data elements that you want to include as UI elements in the XUI file, and then click Add.
    Note: The data elements that are available for selection in the Context list are the data elements from the context that is bound to the flow or operation. If you want to associate data elements from a different context to UI elements, you must change the context that is bound to the flow or operation. For information on how to bind a context to a flow, see Binding a context data to a transaction flow.
  8. Click Next.
    Note: If you click Finish, the XUI page generates and displays. If you did not specify the UI widgets that you want to associate to the data elements, the UI widgets that are associated to the data elements by default are created in the XUI page. To specify the UI widget that you want to associate to a data element, click Next instead of Finish, and proceed to step 9.
  9. From the Data Element list, select a data element to modify the UI widget that it is associated to and to modify the properties of the UI widget. In the Label field, specify the text that is displayed on the label next to the UI widget on the XUI page. Click Finish.
    The XUI page generates and displays.