|
|
C-1778Use the controls at the top of this tab and Windows drag and drop operations to review or update the section rule and associated section rules. The tab presents a real-time preview of a section of the work object form, allowing you to adjust the contents, position, style, and other aspects of the elements in the form quickly.
C-1778Areas of the layout that correspond to section rules (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 section
rules 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 section rules are in the
legacy format. These are marked Not Upgraded on the
wireframe presentation in this tab.
When you save this rule form, Process
Commander also saves any open section rules it references, and
validates the rules as they are saved.
As a best
practice, build your application skin (using the Branding
wizard) before you develop section rules for work objects, 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. 5.5 GRP-503
Using the Section form to review or update a
section rule 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. F-174 APAP SR-866 GROVS
10/11/05
Identifying
controls on this tab
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:
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.
to hide wireframes, providing a less busy
and higher fidelity preview.These controls operate on a table structure. 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 |
|
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. Proj-649 5.4 |
|
Unmerge — Undo the previous merge. |
You can also alter the table structure with Windows pointer operations. Select a row, cell, or column and right-click to access a context menu. Select a menu operation: Cut, Copy, Paste, Insert Row, Delete Row, or Delete Column.
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 rule 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 rule
form.
Prototyping a
section before the properties are defined
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 rule is a valid
starting point for further evolution after the property rules 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 rule 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 Pega Developer Network article
PRKB-25216 Use pyTemplate properties and
controls to rapidly prototype work object forms.
Working with
the Cell Properties panel and other panels
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 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. Layout Group: 
Adding a section, layout, or repeating
layout
Click the down arrow (
) in
the Container control group () and select
a control: PROJ-649 5.4
Control |
Description |
|
Add a tab to a section. See Adding a tab. |
|
Add an accordion group to this section. See Adding an accordion control. |
|
Add a section rule to this section. See Adding a section. |
|
Add a layout to the 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: <table width="100%" border=0"><tr><td width="45%"> <ul> <li><a href="../common/commonlayoutnewgrid.htm">Adding a layout</a></li> <li><a href="../common/commonrepeatinglayout.htm">Adding a Row Repeat layout</a></li> <li><a href="../common/commoncolumnrepeat.htm">Adding a Column Repeat layout</a></li> <li><a href="../common/commontabrepeat.htm">Adding a Tabbed Repeat layout</a></li> </ul> </td> <td width="55%"><ul> <li><a href="../common/commonlayoutgridv6.htm">Adding a Grid layout</a></li> <li><a href="../common/commonlayouttreegrid.htm">Adding a Tree Grid layout</a></li> <li><a href="../common/commonlayouttree.htm">Adding a Tree layout</a></li> </ul> </td></tr></table> </td> </tr> <tr> <td colspan="2"><img src="../../../shared/notestar.gif" width="16" height="16" alt="note star" />You can't add a Container (<img src= "../dragpalette_container.gif" alt="Container" width="40" height="30" align="absmiddle" />) or Panel Set control (<span class= "nobreak"><img src="../dragpalette_portal_top_left_center.gif" alt= "Panel Set" width="40" height="30" align="absmiddle" /></span>) to a section.</td></tr> </table> </div> <p><a href="#" class="DropDownRef" onclick="Expand()"> <img src= "../../../blueup.gif" width="14" height="10" /> Basic Group: <img src= "../dragpalette_celltypes.gif" alt="Basics" width="47" height="18" class= "inline" />Placing a property or label in a cell</a></p> <div id="ExpCol" class="expanded"> <p>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 rule to present the value in read-only or read-write mode. <em> REVISED FOR SP2 </em></p> <p>You can reference properties on the primary page — typically the page holding the work object — with simply a period followed by the name. You can reference properties on other pages with the <i>pagename.propertyname</i> syntax. Don't forget to identify the class of pages (other than the primary page) on the <span class= "afield">Pages & Classes</span> tab.</p> <p>Click the down arrow (<img src="../dragpalette_celltypes_menu.gif" alt="Menu" width="16" height="18" class="inline" style="inline" />) in the Basic control group (<img src="../dragpalette_celltypes.gif" alt= "Basics" width="47" height="18" class="inline" />) and select a control: <tt>PROJ-649 5.4</tt></p> <table border="1" class="table1"> <tr> <td width="60" align="left" valign="top"> <h2>Control</h2> </td> <td width="444" align="left" valign="top"> <h2>Description</h2> </td> </tr> <tr> <td valign="top" align="left"><img class="grayborder" src= "../dragpalette_label.gif" width="47" height="18" /></td> <td valign="top" align="left">Add a static read-only text label into a cell. <a href="../common/commonlayoutlabel.htm">Adding a label</a>.</td> </tr> <tr> <td valign="top" align="left"><a href= "../common/commonlayoutpxtextinputSP2.htm"><img src= "../../rule-html-/dragpalette_inputbox.gif" alt="Input Box" width= "47" height="18" align="absmiddle" /></a></td> <td valign="top" align="left">Add a Text Input, which corresponds to<cite> .pxTextInput</cite> control rule. <a href= "../common/commonlayoutpxtextinputSP2.htm">Adding a Text Input control</a>.</td> </tr> <tr> <td valign="top" align="left"><a href= "../common/commonlayoutpxtextareasp2.htm"><img src= "../../rule-html-/dragpalette_textarea.gif" alt="TextArea" width= "47" height="30" align="absmiddle" /></a></td> <td valign="top" align="left">Add a TextArea, which can contain more than one line of text. Corresponds to the<cite>.pxTextArea</cite> control rule. <a href= "../common/commonlayoutpxtextareasp2.htm">Adding a Text Area control.</a></td> </tr> <tr> <td valign="top" align="left"> <img src= "../dragpalette_icon.gif" width="20" height="18" /></td> <td valign="top" align="left">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 <cite>.pxIcon </cite>control rule. <a href="../common/commonlayoutpxiconV62.htm">Adding an icon</a>.</td> </tr> <tr> <td valign="top" align="left"><a href="../common/commonlayoutpxbuttonsp2.htm"><img src="../../rule-html-/dragpalette_button.gif" alt="Button" width="47" height="18" align="absmiddle" /></a></td> <td valign="top" align="left">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 <cite>.pxButton </cite>control rule. <a href="../common/commonlayoutpxbuttonsp2.htm">Adding a button</a>.</td> </tr> <tr> <td valign="top" align="left"> <img src= "../dragpalette_checkbox.gif" alt="Check box" width="20" height= "18" /></td> <td valign="top" align="left">Add a checkbox representing a <code>TrueFalse</code> value. Corresponds to a <cite>.pxCheckbox </cite>control rule. <a href= "../common/commonlayoutpxcheckboxV62.htm"> Adding a Checkbox</a>.</td> </tr> <tr> <td valign="top" align="left"> <img src= "../dragpalette_radiobutton.gif" alt="Radio Button" width="19" height="18" /></td> <td valign="top" align="left">Add a radio button group representing a property value. <a href= "../common/commonlayoutradiogroup.htm">Adding a radio button group</a>.</td> </tr> <tr> <td valign="top" align="left"> <img class="inline" src="../dragpalette_url.gif" width="28" height="18" /></td> <td valign="top" align="left">Place a text link in a cell. When clicked at runtime, the link starts an action. Corresponds to a <cite>.pxLink</cite> control rule. <a href="../common/commonlayoutpxlinkV62.htm">Adding a Link control</a>.</td> </tr> <tr> <td valign="top" align="left"> <img src= "../dragpalette_calendar.gif" alt="Calendar" width="30" height= "26" /></td> <td valign="top" align="left"> <p>Add a text box containing a <code>Date</code> or <code>DateTime</code> value. Corresponds to the <cite>.pxDateTime </cite>control rule. <a href= "../common/commonlayoutpxdatetimeV62.htm">Adding a Calendar control.</a></p> </td> </tr> <tr> <td valign="top" align="left"><img src= "../dragpalette_selectbox.gif" alt="Select" width="47" height= "18" /></td> <td valign="top" align="left"> <p>Add a Select control to present a fixed list of values. <a href="../common/commonlayoutselect.htm">Adding a Select control</a>.</p> </td> </tr> <tr> <td valign="top" align="left"><span class= "nobreak"> <img src="../dragpalette_image.gif" alt= "Check box" width="40" height="30" align= "absmiddle" /></span></td> <td valign="top" align="left"> <p>Include an image in the form. <a href= "../common/commonlayoutimage.htm">Adding an Image</a>. <tt>GRP-1041</tt></p> </td> </tr> </table> </div> <p><a href="#" class="DropDownRef" onclick="Expand()"> <img src= "../../../blueup.gif" width="14" height="10" /> Advanced Group <img src="../dragpalette_cellproperties.gif" alt="Properties" width="47" height="18" align="absmiddle" /></a></p> <div id="ExpCol" class="expanded"> <p>Click the down arrow (<img src="../dragpalette_celltypes_menu.gif" alt="Menu" width="16" height="18" class="inline" style="inline" />) in the Advanced control group (<img src= "../dragpalette_cellproperties.gif" alt="Properties" width="47" height="18" align="absmiddle" />) and select a control: <tt>PROJ-649 5.4</tt></p> <table border="1" class="table1"> <tr> <td width="80" align="left" valign="top"> <h2>Control</h2> </td> <td width="751" align="left" valign="top"> <h2>Description</h2> </td> </tr> <tr> <td valign="top" align="left"><img src= "../dragpalette_paragraph.gif" alt="paragraph" width="46" height="18" /></td> <td valign="top" align="left">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. <a href="../common/commonlayoutparagraph.htm">Adding a paragraph</a>. <tt>C-2526</tt></td> </tr> <tr> <td valign="top" align="left"><img src= "../dragpalette_autocomplete.gif" alt="AutoComplete" width="47" height="18" /></td> <td valign="top" align="left">Use an AutoComplete text box to present a drop-down list of dynamic choices computed by an activity. <a href= "../common/commonlayoutautocomplete.htm">Adding an AutoComplete field</a>.</td> </tr> <tr> <td valign="top" align="left"><img src= "../common/dragpalette_smartlabel.gif" alt="SmartLabel" width= "47" height="35" /></td> <td valign="top" align="left">Add a red label that opens a pop-up SmartInfo section when the user hovers the mouse pointer over the label. <a href= "../common/commonlayoutsmartlabel.htm">Adding a Smart Label</a>. <tt>PROJ-1019</tt></td> </tr> <tr> <td valign="top" align="left"><img src= "../dragpalette_dynamictext.gif" alt="Dynamic Select" width="47" height="18" /></td> <td valign="top" align="left">Add a Dynamic Select control. <a href="../common/commonlayoutdynamicselect.htm">Adding a Dynamic Select control</a>.</td> </tr> <tr> <td valign="top" align="left"><img src= "../dragpalette_listtolistview.gif" alt="List to List" width= "47" height="30" /></td> <td valign="top" align="left">Add a control that allows multiple selections from a list of options. <a href= "../common/commonlayoutlistotlist.htm">Adding a list-to-list control</a>.</td> </tr> <tr> <td valign="top" align="left"><img src="../dragpalette_list.gif" alt="List view" width="40" height="30" /></td> <td valign="top" align="left">Present rows of a report, optionally allowing selection. <a href= "../common/commonlayoutlistview.htm">Adding a List View.</a></td> </tr> <tr> <td valign="top" align="left"><img src= "../dragpalette_chart.gif" alt="Chart" width="47" height= "30" /></td> <td valign="top" align="left">A cell can contain an interactive chart, defined by a summary view rule with a non-blank <span class="afield">Chart</span> tab. <a href= "../common/commonlayoutachart.htm">Adding a chart</a>.</td> </tr> <tr> <td valign="top" align="left"><span class="nobreak"><img src= "../../rule-html-/dragpalette_gadgetdatabind.gif" alt= "Data Bind" width="47" height="30" align= "absmiddle" /></span></td> <td valign="top" align="left">For sections that are part of a composite application built with <a href="../../../definitions/i/internetapplicationcomposer.htm">Internet Application Composer</a>. Add a hidden field to expose a property value, making it available to the external page that displays the composite application. <a href= "../common/commonlayoutdatafield.htm">Adding a Data Field control</a>.</td> </tr> </table> <p><img src="../../../shared/advanced.gif" alt="Advanced feature" width="16" height="15" align="absmiddle" />In addition to these Advanced controls, you can add interactive data displays to support quick review or editing for a <code>Page List</code> or <code>Value List</code>. <a href="../common/commonlayouttree.htm">Adding a Tree</a>, <a href="../common/commonlayoutgridv6.htm">Adding a Grid</a>, <a href="../common/commonlayouttreegrid.htm">Adding a Tree Grid</a>. </p> </div> <p><a href="#" class="DropDownRef" onclick="Expand()"> <img src= "../../../blueup.gif" width="14" height="10" /> Dragging a property from the Application Explorer</a></p> <div id="ExpCol" class="expanded"> <p>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.</p> <ol> <li>Locate and expand the work type that contains the property on the Application Explorer.</li> <li>Expand the Data Model category <span class="nobreak">(<img src= "../../../sharedv6/v6Icons/RuleCategories/DataModel.png" width="12" height= "12" />)</span> and the Property rule type to list property names.</li> <li>Select the blue dot <span class="nobreak">(<img src= "../../../tools/appexplorer/ae_instance.gif" width="13" height="13" />)</span> for the <code>Single Value</code> property to be placed in the field. Drag and drop the dot into the desired cell.</li> <li>The system places the <strong>Short Description</strong> 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.</li> </ol> </div> <p><a href="#" class="DropDownRef" onclick="Expand()"> <img src= "../../../blueup.gif" width="14" height="10" /> Previewing the section</a></p> <div id="ExpCol" class="expanded"> <p>After you save this rule, click the Preview toolbar button <span class="nobreak">(<img class="inline" src= "../../../sharedv5/preview54x21.gif" alt="Preview" width="21" height= "21" />)</span> to see a split-screen presentation of the section as it appears in read-write mode at runtime.</p> </div> <p class="seealso2"><a href="main.htm" class="small"><img src= "../../../navdropup.gif" class="inline" alt= "Up" /> About Section rules</a></p> </div> </body> </html> |
Section form