Vinay Kamath (kamav)
Senior Director, Product Engineering, User Interface Technology
Pegasystems Inc.
kamav Member since 2012 2 posts
Posted: November 20, 2018
Last activity: November 20, 2018
Posted: 20 Nov 2018 15:21 EST
Last activity: 20 Nov 2018 15:47 EST

‘Optimize layout, markup and CSS’ setting in Dynamic Layouts

Investing in Pega software ensures that your applications are future proof, in that as technology evolves Pega updates the code it generates to the latest standards and improvements. We first introduced dynamic layouts in Pega 7. These were the first <DIV> based layouts introduced in our generated UI and were in part made possible by the deprecation of support for IE 5.5, IE 6 and IE7. We have stayed up-to-date with Microsoft and deprecated IE8, IE9, IE10 and quirks-mode based UI. This has enabled us to change the generation of the dynamic layout code to be more modern. As part of that evolution we introduced the ability to generate CSS Flexbox based markup in Pega 7.3. As part of that change we reduced the generated markup as well, thereby improving the performance over the wire and on the client since the browser processes less markup. In 8.1 we have taken that one step further and further reduced the markup based on certain configurations of the dynamic layout. As an example, if a dynamic layout doesn’t have a container or header specified, we reduce the markup by a couple of nested DIVs per layout. This can amount to huge reduction in markup. When we compare the markup of the Team Member gadget in the Case Manager portal between 7.1.8 and 8.1, we can see the following improvements:

Significant above is the savings in DOM depth as a large DOM depth can be attributed to browser performance during render.

We are however cognizant of backward compatibility and making this an automatic change can affect your apps, especially if you have targeted your custom CSS based on child selectors. So, in 8.1 we have introduced a new setting on dynamic layouts so that you can automatically opt into our latest markup generation for dynamic layout or stay on the markup generation for a specific older release. This is exposed as a setting in the presentation tab of the dynamic layout property panel. Selecting ‘Optimize layout, markup, and CSS with new release (recommended)’ ensures that the generated markup for that dynamic layout stays current with our latest UI generation. All new dynamic layouts created will automatically default to this setting.

Upon selecting ‘Use static legacy layout, markup, and CSS’ provides you the capability to retain the markup to the generated markup of a particular release, which can be selected in the dropdown. These dynamic layouts will not be taking advantage of any advancements in our generated UI.

We highly encourage developers to use the “Optimize layout, markup, and CSS with new release’ setting, especially if there is no custom CSS written in your application layer.

We have provided you a single entry-point to identify all layouts in your application that do not take advantage of this new setting. They can be found in the ‘Sections using legacy mode dynamic layout’ section in the Configure Dev Studio > User Interface > Client-side templates landing page. You can update all such sections into a development branch, test your application UI and fix any issues that may show up due to custom CSS, make those change and save the changes into your main ruleset.

User Experience Developer Knowledge Share