View Article

Introduction

This is a way for a user to edit a data table: you can put a collapsible control on the form, from which the user can add new records or edit existing records.

Prerequisites

The data table must already exist.

Detailed Steps

Step 1. Select the collapsible.

Select the collapsible control that contains the data table you're configuring.

Step 2. Add a collapsible control.

Drag and drop the collapsible control from the Toolbox to wherever you want it: usually adjacent to the data table in some direction. For this example, the collapsible control will be below the data table. You may need to insert a row.

The data table in this case is grvLstOrderDetails. You can update the caption and the number of rows and columns in each row for the collapsible control. Xelence will automatically update the Collapsible Control ID as you update the caption.

Step 3. Add controls to the collapsible control cells.

Drag and drop the textboxes and drop downs from the Entity tab on the right panel.

You may need to insert more rows as required.

Step 4. Update the properties for each control.

You are now going to update the properties of all the controls so the application can retrieve and set values for them. The important properties are:

• ID: Unique ID of the control type.
• Entity Field: Identifies the entity field that is to be mapped.
• Related Data Table: The control has to be linked with the specific data table whose data it edits.

Step 5. Move the controls, if desired.

Organize the controls into a layout the user can easily understand.

Step 6. Edit the collapsible control layout.

If necessary, add a row below the fields. You are going to put buttons in this row. You can also change the layout of the row added, if desired.

Step 7. Add a DetailView Update button to the collapsible control.

Drag the DetailView Update Button icon to an empty cell in the last row.

This button adds a new row to the data table.

Step 8. Update the button properties.

The properties to update are:

• ID: Programmatic ID of the button.
• Caption: Button text the user sees. From their perspective, this is the name of the button.
• Related Control: Data table this button affects. In this case, that's grvLstOrderDetails.
• Add: If set to True, the button will act as an add new record button. If False, the button will act like an update button. This property will be True for this button.

Step 9. Add another DetailView Update button to the collapsible control.

This button will act like an update button for the collapsible control.

Step 10. Update the button properties.

The rest of the properties will be the same as the previous DetailView Update button, except the Add property will be False.

Step 11. Add a DetailView Select button above the data table.

Drag and drop the DetailView Select button to the right of the Delete button that is above the grvLstOrderDetails data table.

This button is used to select a record from the data table that is to be updated.

Step 12. Update the button properties.

The button needs the Related Control, and you have to make it invisible, as you will link it with a label on the data table.

You are making the button invisible so a user can't select multiple records and try to open them in the collapsible control for editing. That would be impossible: you can only edit one record in the collapsible control at a time.

As an alternative to making the button invisible, you could change the data table's Selection property so that users can't select more than one record and leave the button visible.

Step 13. Open the label properties.

Select whichever label you want the user to click to edit the row. This example uses the leftmost label, Orderdetailid.

Step 14. Update the label properties.

The label you want to link needs the Related Control of the Select button. You must also make it linkable and visible.

Step 15. If desired, add a dynamic caption for the collapsible control.

This property enables the caption to be updated dynamically.

You can select any control (Edit Order Details collapsible control) and update the caption field with the desired control (Order ID) that will be visible during runtime.

Step 16. 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.

The details of the data table can now be updated using the collapsible control. Click the Orderdetailid link, modify details in the editable collapsible control, and click Update.

The Update button updates the data table instantly. However, you have to save the record in order to display the changes the next time someone opens it.

What are the improvements over S3 Version 6?

Previously, we had two separate buttons for Grid Add Item and Grid Update Item. Now, instead of two different buttons, a single button DetailView Update is available. It acts as a multifunction button for add/ update and it behaves as per property values set. Dynamic caption feature is also added for the collapsible control .

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

#Xelence
#Forms