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 !!
Bro xlent u r the masterpiece
Thank you so much for your appreciation, Suresh π
Makes me feel happy π
It was soo helpful keep going !!
Glad that you find it helpful, Pavani. π
Yeah sure, I’ll keep on posting new stuffs. Thank you π
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
Thanks Ravi Kiran :). Try including the section in required harness
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.
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. π
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…
Can u share clear explanation of Harness and portals
Yeah, I’ll post about them soon. Stay tuned. π
what are different types of harness?
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?
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
Wonderful Explanation.
Hi Prem,
We dont need the PDN for learning Pega anymore π π
Keep Posting!!!
Hello Elayaraja,
Thank you so much for appreciating me with such big words. Thank you so much. π
Stay tuned !!
Hi
When i give this.
Inner dynamic layout 1.1 – float left
Inner dynamic layout 1.2 – float right
Inner dynamic layout 1.3 – float left
And run section it shows all buttons are left side only.