How to use CSS helper classes in Pega

 Hi Friends, In this post we will see how to add CSS helper classes

In W3Schools website, a exercise is present to display background image in UI. We will see how to do the similar kind of CSS changes in Pega using CSS helper classes

W3Schools Try it editor URL:

https://www.w3schools.com/css/tryit.asp?filename=trycss3_background_multiple

Step 1: Download below image and upload to binary file

Image to download:

Upload the image to a binary file rule, I have provided binary rule name as paper and image of type jpg and directory is webwb.

Path of this image is  webwb/paper.jpg

Step 2: Create CSS Helper class in Skin Rule

Open skin rule by clicking on application -> Skin

In the skin rule -> In Include Styles tab -> add a additional style sheet if not present.

In the CSS text file added class and its style. ( Class name should start with dot .)

Step 3: Mapping CSS helper class in UI 

We will try to add this paper image as background for the highlighted section in User Portal.

By using accessibility tool, I got the section used to display 'to do'

In the HomeWorkList section highlighted layout has 'to do' repeating dynamic layout. Open the layout properties in presentation tab and enable the display advance presentation option and add the class in container CSS class.

Save and reload the portal

Result:

We can see the background changed and our image displayed in background.

Hope you can understand about this topic. If you have any doubt ask in comment.☺

My knowledge about User Interface in Pega

 Hi Friends, In this post, I will add post regarding User Interface 

1. How to display ToolTip
2. How to use Segmented Radio button
3. Inline Layout 
4. How to use CSS Helper class
5. How to use Initial Control
6. Coming soon...☺

Ask in comment if you wants to know any particular UI Elements.

How to display Smart tip in Pega

 Hi Friends, In this post we will see how to display Smart tip in UI.

What is the use of Smart tip?

By using smart tip we can provide some small information about the content we are displaying.

In below sample Pega section we can see the Smart tip.

To know the section used for this design, I am using accessibility tool to get the section name.

So from the above screen, we can see section name used is pyStudioHome.

pyStudioHome Section:

Guardrail details present in an embedded section, so open it.

In the pxGuardrailsGadget section we can able to see the link displaying in UI.

Click on the link and go to action tab.

In the action tab , we can able to see 2 actions involved.

1. Set Style -> to display help cursor
2. Show Smart Tip -> to display smart tip

Action 1:

In Set Style action, for Style Source ->  Inline style was selected and Inline style provided is Cursor:help;

On Hover the link a help cursor will display.

Action 2:

In the show smart tip action, Tip Source selected is Field Value   -> So we can map field value rule to display message content. We can map custom message also if we want.

Field Value rule mapped in the show smart tip action.

So above message is displaying on clicking on the link.

Hope you can understand this concept. If you have any doubt ask in comment.