Pega 7 introduced many new features in the User Interface category. One of the main features is the introduction of dynamic layouts.
Every Pega application is made of two parts:
- Content – Supported by HTML rules
- Presentation – Supported by Skin rule
Note: HTML 5 is the fifth and current version of HTML standard.
All new Pega 7 application complies with HTML5 standard. 🙂
Applications prior to Pega 7 can be rendered in HTML5, by configuring in the application rule form.
What is a Dynamic layout?
- It allows flexible display of content.
- It separates the content from the presentation.
You can ask me, ‘What do you mean by separating content from presentation?’
- Open the section rule form, you can include a dynamic layout.
- Inside the dynamic layout, we can include properties, controls, section & other dynamic layouts.
- In the skin rule, you can create various formats for the dynamic layout. The formats will include item spacing, alignment, line spacing etc.,. Some standard formats are Default, Stacked, Inline, Inline grid double etc.,.
- In the dynamic layout properties, you can select which format needs to be displayed.
Dynamic layouts can be nested inside other dynamic layouts.
How do you include a dynamic layout in a section?
Step 1: Create a section.
Note: Whenever you create a new section, Pega places a new dynamic layout in the UI work area.
Step 2: In the toolbar, select the layout picklist.
Step 3: Click on the layout (marked red) and drag it inside the work area.
You will get a popup to select the layout type. Select dynamic layout.
Now you can start including any layouts, Basic & advanced controls to start building UI.
Scenario: I have to display a simple login screen to the User.
UserName, Password & a submit button
Step 1: Create a new section and include a dynamic layout.
Step 2: Go to toolbar -> Basics -> Text input. Drag and drop inside dynamic layout.
Repeat the same for other text input and a button.
Step 3: Now your layout is ready. Let us configure the properties for text input. Just double click on the text input field.
Include the property and valid label. Do the same for other property.
Step 4: Now it’s time test it in user portal 🙂
Good. We got it 🙂
Let’s dig in deep to know the configuration points for dynamic layout.
Double click on the dynamic layout.
There are 3 main tabs:
Layout format – This is a key presentation part that determines how a layout appears at the end portal.
- These formats can be specified in the skin rule.
Please go through the post on ‘Mixins & Formats‘ (http://myknowpega.com/2017/05/20/skin-formats-mixins/) to get more details.
- The commonly used formats are Stacked, Inline, Inline grid double etc.,.
Let’s select the format as Inline and check the user portal 🙂
You can see that all the fields come in the same line.
You can also use Inline grid double or triple to restrict 2 or 3 columns inline respectively.
The commonly used formats are shown below.
At the end of the post, we will see the presentation configuration in skin rule J
Container format –
- We are able to select one of the container formats we specified in the skin rule.
- Container formats used to specify the styling for header, body & outline of the dynamic layout.
You can also select custom and include a HTML rule to style the dynamic layout container.
Container format – tutorial
Step 1: Open the application skin.
Step 2: Under components, open the Container.
Step 3: Click on the default format. Actions button -> Save as, create a new format.
Step 4: Update the Header background color to red for testing purpose.
Step 5: Now in the section dynamic layout, add our container format.
Step 6: Check in the user portal for red header background.
Refresh condition – You can refresh the layout based on the condition you specify.
Let me explain you with an example.
- Refresh condition for layout was introduced in Pega 7. Earlier if we need to achieve the same, we will just create a new section and refresh the whole screen.
Step 1: Introduce a new layout below the existing layout and add a field PolicyName.
Step 2: In the action-set, just post the OnChange value to clipboard.
Step 3: Now open the username field properties and expand the refresh condition expression builder. Add PolicyName changes.
So now, whenever the Policyname value changes, this layout will be refreshed.
Step 4: You can also add a Data transform or run any activity to process. For testing, I have added a Data transform SetUserName to set the value from Policy Name.
Now, let’s test it in user portal.
Whenever you change the policy name, username should reflect automatically.
Works like a charm 🙂
Visibility – You can specify the visibility condition for the dynamic layout.
Always – It will be visible always.
Condition (expression) – Based on some expression returns true, the layout will be visible.
Condition(when) – Based on when rule returns true, the layout will be visible.
Note: When you specify an expression, you have an option to run the visible condition on client side.
Defer load contents –
You have an option to defer the content loading. On selecting, you can specify a pre-loading activity.
Why do you defer a layout?
- Imagine you are in an assignment flow action. You need to show some data, which is stored in external applications. But this data is not a mandatory criteria to complete the assignment. Just for reference to the assignee.
- Remember, when the screen is loading, we are not able to do any operation like submitting the assignment. Since the data loading is not necessary to complete the assignment, we can collapse the layout and use defer load contents. In the pre-loading activity, you can specify the connector activity to load the data.
Display header and title – On selecting the checkbox, container settings box will be visible.
Title – You can refer to a text, property or a field value.
- You also have an option to specify the title using an icon.
Body Visibility – You can control the body visibility using expression or when rule.
Let’s check on the user portal. You can see that the header & body is missing based on visibility.
Floats – This is an interesting aspect with dynamic layout.
You can go through my previous post on ‘Floats‘ (http://myknowpega.com/2017/06/12/pega-float-concept/) 🙂
- You have an option to specify Inline style or custom CSS class in the presentation tab.
What are the differences between Inline style & custom CSS class?
- Custom CSS class is introduced in Pega 7 and has several advantages over inline style.
- Custom CSS class are reusable components and can be reused in any dynamic layouts. Inline style is not reusable. You need to manually add individual style.
I will make a short post on Inline & Custom styles soon 🙂
Dynamic Layout format
What are the things you can configure in a skin rule?
Open Application skin -> Component styles -> Dynamic layout
- You can see the inbuilt formats for dynamic layout. Let’s create a new one and test it.
Go to actions – Do Save as default format with new name.
There are 4 important settings for a dynamic layout format:
- Layout settings
- Label settings
- Item spacing
- Responsive breakpoint
Width settings – You can specify either maximum or minimum width. Else, leave both blank.
For testing, I added maximum width as 50%. Click on ‘about this‘ to know about sample spacing 🙂
Item arrangement –
Since this is a stacked layout, inline grid – with columns 1.
Inline grid double – column per row =2
Let’s update the column per row =2
Minimum item height – You can specify the item height.
Vertical alignment – Top, middle, bottom. You can see from the picture how it will be aligned.
Label position – You can set the label to appear top or left or none (not visible).
For testing, let’s make the label to appear on left.
Item spacing – You can specify the item spacing on all 4 sides or apply an uniform margin on all sides.
For testing, we have specified all values to 40 px.
Note: This can be overridden by the spacing we specify in the presentation tab.
What is responsiveness?
- Imagine, you need a layout containing login screen to appear in all 3 devices – Laptop, tablet and mobile.
- The pixels will vary for these devices. If the layout contain many fields and columns, then we can’t effectively see it in the mobile device.
- Let us say, we have Inline grid triple – It is clearly visible in laptop and tablet but won’t look good in mobile.
So, here we introduce a breakpoint. So when a certain pixel (or a range, then we can transform the layout to another format or hide the layout).
We can either transform to other format or hide the component. Now save the format.
Okay. Now in the login screen dynamic layout, we can add the new format.
Check the login screen in user portal. Don’t get shock 😀
Let me explain the format again.
- Maximum width – 50 % – You can see the half area in the right hand side empty. Used only 50%.
- Label settings – Left – You can see the labels are aligned left.
- Item spacing – You can see 40 px margin on all four sides.
Always remember to make use of the existing formats available in the SKIN rule. If there is some requirement which needs a different format, then go ahead and create a new format in skin rule. Refer the same in the section dynamic layout 🙂
Hope you should have become familiar with dynamic layouts now 🙂
By the way, if I missed something, then please pardon me. I were watching India-South Africa match 😀