Learning about core user interface principles Changes in the design process in Theme Cosmos Out-of-the-box UI tools Future-proof UI design Personas Major differences between traditional UI and Theme Cosmos components Application UI setup Other resources Configuring portals Creating a portal Portals for personas Defining a logo for an application Defining a portal header Organizing the contents of a portal Creating and managing pages for applications Custom pages Visualizing data with insights Creating insights Customizing list-based insights Customizing chart-based insights Converting tables to charts Explore Data Dashboard management Configuring work queues in the worklist widget Creating a landing page for an application Configuring a column-based landing page Configuring a list-based landing page Configuring a tab-based landing page Configuring a dashboard Available columns Removing a landing page from an application Organizing the main navigation for a portal Containers in portals Adding a dynamic container to a portal Adding an AJAX container to a portal Supported actions and limitations in AJAX containers Adjusting dialog container width Adding the Pulse gadget to your application Enabling users to post messages in the activity feed Creating feed sources for activity feeds Determining default feed sources Customizing a theme for an application Previewing a portal Customizing a user portal in the phone preview Adding, editing, and deleting a preview device Working with App Studio forms Forms and views Accessing views in your application Organizing your view Adding tables to views UI components in a view Adding UI components to a view Configuring common control settings Defining the behavior of a control Managing editing options for controls Adding text to controls Adding icons to controls Setting advanced presentation options for controls Adding custom attributes for version 1 DX API to auto-generated controls Configuring a Button control Specifying presentation options for a Button control Configuring a Link control Specifying presentation options for a Link control Configuring an Anypicker control Configuring an Autocomplete control Configuring a Date Time control Selecting the date and time format Specifying calendar navigation options Restricting the years displayed Specifying minute intervals Specifying week display Disabling the selection of weekend days Specifying time zones for Date Time controls Setting a date range Configuring the Thai calendar Date properties Configuring actionable icon controls Standard actionable icons Reviewing available icons Configuring the Attach content control Configuring file size options for the Attach content control Geographic reference Configuring dynamic system settings for geographic reference Configuring the Map control Creating a location field Text controls Configuring a Text input control Configuring a Text area control Configuring a Rich text editor control Creating a custom plug-in for the Rich text editor Adding an external plug-in to the Rich text editor Spell checker Extending the spell checker to other languages Enabling adding words to the spell checker dictionary Paragraphs Creating paragraph rules Restricting user input in a field Creating a calculated field Validating field values on a form Validating field input in complex scenarios Adding a validation rule to a flow action Validating character patterns Summary panel views Customizing the case details section Adding tabs to the summary panel Adding action buttons to a case header Adding buttons to the case action header Preview panel Widgets in the utilities pane Sources of data for your UI Levels of configuration for data sources Data page as a source of data Data page types Elements of a data page Report definition as a source of data Specifying a data source in a control Specifying a data source directly in a property Working with Dev Studio forms Modular design in Dev Studio Harnesses Creating harnesses Adding scripts and style sheets to a harness Configuring display options for a harness Harness and Section forms: Help — Client Event Editor Advanced options for a harness Layouts Best practices for layouts Creating a dynamic layout Modifying the presentation options of the dynamic layout Creating a column layout Modifying the presentation options of the column layout Creating a navigational tree layout Modifying the presentation options of the navigational tree layout Creating a repeating dynamic layout Repeating dynamic layout - Operations tab Configuring drag-and-drop functionality for list items Configuring swipe actions for a mobile app Navigation patterns in Repeating dynamic layouts Layout Groups Creating a layout group Creating a dynamic layout group Creating a templated region based on a layout group Managing visibility of a group layout tab Table layout Optimizing table code Operations and actions in a table layout Creating a table layout with code optimization Modifying presentation options of the optimized table layout Arranging column visibility by importance Prioritizing information in tables Configuring table activities Configuring drag-and-drop functionality for tables Enabling table personalization Configuring table operations and toolbar Enabling grouping by fields Enabling the table columns visibility toggle Enabling row height adjustment for a table Enabling the refresh view button for a table Enabling search in a table Adding custom actions to the table toolbar Creating a table layout without code optimization Modifying presentation options of the non-optimized table layout Configuring master-detail settings Creating a hierarchical table layout Enabling additional hierarchical table settings Configuring a screen layout Screen layout - Region properties - General tab Upgrading panel sets to screen layouts Managing field validation in hidden sections Configuring semantic headers Configuration options for layouts Sections Creating sections Creating an embedded section Using full section editor Adding a React table to a section Configuring a React table in a section Run-time behavior of Cosmos React tables Displaying the list of recent items in your application Disabling the list of recent items Custom lists of recent items Unit testing a section Design templates Best practices for design templates Creating design templates Custom widgets Creating a custom widget Referencing data Data objects in UI Enabling run-time data object editing Deferred loading of content Deferring the loading of content in UI elements Loading data pages asynchronously Modal dialog box Configuring a modal dialog box for a button Configuring a modal dialog box for a list-based layout Configuring confirmation modal dialog boxes Adding a chart Creating custom menus Creating navigation rules Customizing error messages Adding a video to your UI Accessing the UI Gallery Creating UI subscription channels Reusing UI Gallery examples in an application Supported display modes by field type Using business logic to drive user experience Creating a When rule Condition builder Defining conditions in the condition builder Defining refresh conditions for UI areas Adding action sets to a control Adding conditions to an action set Adding action sets to a layout Available UI actions Styling your application with design systems Skins Best practices for styling your application Creating skins Configuring skin base settings manually Optimizing skins Specifying a skin for your application Specifying a skin for a portal Component style formats Creating style formats Styling a layout Styling a control Removing style formats Finding sections that use a specific format Mixins Creating mixins Modifying existing mixins Deleting a mixin Creating a custom style Attaching a CSS to the skin Skin inheritance Adding inheritance to an existing skin Overriding disabled screen layout formats Updating Theme Cosmos in your application Managing Cosmos UI settings in case designer CSS helper classes Creating CSS helper classes Reviewing CSS helper class definitions Adjusting cell styling by using CSS helper classes Adjusting layout styling by using CSS helper classes Uploading custom font files Creating a CSS font file Login screen customization Configuring the browser requestor Editing the source HTML of your login screen Editing the text rules that contain the source CSS for login screens Adding a new background image to your login screen Debugging your UI Live UI Enabling run-time branching and editing Editing with Live UI Using PAL Browser developer tools Tools for testing the UI Localizing your application Internationalization and localization Converting your UI for right-to-left languages Preparing your application for translation Localized field values Localized rules Field value mapping for auto-generated controls Installing Pega language packs Creating a translation package Preparing a translation package for a translator Importing translations Testing the translation package Localizing mobile apps for international audiences Configuring an accessible UI Accessibility standards in Pega Platform Out-of-the-box accessibility features Supported keyboard navigation Accessible navigation in tables WAI-ARIA roles in a screen layout Best practices Best practices for configuring UI components Best practices for using helper text Inspecting accessibility Key errors reported by the Accessibility Inspector Checklist for logging accessibility issues Custom configuration options Managing the main content of your application Setting the navigation menu to permanently expanded Assigning WAI-ARIA roles to a Dynamic Layout Setting PDF file versions Setting accessible pagination in tables Setting initial focus to the assignment title Disabling drag and drop in optimized tables Building custom UI capabilities Generating complex PDFs on your UI Creating auto-generated custom controls Development of web self-service interface Pega web mashups for embedding Pega Platform UI in external web pages Creating a mashup Mashup attributes Mashup JavaScript page actions Mashup action objects Authentication in mashups Best practices for using mashups Best practices for using multiple mashups Troubleshooting mashup issues Code changes require reloading Mashup issues with cross-domain (X-Frame) communication Mashup issues with collapsible controls Troubleshooting issues with loading mashups Cannot load mashup due to SECU0019 exception Cannot load the same mashup again based on conditions Cannot load a mashup asynchronously based on an event or a flag Cannot load a mashup from a non-default access group Cannot embed a mashup in a Pega application Troubleshooting browser-specific issues with mashups CORB error with Chrome 80 SameSite cookies Chrome CORB issue Blocked third-party cookies Safari cookies consent issue in versions below 13.1 Internet Explorer P3P header issue Security warnings during mashup deployment Mashup code is not consistent with the latest security enhancements Modified parameters in the mashup code prevent access to the mashup channel Custom JavaScript in application design Static content bundles for Theme Cosmos Customizing sections and controls with JavaScript Creating non-autogenerated sections Creating non-autogenerated custom controls JavaServer Pages tags Best practices for using custom JavaScript Creating binary file rules Public JavaScript APIs addListItem editListItem getDataPage launchHarness launchLocalAction openLocalAction openURLInWindow refreshHarness refreshSection runActivity setValues Traditional Starter Packs Salesforce Lightning Integration Configuring URLs to open as standalone Assignments Hybrid mode Configuring Docker authentication On this page Condition Cause Solution