View Article

Introduction

A dialog panel is a way to edit a data table that is particularly suited to tables with many columns in use. You can put a small data table on the form, with just enough information to identify unique records, and have a dialog panel with much more information so you don't have to have a wide data table the user has to scroll across to use. The dialog panel pops up in a different window, where the user can view or edit records, including entering data for a new record.

Prerequisites

• The data table must already exist.
• The entity must be configured with delete properties.

Detailed Steps

Step 1. Set the data table's Selection property to One.

Select the data table you want to configure a dialog panel for and update Selection to One.

You need to set Selection to One, because you can only edit one record in the dialog panel at a time.

Step 2. Add a dialog panel to the data table, then update the dialog panel properties.

Select the data table and click the rightmost arrow icon and select Add Dialog Panel.

This will allow the user to open a popup window to either view an existing record or create a new one.

Xelence adds a fully configured dialog panel to the data table. You can also add more controls from the Entity tab the same way you'd add controls to any container. The buttons are automatically configured with the Related Control property.

Like any collapsible control, the dialog panel needs a meaningful ID and Caption.

Step 3. Configure the dialog panel fields.

Xelence adds the dialog panel with default controls. Organize the controls into a layout the user can easily understand.

You can also add fields from the Entity tab. These fields will contain the data for the user to view and enter. Finally, you can remove fields from the dialog panel.

Step 4. Configure the Finish button.

This button saves the data in the panel. It needs a meaningful ID and Caption.

The Related Control property is required for this button to work, but is already automatically configured.

Step 5. Configure the Close button, then click Switch to Data Table.

This button closes the panel without saving the data. It needs a meaningful ID and Caption.

The Related Control property is required for this button to work, but is already automatically configured.

The New and Open buttons are automatically configured with the Related Control and Open in Dialog properties.

Step 6. Configure the New button.

This button opens the panel to create a new data table entry. It needs a meaningful ID and Caption.

The Related Control property is required for this button to work, but is already automatically configured.

Step 7. Configure the Open button.

This button opens an existing data table entry in the panel. It needs a meaningful ID and Caption.

The Related Control property is required for this button to work, but is already automatically configured.

Step 8. Add a Delete button, then update the properties.

Drag the Delete icon from the Toolbox tab to the right of the Open button. This button deletes selected rows from the data table.

This button needs a meaningful ID and Caption, plus the Related Control.

Also, for this button to function properly, make sure delete order is configured on the entity. In this case, that's entOrderDetails.

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?

Earlier, we used to get an empty dialog panel. Now, when we add a dialog panel, we get a configured dialog panel with most of the fields (which are present in the data table) and buttons (Finish popup dialog button, Close popup dialog button, new and open button) added. 

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

#Xelence
#Forms