Helper classes and implementing more advanced UI
Flexbox allows building complex UI while reducing the number of nested layouts required. In the example below, the Case Manager header can be implemented with only two dynamic layouts instead of five layouts.
Helper classes are snippets of CSS that allow you to augment your UI. These classes can be applied to a dynamic layout (content), a container (header, outline), an element within a layout or table, or a section.
A CSS rule-file-text called py-common-helper-classes contains 180+ helper classes. These classes are categorized as text, dimensions, box model (margins, padding, borders), flexbox, and miscellaneous.
The file is loaded by default in all applications built on the UI-Kit when the application skin is inherited from pyEndUser skin. Otherwise, you can manually add the additional stylesheets file into your application skin.
Configure helper classes for a dynamic layout
Helper classes are applied to the dynamic layout container using the content CSS class field.
The tool provides a list of available classes. This tool lists all documented helper classes available to your application. You can add several helper classes to the same layout by inserting all class names in the text area on the right of the Helper class picker. Separate each class with a space.
Tip: In the Dynamic layout properties dialog, select the Gear icon next to any of the class fields to open the Helper class picker.
You can also add new helper classes to the list using the skin rule form by following standardized commenting format to display added helper classes in the tool.
Here is an example of standardized comment:
Use the slider in the image below to visualize how the flex-align-end helper class affects the positioning of the input fields in a form
Configure helper classes for a container
You can set a helper class around the container and header for containers that wrap a dynamic layout with a header.
Note: The settings for the container and header helper classes will be visible only after checking the checkbox 'Display header and title' in the General tab of the dynamic layout property pane
In the image below, the different border colors represent the boundaries of the outline, header and content.
Configure helper classes inside an element
Components dropped inside a dynamic layout can also be configured to use helper classes. The cell read-write class and cell read-only class fields determine which helper class is used for components that are read-write or read-only respectively.
In the following example, the fields are inside an 'inline middle' dynamic layout and aligned in a row. The input fields are configured using an 'auto' width and by default allow an input of 20 characters.
Use the slider in the image below to view the difference when adding the flex-grow-1 helper class to the Fuel type field.
It is possible to create more complex layouts using helper classes on elements inside a layout based on flex-basis. For more information, review this documentation.
Configuring helper classes inside a section include
Section includes as well as section inserted in a dynamic layout have the ability to use a helper class using two fields depending if the section is displayed as read-only or read-write mode. Below is an example of using the classes 'border-1x padding-2x' to create a 14px padding and a border around the section include.
Check your knowledge with the following interaction.
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?