AppShell

The AppShell is the main navigation container for any application. It supports varying levels of lists that are refined to suit most application needs. This component represents an application's identity and that of any given operator that is using the application. The AppShell also provides access to navigation links for the application as well as notifications, recently visited items, pinned items, and a SearchInput field.

For more information on how to use the features and props for this component, check out the developer documentation.

The AppShell component is composed of the essential appInfo, operator, and main props, as well as a set of links that offer the simplest layer of navigation.

If caseTypes are provided to the AppShell, a Create dropdown will appear above any other provided links. This may be useful for direct action items that may open a form rather than redirect to another page. The caseTypes property is intended to be represent the CaseView component when it is set as the main content within the AppShell.

If either the onSearchChange or onSearchSubmit functions are provided within the searchHandlers property, a SearchInput field will be rendered directly below the application branding at the top of the AppShell. This input provides the capability of application-wide search.

The notifications property accepts a list of data representing operator specific notifications and their given state. This demo showcases the use of the Count badge within the AppShell, as well as custom behavior to determine when a notification item has been "read". If there are notifications to display, a Drawer will open from the AppShell with the contents of the items provided. If an empty array is provided to the notifications property, a simple empty message will display when the corresponding Drawer opens.

Notification items will render a visual, primary text, a list of secondary text, and an unread indicator.

Recents

The recents property accepts a list of data representing a provided history of user activity within the application. If there are items to display, a Drawer will open from the AppShell with the contents of the items provided. If an empty array is provided to the recents property, a simple empty message will display when the corresponding Drawer opens.

Recent items will render primary text, a list of secondary text, and a pin icon. Behavior for the onPinToggle event of the pin icon may be customized, though it is recommended that those items be added to the pins list when the onPinToggle callback function is triggered.

Pins

The pins property accepts a list of data identical to the recents property. If there are items to display, they will live in a separate region above the recent items.

The AppShell component can render some of its content within a header that will stick to the top of your application. If the appHeader prop is true, the branding within the appInfo, the operator, and the searchInput, if provided, will render within the header. All other AppShell content will render in the side navigation menu as it normally would.

The app header is responsive and the entire AppShell component will eventually collapse to a hamburger menu on smaller screens.

The following demo includes all of the individual features that are highlighted above. This demo serves as the most complete representation of the AppShell component.

NameTypeDefaultDescription
appInfo*AppInfoPropsProps related to the App Shell header.
main*ReactNodeThe content of the application.
operator*OperatorPropsThe active user of the application.
appHeaderbooleanIf true, a header will render containing the logo and name of the app as well as search and operator regions.
bannersReactNodeBanners will render above the main content if they are provided.
caseTypesCaseTypeProps[]A set of cases that will render in an expanded list within the App Shell.
casesCaseProps[]A set of cases that will render as a flat list in the App Shell.
classNamestringAdditional CSS classes.
environment
{
  color: undefined | string;
  name: string;
}
Used for alternate environments, such as "dev" or "staging".
linksLinkProps[]A set of links that will render as a flat list in the App Shell.
notificationsNotificationListPropsA list of notifications and handler functions.
pinsPinsListPropsA list of pinned items to display above recent items and handler functions.
recentsRecentsListPropsA list of recently visited items and handler functions.
searchInputSearchInputPropsProps related to the Search Input.
searchLabelstring"Sitewide" The aria-label for the search input.
utilsUtilItemProps[]A set of app utilities like notifications, recents that renders at the bottom of AppShell

You can override the styles of the AppShell component by setting a custom theme on the Configuration component.

{
        •         'background-color': 'base.colors.slate.extra-dark' // → base.colors.slate.extra-dark
        •       },
        •         'background-color': 'base.palette.brand-secondary' // → base.palette.brand-secondary
        •       }
      •     }
    •   }
}