Table of Contents

Managing Cosmos UI settings in case designer


Only available versions of this content are shown in the dropdown

Adjust the Cosmos-based user interface of your application to the needs of your organization. By changing Cosmos settings, you can control case-level fields and case behavior to make the interface cleaner or more informative, according to your preferences.

  1. In the navigation pane of App Studio, click Case types, and then click the case type that you want to open.

  2. On the Settings tab, click Cosmos UI.

  3. Adjust your Cosmos UI settings by doing any of the following actions:

    • To define what information appears in the case header, in the Case header section, select the fields that you want to include.
    • To change the appearance of the chevrons that indicate case progress, in the Case life cycle component list, select the preferred styling.
    • To change the style of the to do list, in the To do component list, select the new format.
    • To define how the application behaves when the user creates a new case, in the Create new case behavior, select the preferred behavior.
  4. Click Save.

  • Skins

    Skins help you style the graphic elements of your interface, such as borders and backgrounds, separately from the content. This approach ensures greater consistency, promotes reuse, and provides you with tools to make quick changes to the graphic design of your application.

  • Updating the UI Kit in your application

    Ensure that your application includes a modern, responsive, and consistent UI by updating the out-of-the-box UI Kit layer in your application stack.

  • Updating the Cosmos theme in your application

    Build your application by using the latest UI tools. By ensuring that the Cosmos theme ruleset is up to date, you provide your application with a modern and responsive interface.

  • CSS helper classes

    CSS helper classes are snippets of code that introduce minor formatting changes to your UI. If your application has many formats of the same type, and these formats vary only slightly, using CSS helper classes can save you development time by limiting the number of customized skin formats.

  • Uploading custom font files

    Ensure that your user interface meets the branding requirements of your company by adding new fonts to Pega Platform. Your custom font files can comprise standard fonts or icon fonts, which you can then add to the default icon set for your application.

  • Login screen customization

    You can customize the appearance of the login screen and other screens that unauthenticated users access, to maintain design consistency with your company's style guidelines.

Did you find this content helpful?

Have a question? Get answers now.

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