Every time Xelence opens a form, it displays the Design tab of that form. This is where you can maintain the UI that your app will display whenever a user accesses that form.
Forms with default layout settings display three main areas:
- Toolbox
- Wrapper
- Right Menu
Toolbox:
The toolbox is located to the left of the Wrapper and to the right of the form tabs. It contains every control available to place in the Wrapper. When you place a Toolbox control, it is not linked to a data element, and it usually requires further configuration for the user to be able to use it.
Click here to learn more about the Toolbox.
Wrapper:
The Wrapper contains the UI that makes up the form. It defines what users will see when they access the form in the app.
You can select any control in the Wrapper by clicking it. Xelence displays the selection as a box around the control. If the control is near another control and it is difficult to select the correct "box", you can select any interior control and use the breadcrumbs at the bottom of the screen to select the desired control. The breadcrumbs display whatever control is currently selected, plus the "path" of the containers that drill down to that control, (but not including the Wrapper itself).
The contents of the Wrapper differ based on whether the form is a lookup, maintenance, or wizard form.
In a maintenance form with default settings, the Wrapper has three main elements:
- Toolbar
- Form body
- Audit panel
Toolbar:
The toolbar is where the form displays the buttons that affect the form as a whole. You can add other buttons, but the default buttons are:
- Save: Saves any changes the user made to the data since the last time the record was saved.
- Refresh: Reverts all controls to the state they were in the last time the record was saved.
Form Body:
This is the meat of the form. It displays all the meaningful form data.
Upon creation, a maintenance form with default settings displays only one section here, with the title of "New Page". You can add as many containers, data tables, or individual fields and buttons as necessary for users to view/process data.
You can also add more sections (collapsibles, sometimes called panels) above and below the original New Page section, if necessary. This helps logically divide the form into categories of data that make it easier for the user to read it.
A common layout for a maintenance form is:
- Parent section: This section displays data to summarize the parent of the record the user is viewing. For example, on an Order Maintenance form, this section could contain information for the Customer the order belongs to, including a link to that Customer record.
- Main section: This section displays data for the form's main object. For example, on an Order Maintenance form, this section would contain information about the order itself.
- Child section: This section displays data for any collections. For example, on a Customer Maintenance form, this section could contain information about each of the Orders belonging to that Customer, including a link to each Order record. A common way to structure this section is to give each child its own tab, and to display each collection as a data table.
Audit Panel:
The audit panel is where the form displays the audit data for the record. By default, a maintenance form's audit information consists of four of the five system columns from the form entity's table: Created By, Created Date, Modified By, and Modified Date (Update Seq is the one that is not included).
Right Menu:
The Right Menu contains the properties that configure the controls in the Wrapper. It is divided into three tabs:
- Entity
- Properties
- Style Editor
Entity Tab:
The Entity tab contains all the data elements available to the form from its linked entity. At the top of the tab, the name of the linked entity displays; click this to view the entity the form is based on.
Under the name, all the attributes and objects/collections (based on entity relationships) display. You can add these data elements to the form in one of three ways:
- Drag the data element where desired. Xelence will add the data element as a default control type based on its entity properties.
- Select the desired location, then double click the data element. Xelence will add it as a default control type.
- Select the desired location, select the data element(s), and click the desired control type option in the control type menu halfway down the tab. Xelence will add the selection as the clicked option. If you click the Add Default Controls option, Xelence will add the selection with default control type.
When you add a control with the Entity tab, it is already linked to the selected data element. Much of the time, it will function for the user without further configuration.
Properties Tab:
The Properties tab displays the properties of the selected Wrapper control (including the Wrapper itself). At the top of the tab, the Configured switch displays. Engage this switch to display only those properties that are not null (are configured).
To use this tab, select the desired control and click the tab. Enter/update the properties as needed for your form's configuration, then save the form.
For each control's property definitions, please return to the relevant overview.
Style Editor Tab:
The Style Editor tab displays the CSS settings of the selected Wrapper control.
To use this tab, select the desired control and click the tab. Enter/update the settings as needed for your form's configuration, then save the form.
This post is part of the Maintenance Form topic. Click here to open the Maintenance Form Overview.
#Forms
#Xelence