Use new capabilities for front-end developers (8.1)
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
Previous topic Edit user interfaces in App Studio (8.1) Next topic Improve design consistency with UI-Kit 12