Define UI experiences using app shells

  • Release version: Zurich
  • Updated July 31, 2025
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Define UI experiences using app shells

    An app shell is essential for crafting UI experiences in ServiceNow, serving as the framework for experience pages. It encompasses functionalities akin to a web page, including headers and footers that may feature logos, user preferences, search icons, and user menus. Understanding app shells is vital for determining the design of your user experience, whether it be a workspace or a portal.

    Show full answer Show less

    Key Features

    • App Shell Types: Different app shells are available to suit various user interactions:
      • Breadcrumb App Shell: Ideal for focused workflows, includes header, breadcrumb navigation, and primary navigation bar.
      • Header App Shell: Suitable for minimal navigation experiences with a header and user menu.
      • Portal App Shell: Contains header and footer configurations for portal experiences, focusing on user requests and interactions.
      • UXR Base Experience App Shell: Provides base functionality for experiences without specific visual components, useful for identity-centered applications.
      • Workspace App Shell: Facilitates tools for issue resolution, including headers and footers, allowing users to manage tasks efficiently.

    Key Outcomes

    By selecting the appropriate app shell, ServiceNow customers can create tailored UI experiences that enhance user interaction, streamline workflows, and support specific operational needs. Each app shell type is designed to optimize user functionality, ensuring that the chosen design aligns with the intended user tasks and interactions.

    Understand what app shells are, what app shells are available for UI Builder, and why you would pick one over another.

    App shells

    An app shell is the wrapper of the contents of an experience page. An app shell includes functionality similar to a web page. For example, an app shell can show things in a header or footer of your experience, such as a logo for your company, user preferences, a search icon, configuration icon, user menu, and so on.

    An app shell is required for UI Builder.

    The app shell defines whether your experience has a workspace or portal design. A workspace is a graphical user interface that puts multiple tools on one page for handling requests from users. A portal is a page where users can add requests, such as order items, track their tickets, and so on.

    You choose which app shell to apply to your experience when you create an experience in the ServiceNow® platform. For more information on how to create an experience, see Configure how users interact with your applications in UI Builder.

    You can choose from various app shells when creating an experience.

    List of the app shells available when creating a new experience.

    Table 1. App shell descriptions
    App shell Description Example
    Breadcrumb app shell The breadcrumb app shell includes a header, breadcrumb style navigation, and a primary navigation bar for a workspace experience. Use the breadcrumb app shell for focused workflows and wizard flows that don't require multi-tasking.
    Header app shell The header app shell includes a header and user menu for a workspace experience. Use the header app shell for experiences that require minimal navigation and few actionable items in the header.
    Portal app shell The portal app shell includes the header and footer for a portal experience. The portal app shell record is a reference implementation of how the menu, utilities, logo, and login are configured for a portal experience. Experience created with portal app shell.
    UXR Base Experience app shell The UXR Base Experience shell creates an experience with the Next Experience banner. The UXR Base Experience shell provides base functionality support for experiences that are configured within a parent app, including experience configuration, context binding, routing, screen loading, and caching. The UXR Base Experience shell has no visual or experience-specific components. The UXR Base Experience shell can also be used for experiences that have no shell customization. For example, Identity Center directly uses UXR Base Experience Shell as its app shell.
    Workspace app shell The workspace app shell includes the headers and footers for a workspace experience. Use the workspace app shell to provide tools that users need to find, research, and resolve issues. To manage the visual style of experiences created with this app shell, see Configuring Next Experience with Theme Builder.