Section forms
|
Using the accordion control, you can stack layouts vertically, each with a visible header. At runtime, when the user clicks one header, the layout body becomes visible and the other open body closes. For an example, see Pega Developer Network article PRKB-25414 How to display collapsed form sections using the Accordion control.Proj-1012 5.4SP2
When accordion controls are within a section that is within a panel of a panel set, runtime behavior automatically adjusts to consume the entire available height, and to supply scroll bars when necessary. GRP-1142
1. Adding and deleting an Accordion control
Click the down-arrow ( ) at the right end of the Layout control group () and select the accordion control (). Alternatively, click the Layout control group itself to pop-out the Layout control group window. Click and drag the control on to the work area. When the pointer changes shape to indicate that you can drop the layout, release the mouse button.
To delete an accordion control, select the control and click the Delete Row button (). Do not use the Delete Cell button for this action.
2. Complete the Layout Panel — Top fields
Click the magnifying glass icon () to open the Layout panel. Complete the top fields, General tab, and Advanced tab. GRP-224
Your updates to this panel can update the rule form immediately or upon clicking Apply, depending on the Property Panel settings in your Edit preferences. See Setting your preferences. If the panel is pinned(), the wireframe on the rule form changes immediately to reflect your inputs. If the panel is not pinned(), click Apply to apply your inputs.
Field |
Description |
Header |
Select |
Title |
Optional. Enter text to be presented above the table in the header or subheader. This text may include directives or JSP tags, such as <p:r > or <pega:lookup >. When you plan to localize the application using this rule, so the application can support users in various languages or locales, choose the text carefully and limit the length to no more than 64 characters. When practical, choose a caption already included in a language pack, to simplify later localization. A field value rule with this text as the final key part is needed for each locale. See About the Localization wizard. |
Template |
Choose |
Visible When |
Optional. To control visibility of this header, enter or select one of the following:
If this section is to become part of navigation in a composite portal, you can make the control visible only when a specific space is the current space. Select the Run on Client? checkbox and enter an expression here similar to the following: pyCurrentSpace=="ASpaceName" |
3. Complete the Layout Panel — General tab
Field |
Description |
Header Type |
To maintain an accordion layout, leave
|
Style Prefix |
Optional. Provides the ability to reference a family of custom styles for accordion bars. For example, type A in this field to use styles named .A_headeraccordion* rather than the normal .headeraccordion* styles. Define the prefixed styles in your workform_zzzzz.css text file (created by the Branding wizard) or in another text file referenced on the Scripts and Styles tab of the Harness form. |
Retrieve Activity | Optional. If Defer Load? is selected, you can specify an activity to be run when the container is expanded by a click. This activity can compute property values and other aspects of the expanded container. |
Defer Load? |
Optional. Choose this option to delay loading at runtime of the section content until the user clicks the header. |
NewLayout? |
Optional. Choose this option to convert the selected accordion bar, and those below it, to a new layout. |
4. Complete the Layout Panel — Advanced tab
Field |
Description |
Body Visible When |
Optional. To control visibility of the body, enter or select one of the following:
|
Run on Client? |
This checkbox appears only if the Body Visible When field contains a simple Java comparison. Select to cause dynamic execution of the condition each time the value of the property mentioned in the condition changes. (Mark the field containing that property as a Client Event.) Leave cleared to cause the condition to execute only once, upon initial presentation of the form. |
Width |
Optional. Select whether the width of columns in the table are to be set as a percent or in absolute pixels. Choose:
If you choose px-fixed and a property value at runtime is wider than width defined by the pixel value, the value is truncated, and users are unable to see the full value. GROVS 8/24/06 |
ID |
Optional. Type a value for the |
Header Image |
Optional. Click the magnifying glass icon() to open the Image Gallery landing page. Search for an image to include on the left side of the header. |