Section form
Completing the Layout tab

Areas of the layout that correspond to sections (or other elements) that you cannot update appear with a gray background. This may mean that the rule needs to be checked out to you, or belongs to a locked RuleSet version, or a RuleSet version you are not allowed to update.

You can't use this tab to modify sections with the Auto-generated HTML? checkbox cleared (on the HTML tab). These are marked Manual HTML on the wireframe presentation in this tab. Similarly, you cannot use this tab to modify sections that are in the legacy format. These are marked Not Upgraded on the wireframe presentation in this tab.

When you save this rule form, PRPC also saves any open sections it references, and validates the rules as they are saved.

As a best practice, build your application skin (using the Skin rule form) before you develop sections for work items, especially if you are using SmartLayouts (with spacing determined by the skin styles.) The system renders the Layout tab using the styles of the skin rule identified in the Skins field of the Run Process In group of your General preferences. If the Skins field is blank, these displays use the styles marked Work on the Styles tab of the skin identified in your current portal rule. See Designer Studio — Setting your preferences.

Using the Section form to review or update a section causes a clipboard page to be created and properties to be initialized. This may in turn cause declarative processing to be executed. Use caution before implementing any on-change declarative processing that produces database updates.

Controls that alter the preview

The preview area of this tab holds an approximate visual presentation of the runtime appearance of the section. These buttons do not affect the contents of the rule, only the display on this tab:

• Click to present the SmartFrames wireframe preview. Blue wireframe rectangles help you understand the structure of the section, names of rules referenced in this rule, and the size and other relationships of elements in the section.
• Click to hide wireframes, providing a less busy and higher fidelity preview.

Controls that alter a layout

These controls operate on layout structures. Select one or more cells first, then click the control to apply the operation described. When a control is not available (grayed), it cannot be applied to the current selection.

Control	Description
	Cut the selection.
	Copy the selection.
	Paste the contents in the selected area.
	Delete the contents of a single cell (not a row or column).
	Insert a new row before (above) the selected row.
	Insert a new row after (below) the selected row.
	Delete the selected row.
	Insert a new column before (to the left of) the selected column.
	Insert a new column after (to the right of) the selected column.
	Delete the selected column.
	Merge right — Combine the selected cell and the cell to the right.
	Merge down — Combine the selected cell and the cell below it.
	Unmerge — Undo the previous merge.

You can also use keyboard shortcuts and right-click context menus to cut, copy, paste, and delete.

Select a layout, section include, column, row, or cell and then:

• Cut (CTRL + X), Copy (CTRL + C), Paste (CTRL + V), or Delete. You can change the key combinations in Keyboard Preferences. See Setting your preferences.
• Right-click and select: Cut, Copy, Paste, Delete, Insert Row, Insert Column, Delete Row, Delete Cell or Delete Column. When copying an entire layout, select Paste Above or Paste Below.

Expand and collapse (+/-) controls

Sections in a harness may be presented as horizontal elements. These work in the Layout tab: click a plus sign () to expand a section.

When you save a section form, the state of these controls is saved as well, and determines the initial presentation of the form. To achieve the desired results, set the or elements as desired to control the initial presentation of a subsection before you save the section form.

Structurally, a section consists of one (or more) layouts or <TABLE> grids, or one or more repeating layouts. (This structure is not required for sections that are produced with handcrafted HTML code). Layouts and repeating layouts contain rows and columns, defining a set of cells. A cell can be empty or contain any of various fields and controls.

Fields on a section may be located on any page identified on the Pages & Classes tab of the section.

You can rapidly mock up the layout, labels, and controls on this tab before all properties it ultimately will reference are defined. The development effort you make in designing layout is not wasted, as the resulting section is a valid starting point for further evolution after the properties are created.

When you first drop a control dragged from the Basic Group, the control references a standard placeholder property, for example @baseclass.pyTemplateInputBox. You can save and preview the Section form (although these properties are not part of your application).

To produce a section with the appropriate layout, drag and drop the controls, adjust the labels, but do not complete the Cell Properties panel. Reopen the Section form and update each Cell Properties panel later, when the real properties are defined.

For an example of this approach, see PDN article 25216 Use pyTemplate properties and controls to rapidly prototype user forms.

Each control is defined by your inputs in a floating panel, which you can pin for faster input. To open the panel, select the control (after dropping it) and press Enter or click the magnifying glass icon () that appears.

Use these controls on the header of floating panel:

• — Pin the panel to a location. The OK button disappears, and each input you enter is immediately applied to the open rule form.
• — Release the pin. The OK button appears. Your inputs do not affect the open form until you click OK.
• — Collapse (hide) the panel body.
• — Expand a collapsed panel body.
• — Close the panel. If you have entered changes that are not yet applied, a warning dialog may appear, depending on the Warn on modified checkbox in the SmartFrames Edit area of the Edit preferences group. See Designer Studio — Setting your preferences.

Click the down arrow () in the Container control group () and select a control:

Control	Description
	Add a Dynamic Container to this section. See Adding a Dynamic Container.
	Add a tabbed SmartLayout to this section. See Adding a tabbed SmartLayout.
	Add an accordion SmartLayout to this section. See Adding an accordion SmartLayout.
	Add a section rule to this section. See Adding a section.
	Add a layout to this section — a <TABLE> element containing one or more rows and one or more columns. You can then change the number and size of rows and columns, and set up the contents of each cell (a <TD> HTML element). See: Adding a layout  Adding a Row Repeat layout  Adding a Column Repeat layout  Adding a Tabbed Repeat layout  Adding a Grid layout  Adding a Tree Grid layout  Adding a Tree layout
You can't add a Container () or Panel Set control () to a section.

A cell can hold a label or property value or a form field that accepts a user-entered property value. The property value uses a control to present the value in read-only or read-write mode.

You can reference properties on the primary page — typically the page holding the work item — with simply a period followed by the name. You can reference properties on other pages with the pagename.propertyname syntax. Don't forget to identify the class of pages (other than the primary page) on the Pages & Classes tab.

Click the down arrow () in the Basic control group () and select a control:

Control	Description
	Add a static read-only text label into a cell. Adding a label.
	Add a Text Input, which corresponds to .pxTextInput control. Adding a Text Input control.
	Add a TextArea, which can contain more than one line of text. Corresponds to the.pxTextArea control. Adding a Text Area control.
	Add an icon to the form, in a cell or on a header. When clicked at runtime, the icon starts an action. Corresponds to the .pxIcon control. Adding an icon.
	Place a button into a cell or at the bottom of the form. When clicked at runtime, the button starts an action. Corresponds to the .pxButton control. Adding a button.
	Add a checkbox representing a TrueFalse value. Corresponds to a .pxCheckbox control. Adding a Checkbox.
	Add a radio button group representing a property value. Adding a radio button group.
	Place a text link in a cell. When clicked at runtime, the link starts an action. Corresponds to a .pxLink control. Adding a Link control.
	Add a text box containing a Date or DateTime value. Corresponds to the .pxDateTime control. Adding a Calendar control.
	Add a Select control to present a fixed list of values. Adding a Select control.
	Include an image in the form. Adding an Image.

Click the down arrow () in the Advanced control group () and select a control:

Control	Description
	Reference, in a cell, a paragraph rule that can present read-only text and images using rich-text HTML markup. Optionally, you can link a SmartInfo pop-up section with the paragraph. Adding a paragraph.
	Use an AutoComplete text box to present a drop-down list of dynamic choices computed by an activity. Adding an AutoComplete field.
	Add a red label that opens a pop-up SmartInfo section when the user hovers the mouse pointer over the label. Adding a Smart Label.
	Add a Dynamic Select control. Adding a Dynamic Select control.
	Add a control that allows multiple selections from a list of options. Adding a list-to-list control.
	A cell can contain an interactive chart, defined by a summary view rule with a non-blank Chart tab. Adding a chart.
	For sections that are part of a composite application built with Internet Application Composer. Add a hidden field to expose a property value, making it available to the external page that displays the composite application. Adding a Data Field control.
	Add a menu to a composite portal. See Adding a Menu Bar.

In addition to these Advanced controls, you can add interactive data displays to support quick review or editing for a Page List or Value List. Adding a Tree, Adding a Grid, Adding a Tree Grid.

You can complete two cells of a layout in one step if the left cell is to contain a text label and the right cell is to contain a field corresponding to a property on the Application Explorer.

1. Locate and expand the work type that contains the property on the Application Explorer.
2. Expand the Data Model category () and the Property rule type to list property names.
3. Select the blue dot () for the Single Value property to be placed in the field. Drag and drop the dot into the desired cell.
4. The system places the Short Description text of the property as a label in the left cell. It places the property as a (read-write) field in the right cell. You can adjust the settings for these cells.

After you save this rule, click the Preview toolbar button () to see a split-screen presentation of the section as it appears in read-write mode at runtime.