Back Forward Help: Branding wizard — Smart Layouts

Layouts Template

Set uniform heights and widths of column pairs of labels, fields, and spacers (padding) when using SmartLayout templates in harness, section, or flow action designs. The values in this section ensure that column alignment is based upon a style sheet and therefore matches across all sections. See Harness, section and flow action forms — Adding a layout for more information about working with layouts.

  1. Under the Height column, enter the values (in pixels) for the height of each column pair (Single, Double, Triple, and Custom).
  2. Under the Width column, enter the values (in pixels) for the label, field, and spacer element for each column pair. The sum of the widths appears under the Total column.

Under the Text Boxes and Controls column you can specify the width of specific text and control properties within the boundaries of the field column. These include input, selection, and auto complete 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 checkbox 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, de-select 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

Determine the smallest value 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. The width (in pixels) appears next to the Suggested: label and in the Actual checkbox (selected).

The value is the sum of the longest column width in the Layout Templates section plus buffer and padding values. To override this setting, clear the Actual checkbox and enter a value. To use the minimum setting, click the Has Minimum Width? checkbox on the Display Options tab of a harness rule form.

Commands

Click Preview to open in a new window a rendering of the UI elements as configured so far. To view the rendering on the traditional Pega portal, click the Preview Traditional Portal button in the preview window.

Click Next>> to advance to Styles and Layouts, Step 4.

Click <<Back to return to the previous step.

Click Save to save your updates to the skin rule.

Click Cancel to discard your updates and exit the wizard.

Click Finish to save your updates and exit the wizard. This action opens a panel containing an array of rules comprising the skin and its associated portal and text rules. Click the edit button () to open a rule. Click Reopen Skin to return to the first step, or click Cancel to exit the wizard.

UpAbout the Branding wizard