The term Advanced controls is appliable for form (PXFormView), grid (PXGrid), tab (PXTabItem), and panel (PXPanel) container controls as well as for buttons.
Suppose that you need to customize the Stock Items webpage and that you have divided the customization task into the following steps:
• Add a new tab item onto the webpage.
• Add a PXFormView container control onto the tab and specify the data member for this control. • Add an input UI control onto the added PXFormView container control.
• Add a panel onto the added PXFormView container control. • Add UI controls onto the new panel.
To view the original webpage, navigate to Distribution > Inventory > Manage > Stock Items (see the screenshot below).
| UI Customization | 158
Figure: Viewing the Stock Items webpage before making changes
Add a tab, named, for instance, Relative Positioning Layout (see Adding Items), and then start the next customization step.
Adding a FormView Container Control onto the Tab Item
You add a PXFormView container control onto the created PXTabItem control (that is, onto the new tab) so that you can place the UI controls on the form placeholder and bind it to the specified data member. The Stock Items webpage is open: On the Customization menu, select Open Customization
Project.
On the Select Working Project dialog that appears, select the PriorAdvUI customization project that already exists, and click OK.
The page design mode starts automatically for the previously customized webpage, which is the Stock
Items webpage in this case, because its aspx code had been already modified after adding the tab item.
By using the Advanced Controls designer, you should first add a PXFormView container control: In page design mode (for more information, see Page Design Mode), open the new tab, right-click the yellow area under this tab, select Advanced controls, and then select FormView, as shown in the following screenshot.
| UI Customization | 159
Figure: Adding a PXFormView Container Control onto the new tab item
Right-click the yellow area under the Relative Positioning Layout tab and click Control Tree. In the Aspx Control Tree window that appears, expand the ItemSettings:PXTab and Relative Positioning Layout:PXTabItem nodes, select PXLayoutRule component, click the Remove button to delete this component, type the SkinID property as Transparent for the PXFormView virtual container subnode, and click Apply to Page, as the screenshot below illustrates.
Figure: Adjusting property values for the FormView container control
Right-click the visible part of the added form and select DataMember, as the following screenshot illustrates.
| UI Customization | 160
Figure: Starting to bind the added form to a data view
In the Select data member dialog that appears, click the Magnifier icon; in the lookup window, select the required data view such as ItemCosts, and in the dialog, click OK, as shown in the following screenshot.
Figure: Binding the new form to the ItemCosts data view
Adding a UI Control onto the FormView Container Control
In page design mode, right-click the added form and select Add Input Control, as the following screenshot illustrates.
| UI Customization | 161
Figure: Starting to add an input UI control
In the Create control dialog that appears, select the Data field value (such as LastCost) and the ControlType value (such as NumberEdit) and click OK (see the screenshot below).
Right-click the added UI field and click Control Tree. In the Aspx Control Tree that appears with the LastCost:PXNumberEdit subnode highlighted, click Add and select Add Layout Rule. Select the added PXLayoutRule object and set the StartRow property to True (the property filter condition must be set to Base Props), as the following screenshot illustrates. (For details, see PXLayoutRule Components.) Type S as the ControlSize property value and S as the LabelsWidth property value.
Figure: Adjusting the properties of the PXLayoutRule component
In the Aspx Control Tree, select the ItemCosts:PXFormView low-level container node, clear the check box that precedes the height property and then click Apply to Page, as the following screenshot illustrates. With these settings, at run time the PXFormView container control can calculate height based on the nested content size (that is, based on the sizes of the container controls and input UI controls that will be added onto the PXFormView).
| UI Customization | 162
Figure: Resetting the height property value for the FormView container control
Adding a Panel onto the FormView Container Control
By using the Advanced Controls designer, you should now add a panel onto the previously added form control. While remaining in page design mode, right-click the new form control, select Advanced controls, and then select Panel.
Right-click the added panel and select Control Tree, as shown in the following screenshot.
Figure: Opening the Aspx Control Tree for the added panel
When the Aspx Control Tree appears for the PXPanel node, make sure the LastCost:PXNumberEdit subnode is placed above the PXPanel subnode; clear the check box for the height property, type the Caption property value as Cost Info and set the RenderStyle property value to FieldSet (the property filter condition must be set to Ext Props), and click Apply to Page, as the following screenshot illustrates. With these settings, at run time the PXPanel container control can calculate height, based on the nested content size (that is, based on the sizes of the UI controls that will be added onto the PXPanel).
| UI Customization | 163
Figure: Adjusting the properties of the added panel
We recommend that you use this dynamic adjustment of the height panel property by resetting this property value because the panel height will depend on the sizes (heights) of the UI controls added onto the panel. As a result, the UI controls are being rationally placed on the panel, while the panel is being rationally placed on the appropriate placeholder.
Adding Input UI Controls onto the New Panel
This step is necessary for the check out, how the new panel that contains UI controls is displayed on the webpage.
In page design mode, right-click the added panel and select Add Input Control, as the following screenshot illustrates.
| UI Customization | 164
In the Create control dialog that appears, select the Data field value (such as AvgCost) and the ControlType value (such as NumberEdit) and click OK (see the screenshot below).
Figure: Adding the UI control onto the panel
Create and add onto the panel each of the following UI elements: • MinCost
• MaxCost
Again right-click the PXPanel control and click Control Tree. Expand the PXPanel virtual container node and by using the Up and Down buttons, put subnodes within the PXPanel node in the following order:
• AvgCost • MinCost • MaxCost
In the Aspx Control Tree, select the AvgCost:PXNumberEdit subnode, click Add and select Add Layout Rule. Select the added PXLayoutRule object and set the StartRow property to True (the property filter condition must be set to Base Props), as the following screenshot illustrates. (For details, see PXLayoutRule Components.) Type S as the ControlSize property value and S as the LabelsWidth property value. Click Apply to Page to apply your changes and close the Aspx Control Tree.
Figure: Setting property values for the added PXLayoutRule object
| UI Customization | 165
Now you can see at run time the Last Cost UI field added onto the PXFormView placeholder (added onto the new PXTabItem tab, named Relative Positioning Layout), and three UI controls (Average Cost, Min. Cost, and Max. Cost) added onto the panel, which had been added onto the PXFormView placeholder (see the screenshot below).
Figure: Viewing the added UI controls on the panel at run time
On the Customization menu, select View Customization Manager. In the lower area of the Customization Projects webpage that opens, you can see the new Page-type object, which contains the .aspx code changeset, as the following screenshot illustrates.
Figure: Analyzing the added content of the customization project
On the Customization menu, select View Source Code. On the Page Aspx tab of the Source Code browser, you can see the fragment of the .aspx code, which is highlighted in yellow, as the screenshot below illustrates. This changeset represents the result of the UI customization of the Stock Items webpage.
| UI Customization | 166
Figure: Analyzing the changeset of the .aspx code
Nested Advanced Controls
This topic describes and illustrates how the content of the nested advanced controls and properties of these controls affect to the structure and appearance of a webpage at run time.
The term Advanced controls is appliable for form (PXFormView), grid (PXGrid), tab (PXTabItem), and panel (PXPanel) container controls as well as for buttons. To add an advanced (container) control onto the required area of a webpage, you should right-click this area and select the required item of the Advanced controls sub-menu of the context menu, which you can open in page design mode.
The following cases are described, explained, illustrated, and provided by the necessary instructions you should perform:
• The simplest case, with one transparent PXFormView container control (with an input UI field); you will use this control (with the added input UI field) in each following case as a placeholder of the second container control.
• A PXFormView container control (with caption and with the FieldSet RenderStyle property); you will add this control onto the transparent PXFormView container control.
• A PXFormView container control (with the Simple (borderless) RenderStyle property); by the moment of considering this case, you will have added this control onto the transparent PXFormView container control while performing instructions of the previous case.
• A PXPanel container control (with caption and with the RoundBorder RenderStyle property); you will add this panel instead of the second PXFormView container control onto the transparent PXFormView container control .
• A PXPanel container control with the Simple (borderless) RenderStyle property; by the moment of considering this case, you will have added this panel onto the transparent PXFormView
container control while performing instructions of the previous case.
To check out, how the upper advanced control that contains UI controls is displayed on the webpage at run time, you will add three controls onto each upper advanced control.
| UI Customization | 167
For simplicity, you can name the PXFormView, PXPanel, and PXTabItem controls correspondingly FormView (or form), Panel (or panel), TabItem (or tab item, or simply tab).
Suppose that you have added the Relative Positioning Layout tab item to the Stock Items webpage (as described in Adding Items). To obtain required results, you should carry out all the needed actions (described below) within the PriorAdvUI customization project, which already contains the aspx changeset, which corresponds to the previously created Relative Positioning Layout tab item.
As you can see, the Relative Positioning Layout tab item of the Stock Items webpage will be the
common placeholder, onto which you should add the advanced controls listed above. As the results, you will obtain five layouts with nested container controls, which consist of up to three layers of these controls.
To consider each of the cases listed above, you will perform appropriate adjustments by using Aspx Control Tree. To view results, you will validate and publish the customization project, and then unpublish the project after viewing, make necessary changes to fit the next case, validate and publish, and review the new webpage appearance. You also will have to download and upload the current customization project to rollback to a few steps, when it will be necessary. You will repeatedly perform the most part of instructions that you have already performed in the Adding Advanced Controls topic. Adding the Transparent FormView Container Control
This section includes the same instructions, as includes the first section of the Adding Advanced Controls topic.
The Stock Items webpage is open: On the Customization menu, select Open Customization Project.
You will add a PXFormView container control onto the previously created PXTabItem control (that is, onto the Relative Positioning Layout tab item) to place the UI controls on the form placeholder and bind it to the specified data view as a DataMember.
On the Select Working Project dialog that appears, select the PriorAdvUI customization project that already exists, and click OK. (Otherwise, first create the PriorAdvUI project and perform all instructions of the Adding Items topic to add the Relative Positioning Layout tab item.)
The page design mode starts automatically for the previously customized webpage, which is the Stock
Items webpage in this case, because its aspx code had been already modified after adding the tab item.
By using the Advanced Controls designer, you should first add a PXFormView container control: In page design mode (for more information, see Page Design Mode), open the Relative Positioning Layout tab item, right-click the yellow area under it, select Advanced controls, and then select FormView, as shown in the following screenshot.
| UI Customization | 168
Figure: Adding the first FormView container control onto the tab item
Right-click the yellow area under the Relative Positioning Layout tab and click Control Tree. In the Aspx Control Tree window that appears, expand the ItemSettings:PXTab and Relative Positioning Layout:PXTabItem nodes, select the PXLayoutRule component, click the Remove button to delete this component, type the SkinID property as Transparent for the PXFormView virtual container subnode, and click Apply to Page, as the screenshot below illustrates.
Figure: Adjusting property values for the first FormView container control
Right-click the visible part of the added form and select DataMember, as the following screenshot illustrates.
| UI Customization | 169
Figure: Starting to bind the added form to a data view
In the Select data member dialog that appears, click the Magnifier icon; in the lookup window, select the required data view such as ItemCosts, and in the dialog, click OK, as shown in the following screenshot.
Figure: Binding the new form to the ItemCosts data view
Adding a UI Control onto the First FormView Container Control
This section includes the same instructions, as includes the second section of the Adding Advanced Controls topic. You will also download the archive copy of the current state of this customization project.
In page design mode, right-click the added form and select Add Input Control, as the following screenshot illustrates.
| UI Customization | 170
Figure: Starting to add an input UI control
In the Create control dialog that appears, select Data field (such as LastCost) and ControlType (such as NumberEdit) and click OK.
Right-click the added UI field and click Control Tree. In the Aspx Control Tree that appears with the LastCost:PXNumberEdit subnode highlighted, click Add and select Add Layout Rule. Select the added PXLayoutRule object and set the StartRow property to True (the property filter condition must be set to Base Props), as the following screenshot illustrates. (For details, see PXLayoutRule Components.) Type S as the ControlSize property value and S as the LabelsWidth property value.
Figure: Adjusting the properties of the PXLayoutRule component
In the Aspx Control Tree, select the ItemCosts:PXFormView low-level container node, clear the check box that precedes the height property and then click Apply to Page, as the following screenshot illustrates. With these settings, at run time the PXFormView container control can calculate height based on the nested content size (that is, based on the sizes of the container controls and input UI controls that will be added onto the PXFormView).
| UI Customization | 171
Figure: Resetting the height property value for the first FormView container control
Validate and publish the project, close it, open the Relative Positioning Layout tab of the Stock Items webpage, and check out new view of the tab.
Before performing next steps, you should download the archive copy of the PriorAdvUI customization project.
To download the archive copy of the current customization project, do the following: • On the Customization menu, click View Customization Manager.
• In the Customization Projects webpage that appears, select the PriorAdvUI project name (if it is still not selected) and click the Get Package button on the form toolbar.
• In the Opening PriorAdvUI.zip dialog that appears, select Save File and click OK, as the following screenshot illustrates.
| UI Customization | 172
Figure: Downloading the archive copy of the current customization project
• In the Enter name of file to save to window that appears, navigate to the required folder and click Save, keeping the file name as it is by default (such as PriorAdvUI.zip file)
You will need this copy later, when you start to perform actions of the Adding the Panel onto the First FormView Container Control section below.
Adding the Second FormView Container Control with the Fieldset RenderStyle
This section includes the instructions similar to those in the third section of the Adding Advanced Controls topic.
By using the Advanced Controls designer, you should now add the second FormView container control onto the previously added FormView control.
While remaining in page design mode, right-click the new form control, select Advanced controls, and then select FormView.
Right-click the added form.
When the Aspx Control Tree appears for the second (low-level) PXFormView node, clear the check box for the height property, type the Caption property value as Cost Info, define the DataMember name as ItemCosts, set the RenderStyle property value to Fieldset (the property filter condition must be set to Ext Props), and click Apply to Page, as the following screenshot illustrates.
| UI Customization | 173
Figure: Adjusting the properties of the second FormView container control
Both FormView container controls are bound to the same data view (value of the DataMember property) for the training purpose only. As a rule, each container control is added onto a webpage to be bound with a different data view.
Adding UI Controls onto the Second FormView Container Control
This section includes the instructions similar to those in the fourth section of the Adding Advanced Controls topic.
This step is necessary for the check out, how the new form that contains UI controls is displayed on the webpage.
In page design mode, right-click the added form and select Add Input Control.
In the Create control dialog that appears, select Data field (such as AvgCost) and ControlType (such as NumberEdit) and click OK (see the screenshot below).
Figure: Adding the UI control onto the panel
Create and add onto the second (low-level) form container the following UI elements: • MinCost
• MaxCost
Again right-click the added form and click Control Tree. Expand the added second form node and by using the Up and Down buttons, put subnodes within the PXFormView node in the following order:
• AvgCost • MinCost • MaxCost
| UI Customization | 174
In the Aspx Control Tree, select the AvgCost:PXNumberEdit subnode, click Add and select Add Layout Rule. Select the added PXLayoutRule object and set the StartRow property to True (the property filter condition must be set to Base Props), as the following screenshot illustrates. Type S as the ControlSize property value and S as the LabelsWidth property value. Click Apply to Page to apply your changes and close the Aspx Control Tree.
Figure: Setting property values for the added PXLayoutRule object
You have obtained two additional placeholders with input UI controls, both based on the PXFormView container controls, the first of which has the Transparent value of the SkinID property.
Validate and publish the project, close it, and open the Relative Positioning Layout tab of the Stock Items webpage.
Now you can see at run time the Last Cost UI field added onto the first PXFormView placeholder