View Article

Introduction

A maintenance form is based on one form object, and the columns in that object's table can be easily added and configured from the entity attributes. For ease of navigation, it's often necessary to add columns from the entity's child table or tables so the user can view or edit those values, or use them to navigate elsewhere without having to perform a search.

This example adds a control to display order details to an Order Maintenance screen.

Prerequisites

• The maintenance form you are configuring must already exist.
• Table relationships must be correctly configured in the entity (this configuration is done when the entities are created, but can be edited any time).

Detailed Steps

Step 1. Add a new collapsible control.

To add a collapsible control, drag and drop the Collapsible Control from the toolbox. This example places a data table in this collapsible control.

Step 2. Enter the collapsible control properties, then click OK.

Enter the caption, number of rows, and layout (number of columns in each row) for the panel.

You can also edit the collapsible control's table here. This example puts a collection in this container. It's best to reduce it to one column.

When you change the caption, it appears in the title bar right away. The collapsible ID also automatically updates.

Xelence adds the Collapsible control and updates the ID to match the caption.

Step 3. Add a data table.

Drag and drop the Data Table control from the toolbox. This starts a wizard for configuring the data table.

Step 4. Enter the load details, then click Next.

The details are:

• Load Type: Method that loads the data in the data table. The default method is Query.
• Default Query: If True, the data table uses the default query. Otherwise, you need to enter the Query ID of the query you want to use.
• Child Entity Name: Name of the child entity you are using for the data table data.
• Load in Collection: If True, you can access the columns of the entity's collection.
• Entity Collection: Name of the collection associated with the entity. In this example, the collection is lstOrderDetails.
• Load Mode: Determines whether the way the user opened the form affects the data table. Options are New, Update, and All.
• Lazy Load: If set to True, the application loads the data table only when the user opens the container.

"New" mode means the user created a new record. "Update" means the user opened an existing record. "All" means the data table behaves the same whether the user created or opened a record.

Step 5. Select the columns.

These are the columns whose values you want in the data table.

This step also allows selecting the buttons you want the user to have on the data table to manipulate it. Usually, you skip this step and configure the buttons later; and for now, this data table won't have any buttons.

Step 6. Change the field order, then click Finish.

Select a field and use the arrows to change the order. Up-down is left-right. 

Click the Finish button to close the wizard and place the data table on the form.

You can also change the field order after the data table is on the form. Select a field and right click it to choose moving it to the left or right.

Step 7. Edit the field properties.

This configures the fields with the desired appearance and behavior. This example updates one of the ID fields to not be visible to the user, since ID fields often don't mean anything to users.

You can also add new columns to the data table after it is on the form. Right click the data table and use the menu or drag and drop columns from the collection drop down in the Entity tab.

Step 8. Update the data table properties.

This example updates the Server Side Pagination property to True. This provides faster initial load.

When Server Side Pagination is True, you can enter the Server Pagination Size, which determines the number of records to be loaded per page.

You can only configure the Server Side Pagination property for a data table whose Load Type is Query.

Select the Data Table. In the properties tab, open the General section. Set the Server Side Pagination property to True, if required.

Server Pagination Details section is visible once you set the Pagination property to True. Click the plus icon to configure the pagination size.

Enter the Pagination Size.

Step 9. Save the form.

Then, run the Preview. Xelence displays the form output. You can test your updated settings.

When you have previewed your form, it should look something like this:

What are the improvements over S3 Version 6?

• The Grid has been renamed to Data Table.
• The panel has been renamed to Collapsible Control.
• Server Side Pagination property can be updated for the Data Table.

This post is part of the Maintenance Form topic. Click here to open the Maintenance Form Overview.

#Xelence
#Forms