Harness and Section forms
|
A cell in a layout or harness can contain a Link control (formerly called a URL control), which invokes one or more actions when the user clicks or hovers the mouse pointer over the text link. The Icon/Image and Button controls share most of the same capabilities — the differences are mainly in their presentation.
You can precede and follow a Link cell with static text in Label cells, achieving a presentation similar to an embedded link in a Web page:
You can recompute the interest due on this loan.
Configure styles for links using the Skin rule. See Skin form — Components tab — Controls — Links.
As a best practice, use the Link control pxLink, rather than the deprecated URL control. See About the V5 URL control.
If a section contains a deprecated (URL) control, or another control for which there is an improved alternative, such as (pxLink), a warning displays, along with an Update Controls button. Click Update Controls to automatically update deprecated controls in the section. Automatic update is not available for all controls; see Upgrading deprecated and outdated controls on the PDN.
If you have a use case that requires a specific configuration of a standard control, such as a link, you can make a copy of the control and save it using a new name.
For example, if you use a Yes/No radio button frequently, you can save a copy of pxRadioButton as pxYesNoRadioButton. Configure pxYesNoRadioButton to display Yes/No radio buttons, and then use pxYesNoRadioButton wherever you'd like it. Do not modify the Control Modes and UI Element settings.
The UI Gallery landing page contains a working sample. To view and interact with the sample, select > User Interface > UI Gallery. In the Components area, select Link.
1. Drag and drop the Link control
Click the down arrow () in the Basic control group () and select the Link control () Drag the control to the desired cell. When the pointer changes shape to indicate that a single cell is selected, release the mouse button to drop the control.
If the cell is not empty, the dropped control replaces the current contents of the cell. Click () to display the Cell Properties panel.
Complete the Cell Properties panel that appears. If the panel is pinned (), the wireframe presentation on the rule form changes immediately to reflect of your inputs. If the panel is not pinned (), click Apply to apply your inputs.
2. Complete the Cell Properties panel — Top fields
Field |
Description |
(Appears only when this field is in a section included within the current open rule.) Click to open the section that immediately contains the field. |
|
Control |
The default pxLink control appears. The Customizing the controlThe Link's default parameters represent the basic configuration. However, you will need to specify the text in the link and the action or actions that will execute when the user clicks or hovers the mouse pointer over the text. See Control Form — Completing the Control tab for descriptions of the available parameters and how to define behaviors. For example, you can configure the control to refresh a section or display a new harness. In addition, you may want to:
|
3. Complete the Cell Properties panel — General tab
Complete the General tab.
Field |
Description |
Visible |
Optional. Select to determine when the link appears.
|
Condition |
If you selected
As a best practice, use the Condition Builder to edit this field. Click ( ) to open the tool. See Using the Condition Builder to configure dynamic UI actions. An link that is not visible is also disabled and cannot be clicked. |
Run on Client? |
Appears when you enter a simple expression in the Condition field. Select to cause evaluation and execution of the condition each time the value of a property stated in the condition changes. If unselected, the expression is evaluated and the condition executed when the form is initially presented and whenever the form is refreshed. |
4. Complete the Cell Properties panel — Advanced tab
Complete the Advanced tab.
Width |
As a best practice, use SmartLayouts to achieve uniform width of cells throughout your application's forms. You can set the width of SmartLayout templates using the Skin rule. See Skin form —Components tab — Layouts — Smart layouts. Optional. This field appears only when the cell is not controlled by SmartLayout column restrictions. Enter a positive number for the width in pixels of this cell. (At runtime, normal browser processing for rendering tables determines the actual displayed width.) You can also adjust the width this column directly:
|
Height |
As a best practice, use SmartLayouts to achieve uniform height of cells throughout your application's forms. You can set the width of SmartLayout templates in the Skin rule. See Skin form —Components tab — Layouts — Smart layouts. Optional. This field appears only when all columns in the Layout are not controlled by SmartLayout column restrictions (that is, all columns have the
|
Read-Write Style |
Optional. Type the name of the custom style, for example, custom_stylename, that you want to apply to this cell when the user form or flow action form appears in read-write mode. Define custom styles in the Skin rule. See Skin form — Custom. |
Read-Only Style |
Optional. Type the name of the custom style, for example, custom_stylename, that you want to apply to this cell when the user form or flow action form appears in read-only mode. Define custom styles in the Skin rule. See Skin form — Custom. |
Show When Active |
This checkbox appears when control is placed in the repeating area of a Grid, Tree Grid, or Tree layout. If checked, the icon displays in the row only when the user selects it. |
Inline Style |
The best practice is to define custom styles in the skin. Optionally, enter CSS code for an inline style for a cell in the column. For guided assistance in composing a style definition, click the magnifying glass icon () to open the Style Editor. You can select from predefined lists or type a style definition directly, and preview the results. |