Main Navigation

The App Shell 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 App Shell also provides access to navigation links for the application as well as notifications, recently visited items, pinned items, and a Search Input field.

In the following demo, you will see an App Shell composed of the essential appInfo, operator, and main props, as well as a set of links that offer the simplest layer of navigation. In subsequent demos, properties will be added to this base demo to visualize the individual features that are supported.

If caseTypes are provided to the App Shell, 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 paired with the CaseView component set as the main content within App Shell.

If either the onSearchChange or onSearchSubmit functions are provided within the searchHandlers property, a Search Input field will be rendered directly below the application branding at the top of the App Shell. This input provides 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 App Shell, 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 App Shell 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.

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 App Shell 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.

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.

This demo includes all of the individual features that are highlighted in the prior demos. This demo serves as the most complete representation of the App Shell component.