UIKit 10 provides enhanced features to help reduce development time while bringing greater consistency to your user interface. For example, with UIKit 10, you can use new design templates, Cascading Style Sheet (CSS) helper classes, and core icons to standardize the look and feel of your applications.

Design templates for sections

Design templates for sections define regions in which you add user interface elements, such as icons and controls. Each of the six new design templates represents a common user interface pattern. Use these templates to create small UI elements that you can reuse inside sections.

For example, the List item with image, metadata, and actions design template represents a common UI pattern of an image followed by a name, some metadata, and an icon with an action. You can use this template to display information with consistent spacing and styling throughout your application:

List item with image, metadata, and actions example

For more information, see Apply design templates for sections.

CSS helper classes and helper class picker

To alter the default styling of a cell or layout in a minor way, use the Open helper class picker option on the Presentation tab of the Properties panel to apply a standard, predefined CSS helper class. For example, use a CSS helper class to center an element in a cell. Using CSS helper classes for small styling adjustments is preferable to creating skin formats for the following reasons:

• You can reuse CSS helper classes.
• You reduce the complexity and size of the generated skin, which improves application loading times.
• You limit the number of customized skin formats, which reduces maintenance.
• You save development time.
• You improve the consistency of the user interface, which makes it easier for users to complete tasks.

Being familiar with the standard CSS helper classes available for your application design and development can help you avoid duplication of effort and save you time. Use the Skin Preview screen to see all the standard helper classes and review their definitions.

For more information, see CSS helper classes.

Core icons and icon class picker

The UIKit ruleset includes a set of icon fonts in the py-icons CSS text file. Using the predefined icons included in this font set brings greater consistency to your user interface and helps users to understand the purpose of each control. To preview and select the correct icon for a control, use the Open icon class picker option on the General tab of the Properties panel for the button, link, or icon. Being familiar with the core icons can help you avoid duplication of effort and save you time. Click Actions > Launch > Skin Preview and use the Skin Preview screen to review the core icons available for a given skin. For more information, see Previewing and selecting predefined icons with the icon class picker.

Simplified styling for Button and Link controls

Establishing a consistent look for Button and Link controls makes it easier for users to complete forms. The Presentation tab of the Properties panel for Button and Link controls now offers three main control format types: Strong, Standard, and Simple. For more information, see Updated button and link formats.

To convert existing Button and Link controls to the new formats automatically, use the pzUpdateButtonLinkFormats activity. For more information, see Update-Button-Link-Formats.

A new template is available for modal windows that uses the correct control formats for the Submit and Cancel buttons. If your application has modal windows that use the standard modal template pzModalTemplate, update your modal windows to use pyModalTemplateStandard instead.

New styling for sidebar navigation in desktop applications

To maximize the main work area of a screen or to reduce visual overload for a desktop application, enable automatic expanding and collapsing of the sidebar navigation menu on the Presentation tab of the Screen layout properties dialog box. The sidebar navigation menu automatically collapses at smaller screen resolutions and then expands when users hover over the menu. For more information, including the procedure for specifying collapse-nav-auto as the custom CSS class to enable the feature and notes about breakpoints, see Enabling automatic expanding and collapsing for a sidebar navigation menu.

New styling for navigation in mobile applications

Styling for navigation in mobile applications has been updated to align with styling for navigation in desktop applications. The changes include the following:

• Notifications and notification counts are displayed in the footer.
• The New menu has been moved from the header to the More menu.
• User Settings are now displayed at the bottom of the More menu.

Offline indicator for larger-format mobile devices

For larger-format mobile devices such as the Microsoft Surface, the new offline indicator badge is displayed in the portal header. This badge replaces the plug icon that was previously used for tablets.

Offline indicator badge for large-format mobile devices

pyEndUser skin updates

The main styling changes to the pyEndUser skin are as follows:

• Typography changes
  • h2
    • Increased font size from 15 pixels to 16 pixels
  • h3
    • Increased font size from 12 pixels to 14 pixels
    • Changed from gray (#767676) to black
    • Removed upper-case
• Body background color
  • Changed from #ececec to #e3e5e7
• Input fields
  • Reduced height from 32 pixels to 30 pixels
  • Removed padding-left .3em
  • Added border-radius 2 pixels
• Checkbox
  • Reduced spacing for checkbox and label from 7 pixels to 3.5 pixels
• Buttons
  • Simplified styling to Strong, Simple, and Standard
  • Reduced button height to 30 pixels, from 32 pixels
  • Changed the active, hover, and focus styles to use Auto
  • Changed the Link control format style (blue color) and active style
  • Removed the minimum height for the Simple format
• Link blue color
  • Replaced the old blue #006DFF, which was not compliant with accessibility standards, with the value #0062E6
• Dynamic layouts
  • inline middle – Now has right spacing of 7 pixels on items, to match other line formats
  • stacked with labels left – Now has bottom spacing of 7 pixels on items, to match other stacked formats
  • inline labels left – Now has right and bottom spacing of 7 pixels on items, to match other inline formats
  • simple list with labels left – Now has no spacing on items, to match other simple list formats
  • field caption – Removed padding-bottom of 2 pixels

Removed UIKit rules

The following section rules have been removed from UIKit 10:

• pyApprovalActions
• pyCaseActionAreaButtonsMobile
• pyDesktopNotificationGadget
• pyMainCaseAreaTemplate
• pyMobileUserSettingsOuter
• pyPulseOverlay
• pyUserSettingsMobileHeader

The most significant of the removed rules is pyMainCaseAreaTemplate, which was used as the Section Template (Main Case Area) for the main area of the Perform and Review harnesses in Case Management. If your application uses this template in any template instances outside of UIKit, you must update these sections to instead use the Page with Secondary Content template, pySecondaryPageTemplate.

The buttons found in the pyApprovalActions section have been moved into the default flow action buttons, allowing them to be displayed as part of the sticky footer in mobile devices. If your application has flow actions that reference the pyApprovalActions section, ensure that the Hide the default action section buttons option is cleared on the Action tab of the flow action.

If any of your pages reference the pyPulseOverlay section, remove the reference and add the Pulse menu option to your main navigation menu. For examples, see the pyCaseWorkerNavigation or pyCaseManagerLinks navigation rules.