Press "Enter" to skip to content

How to configure dynamic layout Pega UI?

26

Introduction

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:

  1. Content           – Supported by HTML rules
  2. 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?’

Content –

  • Open the section rule form, you can include a dynamic layout.
  • Inside the dynamic layout, we can include properties, controls, section & other dynamic layouts.

Presentation –

  • 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:

  1. General
  2. Presentation
  3. Actions

General tab

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.

It means no server trip is required and the inbuilt Pega JavaScripts helps to run the condition in the browser 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.

Presentation tab

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:

  1. Layout settings
  2. Label settings
  3. Item spacing
  4. Responsive breakpoint

Layout settings

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 settings

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.

Responsive breakpoints

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.

  1. Maximum width – 50 % – You can see the half area in the right hand side empty. Used only 50%.
  2. Label settings – Left – You can see the labels are aligned left.
  3. 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 😀

  1. Hi Prem,

    Really good stuff.!
    Want to fill one gap:
    Can we have one clear example scenario on “Defer Load Content” in detailed.

    • Premkumar G Premkumar G

      Thanks Pradeep for pointing it out. I will try to add it soon 🙂

  2. Amir Amir

    In field value rule, is it possible to to use css for inside field value rule and suppose I want use same css for dynamic layout header…..

    • Premkumar G Premkumar G

      You can add HTML tags inside field value to style the content 🙂

  3. Maruthi Maruthi

    Great!! Well explained.

    • Premkumar G Premkumar G

      Thank you so much for your appreciation, Maruthi. 🙂
      Glad that you liked it. 🙂

  4. sai sai

    Hi Prem,
    can you please tell me diffrence between all layouts?

    • Premkumar G Premkumar G

      Hi sai,
      Based on the usage you need to use different layouts. For example, if you want to display it in grid tree, then you have to go for repeating grid layout or tree layout.
      To explain it clearly, I need a big post. I will try to make it soon 🙂

  5. Saikrishna Saikrishna

    Can u explain what makes dynamic layout so responsive.

    • Premkumar G Premkumar G

      Hi Sai,

      It’s not specific to dynamic layout. If your application is HTML5 compliant, then the layout can be more responsive.
      Also note that you can configure for responsiveness for all different layouts in skin rule.
      I will try to make a separate post on responsiveness soon 🙂

  6. Worthful info Prem.

    Q: Where do we mention the details of adding rows and columns in dynamic repeating grid layout at runtime/dynamically.

    TIA

    • Premkumar G Premkumar G

      Can you please confirm, It is dynamic repeating layout or repeating grid.

      In case of repeating grid, you can have an icon with an action set to add item or delete item. These are inbuilt features 🙂

  7. Pradeep Pradeep

    Hi Prem,

    Can you post an article based on Repeating layouts. thanks

    • Premkumar G Premkumar G

      Hi Pradeep, my next User interface post will be on repeating layouts 🙂

  8. Jay Jay

    Hi Prem,
    I would like to know what is the difference between Pega V6 and V7? May the main features which they have added like Dynamic layouts.. etc… Can you post something on this? Would seriously help me. Thanks in advance.

    • Premkumar G Premkumar G

      Sure Jay. I will make a post on key difference between Pega V6 & Pega V7 soon!

  9. Pradeep Pradeep

    Hi Prem,

    How do we apply skin rule, once created.
    Actually, i did some configurations in skin rule for dynamic Layout by adding new format. And i saved it.
    But once i open the dynamic layout properties from section. The created new format is not visible/shown under other layout formats.

    • Premkumar G Premkumar G

      Hi Pradeep,

      I do face the same issue sometime.
      Please try the following options
      1. Just entry the format name and save the section ( though the new format don’t appear in autocomplete)

      If not then check if the Skin rule is properly configured. I mean check the application skin is overridden in the portal rule or in your user preference.

  10. Appu Appu

    Hi prem,
    what is mean by responsive UI

    • Premkumar G Premkumar G

      Hi Appu,

      Responsive UI – you may need to access a Pega application in different devices. laptop, tablet, mobile phone.
      you might have seen different websites automatically adjust their screen width based on the device.
      like the same, we can make pega application to adjust their layout to fit in nay devices.
      This is called the responsive behavious

  11. suma suma

    hi prem,

    i have created skin rule but could not see in dropdown of container formats in dynamic layout properties but anyway i have given the format name manually but i could not see any changes when i have test it.

    please help

    • Premkumar G Premkumar G

      There many be some reasons
      1. Please check if the correct skin is applied to your portal.
      2. Some times, the newly added format will not available as a dropdown. You can select other option and manually type out the format name.

  12. Pradeep Pradeep

    Hi Prem,

    Can we have post on Harness.

    • Premkumar G Premkumar G

      Hi Pradeep,
      Kindly stay tuned. I’ll post about it soon. 🙂

  13. Preethi Preethi

    Can you post an article based on inserting images.

    • Premkumar G Premkumar G

      Yeah I’ll try to post about it soon.

Leave a Reply

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

error: Content is protected !!