how to use formats & mixins in skin rule


If I had bored you with the previous topics, then get a look into it.


Β Content + Presentation = AΒ good application

  • See whenever you come across a website, first people’s eyes go to the presentation part.
  • Presentation should be at least a decent one to attract viewers.

Let’s concentrate on presentation part here.


Just think, “Why it got the name skin?”. Yes, skin determines how an application looks.

Look at the above picture. You can see some theme right. A dark blue with white theme. If you see the designer studio, then you will note a black with grey color theme.

Skin determines the theme

Format & Mixin

Again look at the above pic.

You can see different components right – Link, button, icon, dropdown.

You can specify different formats for these components. Format can use styles like font, color etc., to determine the appearance of the component. Formats also use mixin.

So, “What is mixin?”


  • It is a style pattern.
  • It can determine style for texts, border and background.

Let’s take search button in the picture.

  • Search button is a component which use a format called simple.
  • Simple format use a mixin called general.

In general, mixin specify the font size, color etc.

Component – Buttons

Format – Simple

Mixin – General

You should get an idea now regarding, how the presentation of every component is determined in Pega.

Let’s dive deep πŸ™‚

What is a Skin rule?

  • Provides the presentation for the content.
  • You can specify the presentation for various elements within the application.
  • You can also include css styles.

How do we configure a skin?

Skin rule is part of user interface category.

Skin rule gets created by 2 ways:

  1. Automatically when you create a new application.
  2. Manually you create a new skin rule.

When you create a new skin rule, you have an additional configuration point.

You can inherit formats and skin from an existing skin. You can use the option to extend OOTB or any custom skin.

Here we used OOTB skin – pyEndUser71_Zen

In this post, we are going to exclusively discuss about Mixins & formats.

So the first 2 tabs,

  1. Component styles
  2. Mixins

First, let us see Mixins.

Mixin tab

Since we inherited from OOTB skin, all the mixins are inherited.

  • Defines reusable styles.

Why we call it as reusable?

  • Because Mixins can be inherited by other mixins.
  • Mixins are reused in different component formats.

Styles – Specify the font color, size, border color, BG color etc.,.

You can define styles under four categories:

  1. Typography – Text styling
  2. Background – Background styling
  3. Border – Border styling
  4. Combinations – If you want to use all 3 features in a single mixin, then create here.

1. Typography category

Here we have the privilege to modify the styling attributes related to texts.

We will have two options here:

  1. We can override the existing mixin.
  2. We can create a new mixin.

Override – Overides the existing mixin.

Saves As – Creates a new mixin.

Let us test overriding now. Click on override.

This is the initial user screen.

Now I am going to update the font size from 14 – 40.

You have two tabs. All the new mixins/inherited comes under My Mixins tab.

Now let us test the user screen again.

BOOM… Sorry ZOOOM !! πŸ˜€

You will get a question, “Why only the labels have been updated to new font size? We have overridden only the general mixin, then how come this has happened?”

The answer for this question is, the mixin we modified is referred in a label component standard format.

Component – Label

Format – Standard

Format uses mixin – General

So format use mixin and the changes are reflecting. Cool right. We will check about formats later in the lesson.

2. Background category

You can modify the background color here.

Let’s inherit the header background and change the color.

Launch the user portal and test the header.

Red is so HOT πŸ™‚

How this is happening?Β Β Β Β Β Β Β Β Β 

The UI component is screen layout.

Component – ScreenLayout

Format – Header Left

Β MixinΒ – Header background

3. Border category – We can modify the border styles.

4. Combination – Combination of all three in a single mixin.

For a change, instead of overriding, create a new mixin.

Do, Save as.

I gave the name as green error πŸ˜€

Now update the text color to green.

Let’s first check the user portal.

The error message is in green color.

Since we just created a new mixin. We never add it to any component format.

Let us go and add to error component.

Step 1: In skin move to components.

Step 2: In the components, open the error component.

Step 3: Switch to Inline errors tab –Error text.

Add the newly created mixin – Green error.

Step 4: Test in the user portal.

It’s green πŸ™‚

I think, I don’t want to explain formats. You got it, right?

Just a brief about formats.

You have components grouped under four categories:

  1. General
  2. Layouts
  3. Controls
  4. Reports

You can create any number of formats for the components.

In the section, component properties, you can specify the format in the presentation tab.

Okay, let me explain with an example.

Component – dropdown

Scenario: We need to create a new format for dropdown and add it in section.

Step 1: Components tab -> save as Standard format

Step 2: Give a new name.

Step 3: In the components tab,

Dropdown -> newformat-> Update to new mixin – Green error

As we have seen before, this mixin will display the text in green color. We have reused it in error as well as dropdown component.

Step 4: In the section, open the properties for dropdown field.

In the presentation tab, update the new format.

So, we should assign the dropdown text values to be in green color.

Yes, we are end of this long post πŸ™‚

Things to remember:

  • Using mixin and format effectively can eliminate the dependency on css style sheets.
  • You create a mixin and reuse it in formats. In section, you can use the format for different UI components.

20 thoughts on “how to use formats & mixins in skin rule

  1. Prem can u please give us some real time scenario on Split for join,split for each and Spin -off Shapes with Usage

    1. Imagine you are in Loan processing application. You started a Loan processing flow. You entered all your details. You applied home loan and auto loan.

      If the loan process is different for home and auto loan – go for Split join subprocess.

      If the loan process is same for home and auto loan – go for Split for each.
      Have loan details in a pagelist Loan() and start the same flow.

      Spin off is pure parallel processing.
      If the loan is to be approved by two people simultaneously, then you can use a subprocess spin-off to send the load assignments to both the approvers.


    1. Example ?!!. One quick question. You have 2 websits. One perfectly fits in mobile. The other we need to use the scroll bar to view the complete website. Which you prefer?. Yes we will prefer the website without any scroll-bars.

      Now say you have a pega application, that can be accessed in mobile. You are displaying worklist with 10 columns. Can you achieve it without scroll-bars in mobile? You cant. Here you need to use breakpoints to clear out the unwanted columns. So that based on pixel, we can modify the UI to appear differently in diffferent devices.

      Hope i clear you πŸ™‚

  2. Hi Prem,

    I am thankful to you that you have made learning PEGA so easy, your work is awesome and I appreciate your efforts and the way you have designed the content. I am waiting eagerly that you will come up with the explanation of a real time Project soon. I have referred your page to many Colleagues in office and we are counting our work on the knowledge you are sharing.

    Thanks a ton!!

    1. Hi Sajal Agarwal,

      I’m so much glad to hear such big appreciative words from you. Thank you so much for your kind words. Yeah, I’ll definitely explain with a real time project soon. Thank you so much for sharing my work. It means a lot to me. No words can tell how happy I feel and how thankful I am to you. I’ll keep on posting new stuffs. Stay tuned.

      You are most welcome, Sajal Agarwal and it is my pleasure!!

      Premkumar G

  3. Hi Prem,

    We are facing some issue like when i login to the portal as developer and launch the portal the UI Styling is different and when i Login as a user styling is different. Both the application skin and the portal skin are same.

    Can u please give your inputs on the same which will be very help full.


    1. Hi Sravani,
      Please check the operator preferences. The skin rule specified in the application or portal can be overridden in the operator profile preferences

  4. Prem,

    your posts are really useful for us πŸ™‚

    can you please add some information on Case Management and portal(How to add our portals to landing menu)

  5. Hi Prem,

    Nice post… Thanks for your work .

    Please can you post something on case management and relationship between parent and child.
    Wait Shape and how to communicate from child to parent and who can we make parent wait till child is processing?

Leave a Reply

Your email address will not be published. Required fields are marked *