You can create and modify accordion formats in the skin. See grids.

Specify the grid height in the field that displays.

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 ConfigureUser InterfaceGallery UI elements.

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

• 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.

• 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.

• Width — Specify a column width in pixels.
• Inline style — Optional. As a best practice, Skin rule Custom.
• 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.

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 Localization wizard.

• 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.

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 Controls form Completing the Controls tab.

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).