Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

This content has been archived and is no longer being updated.

Links may not function; however, this content may be relevant to outdated versions of the product.

Skin form — Components tab — Layouts — Legacy layouts

Updated on April 5, 2022

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:

HeightEnter the height.
LabelEnter the width of the label column.
FieldEnter the width of the field column.
SpacerEnter the width of the spacer column.
TotalDisplays 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 px (pixels) or % in the drop-down box. By reducing the text box size, you create extra space within the column to which you can add a control property, such as a check box or a calendar, while maintaining uniform column widths.

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

  1. Click Add a new layout.
  2. 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.
  3. Specify the values for column pairs, text boxes and controls, and minimum screen width.
  4. Save the skin.

Applying a custom template

  1. Add any Smart layout: Single , Double , or Triple .
  2. Click the View properties icon to open Layout Properties.
  3. 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.
  4. Select the Allow changes to columns check box. The Smart layout type field changes to Style format .
  5. 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.

Skin rules

  • 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

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us