The following underlying topics describe the use of the PXLayoutRule component for UI customization: • Placing UI Elements in Multiple Rows and Columns and Widening these Elements
• Setting Label Width and Aligning UI Elements Horizontally • Creating a Group of UI Elements and Hiding Their Labels • Creating Nested Input Controls
• Setting Widths and Sizes of UI Elements Introduction
The PXLayoutRule component, which you access from the Aspx Control Tree, facilitates relative positioning layout. You use relative positioning layout to adjust the UI within a data record area in the following ways:
• Placing UI controls in multiple columns to uniformly distribute them on the form or tab area of a page
• Spanning UI controls across multiple columns
• Merging UI controls into one row to align them horizontally • Adjusting the widths of controls and labels
• Hiding the labels of controls
• Grouping UI controls for users' convenience
In this guide, we use the term data record area to describe a form or tab webpage area, as well as the form area displayed within a grid in FormEdit mode. A data record represents one record of the recordset obtained from the business logic controller (BLC, also referred to as a graph) after retrieving the data; the recordset contains a record if a form or tab is bound to the data view, or a set of records if a grid is bound to the data view. The record displayed on a data record area includes both the main data access class (DAC) object and the joined DAC objects. The data record area is generally used to display the field values of a record; however, if it is represented by a form or tab, the area can contain nested form or grid areas that are used to display field values of a record or multiple related records. Nested forms or grids displayed in FormEdit mode also represent a data record area. Because panels or groups are always placed on a form, they are always contained and displayed within a data record area.
Dynamic Behavior of the UI Controls' Relative Positioning Layout
Each data record area consists of rows and columns (not to be confused with rows and columns of a grid). While working with a webpage on different devices, the user can get different sizes of the window, which can be named a parent area. If the parent area cannot fit all the columns of UI controls, the columns are moved down to the left border of the parent area and arranged horizontally to fit the parent area size. (If any of the moved columns cannot fit the parent area, the columns are moved down to the left border again.)
Hence, at run time, UI controls are dynamically arranged within every separate data record area (see the definition of this term in the previous paragraph). The following examples illustrate the dynamic behavior of the relative positioning layout of UI controls:
| UI Customization | 130
• The size of the parent area: UI controls are displayed within the number of columns that fit the parent area size. If the next column of controls or the next UI control does not fit the parent area size, it is displayed underneath the visible controls contained within the current row. (Compare the first and second screenshots below.)
Figure: Viewing two columns on the tab
Figure: Viewing one common column on the tab
• The visibility of UI controls: If a UI control is hidden, the controls are displayed in the same order as you'd specified, but there are no spaces representing the hidden UI controls. To see this,
| UI Customization | 131
compare the previous screenshot (which has the Search Keywords UI field) and the following one (which does not). Notice in the following screenshot that all the controls that had been placed under Search Keywords, which has been adjusted as hidden, have been dynamically moved up.
Figure: Viewing one common column on the tab after the UI field has been hidden
Prerequisites
First you should upload the AdvUI customization project with its primary content, from the AdvUI.zip archive file.
To upload the customization project from the archive file perform the following actions:
1. Start your application instance and navigate to System > Customization > Manage > Customization Projects and on the form area of the Customization Projects webpage, click From File (see item 1 in the following screenshot).
Alternatively, you can navigate to System > Customization > Process > Publish
Customization and click Open From File.
2. In the Open Package dialog that appears, click Browse (item 2).
3. In the File Upload window that appears, select the required deployment zip package file, AdvUI.zip, shown as item 3.
4. Click Open (item 4) to return to the Open Package dialog.
| UI Customization | 132
Figure: Uploading the deployment package by using the Customization Projects webpage
6. After the project has been uploaded, click Validate and Publish to publish the current state of the customization project (see the screenshot below).
If you have any customization projects applied, before publishing the AdvUI customization project select Undo Publish on the Customization menu.
| UI Customization | 133