Harness, Section, and Flow Action 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 click-action Icon 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 — Styles tab — Components — Links.
As of V6.2, the Link control uses the auto-generated control pxLink. Its behavior and appearance are governed by the settings in the rule form's Control tab. The Parameters tab is not available and the HTML cannot be edited. As a best practice, do not modify a copy of the rule while designing a section, flow action, or harness. Instead, use the Parameters dialog available in the control's Cell Properties panel. See Completing the Control tab.
Use the pxLink control in new development. However, the V5 URL control remains supported in V6.X. See About the V5 URL control.
The UI Gallery landing page contains a working example of this control. To view and interact with this example and review its configuration, select > User Interface > UI Gallery and select Link in the Controls group.
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 the magnifying glass icon () 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 Click the pencil icon () to review the control identified in this field. 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 the magnifying glass icon ( ) 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 — Styles 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 — Styles 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 |
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. |