Table layout - Presentation tab

Click the View properties icon in the Grid Repeat Layout header to display the Properties panel, and then select the Presentation tab.

   
Style Specify a style for the grid.
Container format Select a container format.

You can create and modify accordion formats in the skin. See Skin form — Components tab — Layouts — Grids.

Width of content Select a grid-width option to determine whether the width of the individual columns within the layout (action and repeating areas) are set as a percentage or in pixel values. Use the options as follows:
Pixels (Fit Content) To set minimum column widths within the layout at run time. A column expands if the content exceeds its minimum width.
Fill (100%) To have column widths measured as fractions of the total width of the layout area. The widths of the matrix columns (specified in pixels) collectively represent 100% of the whole. For instance, if the three column widths are 250, 250, and 500 pixels, then the first two columns are each 25% of the total; the last column is 50%.

During runtime, a column expands if the content exceeds its minimum width.
Pixels (Fixed) To specify the column widths within the layout exactly as the fixed column width during runtime.

The display may truncate (partially obscure) a data value if the value is wider than width defined by the pixel value. The user can resize the columns to view the truncated content.
Stretch-Spacer Use with SmartLayouts.
Fixed (pixel) size grid Select this check box if you want to set a fixed pixel size for the grid. Specify the grid width and height in the fields that display.
Grid size (in pixels) Displays when you select Fixed (pixel) size grid.

Specify the grid height in the field that displays.
Display row numbers Select if you want to sequentially number the rows in the grid.
Enable row hovering Select if you want an OnHover style for rows, changing the appearance of a row when the pointer hovers over it. You can set the hover text and background color in the Skin rule.

The UI Gallery contains working examples of Row Hover.

The UI Gallery landing page contains a working example of this element. To display the gallery, in Dev Studio, click Configure > User Interface > Gallery > UI elements.

Display container header and title Select this check box to display the container headings. This allows you to configure the Header settings.
Responsiveness Select this option to make your grid responsive. Once this property is set, you can specify which columns of the grid should be displayed when the available screen width is reduced, according to the responsive breakpoints you set in the skin. In this section or harness, after closing this panel, you should specify the importance of each column. See the Column Properties Importance settings (below).

You set the responsive behavior for your grid columns in the skin. Skin form - Components tab - Layouts - Trees & grids Skin form — Components tab — Layouts — Trees and tables - General tab

Display custom message when there are no rows to display Check this box to override the default presentation when a grid is empty. You can:
  • Select the Section option and enter the name of your custom section.
  • Select the Field Value option and enter the name of your custom field value.

Alternatively, you can save a customized version of the pyGridNoResultsMessage section or GridNoResultsOnLoad field value into one of your application rulesets.

Do not display grid header when there are no rows to display Select this check box to hide the grid column headings when the grid is empty or has no results after filtering.
Display custom message when there are no results upon filtering Check this box to override the default presentation when your filter criteria yields no matching results. You can:
  • Select the Section option and enter the name of a custom section.
  • Select the Field Value option and enter the name of a custom field value.

Alternatively, you can save a customized version of the pyGridNoResultsMessage section or GridNoResultsOnFiltering field value into one of your application rulesets.

 

Column Properties These are the properties for your grid columns that you open by selecting the small circle in a column instance.
  • Width — Specify a column width in pixels.
  • Inline style — Optional. As a best practice, define custom styles in the skin.
  • Importance — The options are:
    • Primary — Only one column can be marked as Primary, and this column must be to the left of all secondary columns. The primary column of a grid is always displayed.
    • Secondary — You can mark as many columns as you want to be Secondary. They are all appear right of the primary column. If the grid is reduced to a one-column flat list, the secondary column contents appear in their respective primary column cells.
    • Other — This is the default setting for a column. The Other columns can appear left or right of the primary and secondary columns. These columns are dropped from the grid or hidden (depending on your skin settings) when the screen size is less than a responsive breakpoint.
Header Settings  
Title Optional. Type text to display in the accordion 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.

Heading level Select a heading level from the drop-down menu. The container heading level generates semantic markup and makes the UI structurally understandable for assistive technology users.
Include icon with title Select if you want to include an icon in the title bar.
Icon Optional. Click the Show Image Viewer icon to open the Image Library landing page and select an image to include on the left side of the header.
Icon title If you want to display a tooltip when the user hovers the mouse pointer over the icon, type a text string within quotations, for example, "Select to view list".
Body visibility Optional. Leave blank to present the body always. To control visibility of the body, enter or select one of the following:
  • The When Name key part of a when condition rule. Click the Open icon to review or create the rule.
  • Simple expression based on the comparison of a pair of constants, properties, or both, combined by Boolean operators, such as .Color="Red". You can combine the expression with a when condition rule or another expression using the && and || operators.

As a best practice, use the Condition Builder to edit this field. Click the Open condition builder icon to open the tool. See Using the Condition Builder to configure dynamic UI actions.

Run visibility condition on client

Appears when you select Conditional Visibility and enter a simple expression in the field that displays.

Select the Run visibility condition on clientcheck box to cause dynamic execution of the condition each time the value of a property stated in the condition changes.

Conditions are automatically re-evaluated when the user updates a property value. By default, controls that allow typing, such as Text Input, are evaluated when the user leaves the field. To re-evaluate conditions as the user types, use the Apply Conditions action with a Keyboard event. See Control Form — Completing the Control tab.

Defer load contents Optional. Choose this option to delay loading at runtime of the section content until the user clicks the header. Deferring enables users to start using other parts of the page rather than waiting for this section to load.

To enable users to take actions, such as submit, on a work item while other content is still being loaded, configure sections to use defer loaded asynchronous declare pages. See Pega Community How to configure non-blocking UI using Asynchronous Declare Pages (ADP).

Specify a pre-loading 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. As a best practice, create a defer loaded wrapper section with the retrieval activity (instead of having multiple defer loaded sections with wrapper activities.)

About Flow Actions

About Harnesses

Learning about sections