What is float concept in Pega UI?

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 !!