Skip to main content

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.

css content for helper

Configure helper classes for a dynamic layout

Helper classes are applied to the dynamic layout container using the content CSS class field.

The Helper class picker 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 Open class editor Gear icon next to any of the class fields to open the Helper class picker.
helper class in a dynamic layout

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:

standardized format for helper classes

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.

setting helper classes for container

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. 

fields in inline dynamic layout

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.

more complex layout with flex-basis

 

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.

example of section include with helper classes

Check your knowledge with the following interaction.

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice