Skin form — Components tab — Layouts — Legacy layouts
The styles you set here apply to Smart layouts. A Smart layout is a template containing fixed-width, fixed-height column pairs. Smart layouts ensure vertical alignment, even when layouts are nested.
Setting Smart layouts values in the Skin rule ensures that column alignment is based upon a style sheet and therefore matches across all sections. See Harness and Section forms — Adding a layout.
You can modify the standard Smart layouts templates or create custom Smart layouts templates.
To preview formats, select
Actions > Launch
in the toolbar and then choose one of the following preview options:
Run Process,
Open Portal,
Harness Preview,
UI Gallery Preview,
Skin Preview. In the Skin Preview, click the
Layouts
tab. Select the format you want to preview:
Default
,
Spreadsheet
, or
Transparent
.
Modifying Standard Smart layouts Templates
Specify settings for the following standard Smart Layouts:
- Single — A single column pair
- Double — One column pair, a spacer column and a second column pair
- Triple — Three column pairs with two spacer columns
- Custom — Three column pairs with two spacer columns
Values for Column Pairs
For each column pair,
Single
,
Double
,
Triple
, and
Custom
, enter values for the following in pixels:
Height | Enter the height. |
Label | Enter the width of the label column. |
Field | Enter the width of the field column. |
Spacer | Enter the width of the spacer column. |
Total | Displays the sum of the width values. |
Width of Text Boxes and Controls
Width |
Specify the width of text and control properties within the boundaries of the field column. These include input, selection, and AutoComplete boxes.
For each column type, select the
Width
check box, enter a value in the next box to the right, and select
As a best practice, do not enter a pixel value greater than the Field width or a percentage greater than 100. Doing so overrides the Field width settings. If you do not want to use this feature, clear the Width check box. Its associated fields disappear. Doing so enables you to define custom dimensions using the cell property panels in the layout. |
Minimum Screen Width
Width |
Determine the smallest value to which a user can compress the screen size before a horizontal slide bar appears.
The minimum value provides consistent alignment by preventing columns and text from wrapping. To use the minimum setting, select the Has Minimum Width? check box on the Display Options tab of a Harness form. |
Creating custom templates
Creating a custom template
- Click Add a new layout.
- Type the custom template name using only alpha-numeric characters ( a-z and 0-9 ) and spaces. The name cannot begin with a number. The name that you enter is converted into the name of the CSS class/classes.
- Specify the values for column pairs, text boxes and controls, and minimum screen width.
- Save the skin.
Applying a custom template
- Add any Smart layout: Single , Double , or Triple .
- Click the View properties icon to open Layout Properties.
- On the General tab, specify the Container Format . To specify a custom container format defined in the skin, select Other in the Container Format drop-down. In the Container style field, press the down arrow to select the container format that you want to apply.
- Select the Allow changes to columns check box. The Smart layout type field changes to Style format .
- In the Style format drop-down, select the format you want to apply to the smart layout. To specify a custom format defined in the skin, select Other . In the field that appears, press the down arrow and select the format that you want to apply to the smart layout.
You can delete styles that you create; click the Delete icon.
- Component styles (custom style formats)
Use the Component styles tab to define the presentation of components by creating custom style formats. After you define style formats, reference them on property panes for sections, harnesses, and controls.
Previous topic Skin form — Components tab — Layouts — Trees and tables - Actions Layout tab Next topic Component styles for controls