You can add widgets to a web page by dragging content to the Design surface of the Rich UI editor. The drag-and-drop and subsequent interaction with the editor updates the source code for the Rich UI handler that you are developing.
By default, the widget palette is at the right of the editor, and the Data view is at the lower left of the workbench.
In this lesson, you create a Rich UI Handler and add a data grid to display all rows in the database. Later, you will add a grid layout to display the fields in a selected record.
To create the handler:
PaymentFileMaintenance
handlers

EGL automatically created a grid layout as your initial UI. By default, this widget has four rows and three columns. Compare this layout with the sketch in lesson 1, which uses only four cells.

A later step demonstrates a different way to change the number of rows and columns in a grid layout.
The main layout of this Rich UI handler now has a first row, where the handler will display two sets of buttons, and a second row, where the handler will display the following content: on the left, a list of records, and on the right, a layout for displaying the details of one record.To create the data grid:

allPayments

allPayments paymentRec[0];





allPayments_ui DataGrid {
layoutData = new GridLayoutData
{row = 2, column = 1
verticalAlignment = GridLayoutLib.VALIGN_TOP},
columns =[
new DataGridColumn{name = "category",
displayName = "Type",
width = 90},
new DataGridColumn{name = "description",
displayName = "Description",
width = 120},
new DataGridColumn{name = "amount",
displayName = "Amount due",
width = 90}
],
data = allPayments as any[],
selectionMode = DataGridLib.SINGLE_SELECTION};
function start()
allPayments_ui.data =
[
new paymentRec{category = 1, description = "test01", amount = 100.00},
new paymentRec{category = 2, description = "test02", amount = 200.00},
new paymentRec{category = 3, description = "test03", amount = 300.00}
]; end

To create the Add, Delete, and Sample buttons on the Design surface:
buttonLayout


addButton
addRow
deleteButton
deleteRow

To create the variable:
selectedPayment

selectedPayment paymentRec;
To create the grid layout:

editPane
Click OK.

| Default name | Revised name |
|---|---|
| paymentID | Key: |
| category | Category: |
| description | Description: |
| amount | Amount: |
| fixedPayment | Fixed pmt: |
| dueDate | Due date: |
| payeeName | Payee: |
| payeeAddress1 | Address 1: |
| payeeAddress2 | Address 2: |
Here are the settings:





To add the Clear and Save buttons:
detailButtonLayout


In the next lesson, you create the service that will access the database.