Float concept in Pega UI

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

Update: The concept of float remains the same across different Pega versions. The screenshots in this blog article were reused from Pega 7 version, but the dynamic layout float configuration remains the same.

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 uses this floating in many places inside the designer studio.

Let me point out a few.

a) Designer studio header

Here the icons till ‘Create’ are floated left and controls from the 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 the 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 the user portal.

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

Based on the requirement, you can use it effectively.

4. Self – Clear

Self-clear is a 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 a certain height.

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

Save and test it in the 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.