Skip to main content

         This documentation site is for previous versions. Visit our new documentation site for current releases.      

Use new capabilities for front-end developers (8.1)

Updated on May 3, 2021

Dev Studio provides access the advanced features of Pega Platform. In this workspace for full-stack developers, database administrators, and security administrators, you can create new functionality or extend the work done by business analysts and your front-end team.

Keep your markup current with improvements to dynamic layouts

You can set dynamic layouts to use the new optimized layout mode. Selecting this option enables automatic updates for new markup with each release, which allows you to stay current with improvements to dynamic layout markup.


Optimize layout option

When optimized, dynamic layouts that do not include a container format or a header no longer generate extra container and body DIVs. The depth of the Document Object Model (DOM) is reduced, which makes the layouts easier to maintain.


Your existing layouts are not affected, but you can upgrade sections that use legacy dynamic layouts to use the new optimized dynamic layout.


Upgrade tool for converting legacy dynamic layouts

For more information, see Upgrading legacy dynamic layouts to use the optimized dynamic layout.

Unique IDs in autogenerated controls

User interface elements created in Pega Platform™ 8.1 and later have unique IDs by default. Unique IDs ensure that a DOM (Document Object Model) is HTML5-compliant. Accessibility standards also require that each UI element have a unique identifier. The unique identifier on autogenerated controls is a hash that ensures that each control has a unique ID, even if the same section is used multiple times in the same harness in different page contexts.

You can control the creation of unique IDs on the HTML5 Application Readiness page. In Dev Studio, click Configure > User Interface > Application Readiness > HTML5. Select the Enable unique ID for your application check box. This option is available for current applications and enabled by default. New applications will include unique IDs by default. For pxCheckbox and pxRadioButton controls, the unique ID is generated regardless of whether unique IDs are enabled or disabled.


The Unique ID setting on the HTML5 Readiness page

Custom controls do not have a unique ID by default. You can add a unique ID to a custom control by opening the control's properties and selecting the Generate unique ID check box.

Enhancements to required fields

Indicating a required field is no longer limited to a simple asterisk. You can customize the text that indicates a required field using the skin. The required field also supports localization of the custom required field text. In the Controls section of the skin, the Labels & Required Field options control the text and styling. The required field text can be configured by modifying the pyCaption Required field value.


The skin with the label and required field options displayed.

Support for inline helper text for editable form fields

You can now configure inline helper text for editable form fields. The helper text is always visible on the form, and you can style the text to override the helper-text CSS class in the Override CSS file in the skin. Providing helper text in editable form fields helps users complete forms more quickly and efficiently.


The cell properties of a text input showing the helper text options

CSS improvements

Several enhancements change the way CSS is used can improve styling and reduce the number of dynamic layouts used in a UI. Rather than use multiple layouts with visible when conditions, you can use dynamic CSS and style referencing to reduce the number of layouts placed on top of one another. Dynamic CSS referencing in a dynamic layout uses a property value to return a format on containers, buttons, links, and icons.


A dynamic layout with the container format set with a property

Dynamic layouts have more granular targeting of CSS to provide the ability to configure separate CSS classes at the container, header and content level separately. A dynamic layout with no header or container will have only the content CSS class setting.


Container, header, content CSS classes in the dynamic layout properties

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best. is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us