|
|
Harness, Section, Flow Action formsA cell in a layout or in a harness can contain a Button control, which invokes one or more actions when the user clicks the button. The Icon and Link click-action controls share most of the same capabilities — their differences are mainly in their presentation.
Configure styles for buttons using the Skin rule. See Skin form — Styles tab — Components — Buttons.
The Button control uses the auto-generated control rule pxButton. Its behavior and appearance are governed by the settings on 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 harness, section, or flow action. Instead, use the Parameters dialog available in the control's Cell Properties panel. See Completing the Control tab.
Follow these instructions to add a Button 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 Button in the Controls group.
1. Drag and drop the Button control
Click the down-arrow (
) at the right end of the Basic control group (
) and select the Button control (
). Drag the control to the cell or header that is to contain the Button. 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.
2. Complete the Cell Properties panel — Top fields
Click the magnifying glass icon (
) to open the Cell Properties panel. Complete the top fields that appear.
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.
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 |
 Accept the default pxButton control. The Standard button format, as defined in the Skin rule, is the default. The default label is "Button."
Click the pencil icon ( Customizing the controlThe Button's default parameters represent the basic configuration. However, you will need to specify what action or actions will execute when the user clicks the control. See Control Form — Completing the Control tab for descriptions of the available parameters and how to define behaviors. For example, you can configure the button to launch a local action or display a new harness. In addition, you may want to:
Your edits apply only to the button within the context of the section that contains it and do not update the underlying rule. Do the following to customize an auto-generated control in a section:
|
) next to the Control field. This displays the control Parameters dialog. See 3. Complete the Cell Properties panel — General tab
Complete the General tab.
Field |
Description |
| Visible |
Select to determine when the button appears. (If this setting is not applicable, the cell contents are blank.)
 In the control's Parameters dialog, you can also specify a privilege rule in the Privilege field that hides (or disables) the button. In addition, you can disable the button with a when condition using the Disabled and Disabled Condition fields. See Control Form — Completing the Control tab. |
| Condition |
As a best practice, use the Condition Builder to edit this field. Click the magnifying glass icon ( An icon 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. |
If you selected 4. Complete the Cell properties panel — Advanced tab
Complete the Advanced tab to control the presentation and visibility of the field.
Field |
Description |
| Read-Write Style | 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 | 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. |
| 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. |
| 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 button displays in the row only when the user selects it. |
Copying, deleting, duplicating, or moving a Button
Use these Windows operations to speed development:
- To move a cell containing a Button, select the cell and drag and drop it in another cell in the same layout or another layout.
- To cut, copy, or paste a Button in a cell, right-click in the cell to access a context-menu.