In this blog article, we will debug UI screens using Browser developer tool and also understand how to customize the styles for the UI element.
The article was created using earlier Pega 8 version! but the core concept remains the same! Use this blog article to learn the concepts and you can try the entire tutorial in the latest versions as well. This article is applicable only for UI-Kit based applications
We will discuss two topics in this blog article.
- Debug and test your styles using the browser developer tool
- Apply CSS styles using Pega CSS rule.
We will start by showing how to debug a UI using browser developer tools ????
How to debug UI and styling using browser developer tools?
Note: In the below screenshot, I am using edge. The look and feel of the developer tools vary based on your browser
Step 1: Open any assignment from the user portal, that contains a few UI fields.
Step 2: Place your mouse pointer on any field and right-click and select the inspect element or view source.
This opens up the Document Object Model – DOM content. The HTML content of the document.
Using the styles widget below, You can also inspect the styling on each element in your browser.
First, let’s see how the DOM content looks for Pega UI
With HTML5, pega creates a lot of div tags for sections, layouts, container formats etc.
Step 3: Open the section rule to see the configurations.
You see it is a simple section, inside the section you see a stacked layout and inside the layout you see 4 fields to capture the details.
Step 4: Now go back to the User portal and inspect the element again
Use the highlighted option to parallelly pinpoint the div tags for each corresponding UI element.
You see the below block corresponds to the section.
Keep on expanding the tags to see all the div tags and classes for the layouts and the text input fields embedded or collapsed inside.
The above picture shows div class – flex content layout-content-stacked content-stacked content-items-maxwidth for the stacked layout we used.
Pega UI engine generates all these div tags and classes. Below you will see a custom CSS class is added in the layout configuration and you see the same in the div tags.
Scroll down and just concentrate on all the class attributes. You can reason on it on your own ????
You see some class for labels and a class – field-item dataValueWrite for Input text.
You saw the document object model or the HTML content.
Let’s see some styling for those contents.
Step 5: Place your mouse on the stacked layout div tag and check on the styling.
Styling tab, gives you the corresponding CSS class and the style attributes.
You may also see some of the styles overridden in the stack if you scroll down. Attributes in the flex.layout-content-stacked takes high priority and overrides the attributes below
Step 6: let’s add some styling for the stacked layout
I am going to add a new attribute background Chelsea blue. Just click here to add or update attributes.
As soon as you add, you can notice the difference in your UI. So, what you did here is, you added background color as blue for the class that belongs to the stacked layout.
It doesn’t impact only our collect information section, but all other sections in the document that use stacked layout ( flex.layout-content-stacked class)
Whatever you do in Vegas, stays in Vegas!! Whatever changes you do in the developer tools, stay within the screen at the moment!!
It is all client-side changes, so if you refresh the screen (trigger server side), then all your client-side styling you did in the developer console will be lost.
You can refresh and check it ????
How to style the UI element using CSS rules?
Before we saw some client-side changes using developer tools. So, once you do some debugging and find the right styling you can apply it in your CSS and make it permanent.
I am not going to touch more detail on the text file rule. I will save those for separate article on text file rule
Step 1: Create a new text file rule – Say CustomDemoApp as file type css
Step 2: Add the css style for the class –
It shud always follow the patter link .css class {<all your styles>}
.flex.layout-content-stacked{
background:blue;
}
Step 3: Add the CSS file in your skin.
Note: If the style applies to your entire application, add it to your skin rule, If it applies only to specific harness rule then refer the CSS rule in the harness form.
Step 4: Now logout and login.. see the change everywhere ????
Please discard your changes. Though I love the blue colour, it doesn’t look good as a background colour
So, what you learned from this post is, how to debug your UI using browser developers’ tools, test your styles locally from your browser, and apply the styling permanently using the CSS rules.
I hope at least a few learnt something new on the UI topic ????
