If I had bored you with the previous topics, then get a look into it.
COLOURFUL UI 🙂
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:
- Automatically when you create a new application.
- 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,
- Component styles
First, let us see Mixins.
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:
- Typography – Text styling
- Background – Background styling
- Border – Border styling
- 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:
- We can override the existing mixin.
- 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:
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.