Press "Enter" to skip to content

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.



Format uses mixinGeneral

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.


FormatHeader 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.
  1. Ramya Ramya

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

    • Premkumar G Premkumar G

      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.


  2. Hari Hari

    Hi can you explain any one real time project from scratch level

    • Premkumar G Premkumar G

      Hi Hari,
      I will keep it in mind, but not very soon.

  3. Venkatesh Venkatesh

    Funtastic post.. 🙂

    • Premkumar G Premkumar G

      Thank you so much, Venkatesh. Please subscribe and stay tuned for more posts.

  4. Hima Hima

    Waiting for the posts on connect rest, connect soap, soap service and case management.

    • Premkumar G Premkumar G

      I’ll post them soon, Hima 😀

  5. Fariyal Fariyal

    Prem, can you illustrate an example of configuring breakpoints for layouts in the skin rule.

    • Premkumar G Premkumar G

      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 🙂

    • Kiran Kiran

      Then what’s the use of Dynamic Layout.

      Usually dynamic layout is used for compatibility with all screen right?

  6. Sajal Agarwal Sajal Agarwal

    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!!

    • Premkumar G Premkumar G

      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

  7. Sravani Sravani

    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.


    • Premkumar G Premkumar G

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

  8. sravani sravani

    Thanks for the reply Prem. Even the Operator Preferences is same.

    • Premkumar G Premkumar G

      You are welcome, Sravani. 🙂

  9. Suman Suman


    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)

    • Premkumar G Premkumar G

      Thank you so much, Suman. 🙂
      Yeah I’ll write a separate post on Case management soon. Stay tuned. 🙂

  10. Shweta Bhatia Shweta Bhatia

    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?

    • Premkumar G Premkumar G

      Hi Shweta, My next posts will be on case management :). Stay tuned!

  11. Gangadhar Gangadhar

    Hi prem,

    How can we use pega login Screen as our application login Screen.

  12. Raghu K Raghu K

    Thanks for the post Prem 🙂 and as well could you explain about Pagelist and Pagegroup and where it can use and what is the difference between them??

  13. sreekanth sreekanth


    Thanks for post.I have one doubt on one requirement. If i wanted to display text color based on the value of text which means if the value is below 10 i wanted to display in green else more 10 values i wanted to display in RED color. Is there any specific configuration that pega supports this.
    Assume its text Input.


  14. Sachin Sachin

    I have refered this site to many of my friends
    Great work !!!

  15. Vivian Richard Vivian Richard

    Great Post. Thanks for all the examples. Please start a video training series.

  16. Sachin Sachin

    plz upload on parent child case concepts

Leave a Reply

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

error: Content is protected !!