Press "Enter" to skip to content

What is float concept in Pega UI?

15

Introduction
Floating in Pega is a concept, in which we float the components in one side or to the other side of the website.

  • Prior to Pega 7, if we need to accomplish this floating, then we have to include several nested layouts together and it is a tedious process.
  • Pega introduced this floating concept to make the UI designer life easier πŸ™‚

Pega use this floating in many places inside designer studio.

Let me point out few.

a) Designer studio header

Here the icons till ‘Create’ are floated left and controls from search box are floated right.

b) Rule form header

  • You can see that the buttons are arranged neatly to the right hand side.
  • If you open the section β€˜RuleFormHeader’, then you will see that the buttons are included in the dynamic layout with float right.

What are the advantages of Float?

  • Floating supports responsiveness. Whatever device you use – say it to be a laptop, a tablet or a mobile the components gets floated neatly either to the left or to the right.
  • No need to use complex nested layouts to achieve this floating. It’s just a checkbox configuration in the dynamic layout.

How do you configure floating concept in dynamic layouts?

  • Open dynamic layout properties form and click on the presentation tab.
  • You have four important configuration points:

a) Float

b) Set layout width to auto

c) Clear floated layouts

d) Self-clear

What are the prerequisites to test the floating concepts?

Step 1: Create a section rule and include a dynamic layout – (Dynamic layout -1).

Step 2: Inside the parent dynamic layout 1,Β  insert 3 more dynamic layouts.( Dynamic Layout – 1.1, .12, 1.3).

Step 3: Add three buttons in 3 inner layouts ( 1.1, 1.2, 1.3 ).

Everything is ready. πŸ™‚ Let’s go one by one.

1. Float – The values can be None, Left, Right.

  • Open each inner dynamic layout ( 1.1, 1.2, 1.3) properties one by one,

Inner dynamic layout 1.1 – Float left

Inner dynamic layout 1.2 – Float right

Inner dynamic layout 1.3 – Float left

  • Update the dynamic layout 1.2 to float left.

It means all inner layouts are floated left.

Check in the user portal.

Note: Whenever you select float – left or right, then set layout width to auto will always be true.

2. Set layout width to auto –

  • This field determines how much width the floated layouts can use. This is applicable only when the layout is floated.

True – the item use only the required layout width.

In the above example, ‘Set layout width to auto’ is true for all 3 inner layouts.

False – They use up the full width. Floating concept gets affected here.

We will see it in the example.

  • Let me change. Un-check the ‘Set layout width to auto’ in button 1 alone and check the portal.

Inner layout 1.1 – Float left; Set layout width to auto – False

Inner layout 1.2 – Float right; Set layout width to auto – True

Inner layout 1.3 – Float left; Set layout width to auto – True

You can see inner layout 1.1Β  (button 1 – marked) occupies the complete width. Button 2 & button 3 are inline.

Note:Β Whenever you float a layout, it is a best practice to set layout width to auto.

3. Clear floated layouts –

  • When clear floated layout is checked in a dynamic layout, then it clears all the above floated layout.

Here in our example, I checked clear floated layouts in inner dynamic layout 3.

Dynamic layout 1Β  – Float left; Clear floated layouts – False

Dynamic layout 2 – Float left; clear floated layout – False

Dynamic layout 3 – Float left; Clear floated layout – True

Check in the user portal.

You can see the dynamic layout 3 assumes there is no floated layout above and floats left in a new line.

Okay, let me check the Clear the floated layouts in dynamic layout 1.2 to true.

Dynamic layout 1Β  – Float left; Clear floated layouts – False

Dynamic layout 2 – Float left; Clear floated layout – True

Dynamic layout 3 – Float left; Clear floated layout –False

Check it in user portal.

You can see the inner layout 2 assumes no floated layout above and floats along with inner layout 3 in new line.

Based on the requirement, you can use it effectively πŸ™‚

4. Self – Clear

Self-clear is bit different. Out of the four options, only Self-clear is based on the content.

So what is the role of Self-clear?

  • Floated layouts generally don’t account for height. So how the height is handled? Self clear handles it.

For this demonstration purpose, we keep an additional outer dynamic layout – 2 and insert a button – button 4.

Remember this layout is not floated.

Here,

Outer dynamic layout 1 – Self clear –True

Outer dynamic layout 2 – Self-Clear – True

Now check the user portal.

You can see the outer dynamic layouts occupy certain height.

Now let’s uncheck the Self-clear in outer dynamic layout 1.

Save and test it in user portal.

You can see the outer dynamic layout 1 occupies ZERO height, so that outer dynamic layout 2, which is not floated gets appended like that.

Note: This Self-clear option is always default checked in dynamic layouts. Please leave it as such.

Please test on your own, varying the combinations.

Hope you get the basics about floating concepts πŸ™‚

Watch out for my next post on ‘Dynamic layouts‘ (http://myknowpega.com/2017/06/12/pega-ui-configuring-dynamic-layout/) top to bottom !!

 

 

 

 

 

  1. Suresh Suresh

    Bro xlent u r the masterpiece

    • Premkumar G Premkumar G

      Thank you so much for your appreciation, Suresh πŸ˜€
      Makes me feel happy πŸ˜€

  2. Pavani Pavani

    It was soo helpful keep going !!

    • Premkumar G Premkumar G

      Glad that you find it helpful, Pavani. πŸ™‚
      Yeah sure, I’ll keep on posting new stuffs. Thank you πŸ™‚

  3. Ravi Kiran Ravi Kiran

    First of all , Great Tutorials Prem , Thanks a Lot.
    If i have Common Section (For example A Footer Page with a Company Logo) , How can i include that in all my sections

    • Premkumar G Premkumar G

      Thanks Ravi Kiran :). Try including the section in required harness

  4. Jay Jay

    I have been seeing your posts about Pega related topics, it’s so absolute and gives us the exact path. Happy to see such guidance to work on Pega.
    Thanks Prem. Keep up your good work. If you need any help I would love to. I have 10+ years of experience in Pega.

    • Premkumar G Premkumar G

      I’m feeling so much happy to hear your appreciation, Jay. πŸ™‚
      You are most welcome. Yeah, I’ll keep on posting stuffs. πŸ™‚
      I feel so much grateful for you for lending your kind help. If I need any help, then I’ll definitely contact you. Thank you much, Jay. πŸ™‚

  5. Manish Manish

    We have a requirement, in a section we need to capture our Picture image and display it, just like FB we ask user to upload their image and then will be displaying it. Prem can you help here any OOTB…

  6. krishna krishna

    Can u share clear explanation of Harness and portals

    • Premkumar G Premkumar G

      Yeah, I’ll post about them soon. Stay tuned. πŸ™‚

  7. Muneeb Muneeb

    Thanks for detailed explanation.
    I have a requirement, In a dynamic layout I want the “OK” and “Cancel” button to appear in center. I tried using inline grid double, but without using css and using float can we achieve this.
    Secondly, what is the impact of using nested Dynamic layouts, does it has impact on performance?

    • Premkumar G Premkumar G

      Hi Muneeb,
      Try to include a dynamic layout with inline grid double format. Two 2 different dynamic layouts in two grid blocks. Place the OK and cancel button in separate dynamic layouts.
      Use float right in layout 1 and float left on layout 2. I think it will work.

      You wont have any performance issue using nested dynamic layouts πŸ™‚ . Pega introduced to solve complex requirements

  8. Elayaraja Elayaraja

    Hi Prem,

    We dont need the PDN for learning Pega anymore πŸ™‚ πŸ™‚

    Keep Posting!!!

    • Premkumar G Premkumar G

      Hello Elayaraja,

      Thank you so much for appreciating me with such big words. Thank you so much. πŸ˜€

      Stay tuned !!

Leave a Reply

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

error: Content is protected !!