Skins
Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.
Skin architecture
The skin holds the presentation settings for your application or your portal, but includes no content, only the rules that govern how that content is styled. This approach helps you save time while building your UI, because no matter what components you use, or how many times you change their configuration, the application always draws presentation settings from the skin as a single source.
By default, a portal points to the skin that is specified in the application, which ensures that all portals in your application have the same look and feel. You can associate each of your portals with a different skin, but having a single skin for the entire application is the best practice. If you do not specify a skin for your application, the application defaults to the pyEndUser skin.
Skin inheritance
You can use skin inheritance to pass down settings from a parent skin to a dependent skin. For example, a bank application can use a skin that defines the shape, color, and font for the buttons. If the bank's mortgage division uses a different color in branding, you can create a skin for the mortgage division that defines the color of the button but inherits the rest of the settings, including the font and shape, from the parent.
When to use a CSS helper class instead of a skin
If the skin in your application has many sets of settings that define the same type of a component, and these sets vary only slightly, you might benefit from using Cascading Style Sheet (CSS) helper classes to adjust layouts and cells. For example, you can use standard CSS helper classes to center elements or change their standard margins.
For more information, see CSS helper classes.
- Viewing test coverage reports
View a report that contains the results of test coverage sessions to determine which rules in your application are not covered with tests. You can improve the quality of your application by creating tests for all uncovered rules that are indicated in the reports.
- Creating skins
Build a vivid interface that matches the branding requirements of your business with less effort. By keeping all presentation settings in the skin, you can define a single source of styling information for your application, and ensure a consistent interface that is convenient to update and maintain.
- Specifying a skin for your application
Define a unified look and feel for your application by linking a skin to an application. A skin ensures that all portals within an application derive UI settings from a single source, which helps you maintain a consistent interface that is easy to update.
- Component style formats
Component style formats help you customize the appearance of your user interface by storing information about the appearance of specific UI elements, such as layouts, error messages, or buttons. You can assign style formats to layouts or controls, and when you update the style format, the appearance of the associated UI element changes automatically.
- Mixins
Mixins are reusable style patterns that define the typography, border, and background styles of UI components in your application. By using mixins, you can ensure consistency across the user interface, maximize re-use, and minimize future development effort.
- Included styles
Use the Included styles tab of the Skin form to select components to be supported in your application and to specify additional style sheets for the application.
- Skin inheritance
Skin inheritance helps you reuse design patterns between skins. By setting up inheritance relations between skins, you can adopt a tiered approach to styling that reduces development effort on similar applications.
- Icon fonts
Use icons to add images to controls. Pega Platform includes a set of icon fonts in the py-icons CSS text file, which is in the UI Kit ruleset. Many of these fonts are used in the standard user portals and forms.
- Upgrading a pre-7.1 skin
You can upgrade a pre-7.1 skin.
- Creating a custom style
You can specify a custom style on the Advanced tab of the Properties panel. You must enter the custom style name.
- More about Skin rules
To ensure uniform styles throughout your application, create and maintain styles through the Skin rule.
- More about report definition rules
About the pxRetrieveReportData activity
Previous topic Styling your application with design systems Next topic Creating skins