This sample uses Calcite to create an application layout suitable for a workspace application. The map is the focal point of the experience and can be referenced alongside more detailed content or active work. Multiple views provide the user with agency to choose the layout that best suits their needs.
Using the Shell as an application frame, this application conditionally displays content in a Shell Panel or a Dialog based on user preference, and adapts the Panel's placement and behavior across viewport sizes.
Layout considerations
This application simulates a focused workspace experience, where a user has multiple entities open at once that reference a map, canvas, or spatial backdrop. Workflow applications, in particular ones focused on a map or spatial canvas, often empower expert users by allowing them to adjust the layout or view to best suit their needs.
Application behavior
In the default application display, the main content is contained in a Dialog. Users can dynamically move and resize the Dialog via its drag-enabled and resizable properties.
In the other display, the content from the Dialog is moved to a resizable Shell Panel placed in the panel-end slot of Shell. On large viewports, the Shell keeps content-behind enabled so the map remains visible behind the Shell Panel.
Responsive behavior
Responsive behaviors are built into many Calcite components. In this application scenario, the Tabs component overflows in a scrolling container and adds UI affordances to allow users to cycle through Tab Titles.
Adaptive behavior
Adaptive design refers to making decisions as to when and how to adjust content at different viewport sizes.
At small viewport sizes, the application closes the Dialog, moves the Shell Panel to Shell's panel-bottom slot, changes the Shell Panel display to "dock", and removes Shell's content-behind property. These changes keep the map and working content visible.
Certain elements and components are programmatically shown or hidden depending on both the display mode of the workspace, and the viewport width. For example, when in the small viewport display, the application removes the Action for invoking the Dialog and automatically switches to the Shell Panel display.
Implementation details
This sample relies on CSS and JavaScript to create an adaptive experience. Using JavaScript, viewport width can be monitored in order to make adjustments to component properties, move content, and set conditional styles. CSS is used to hide and show elements and to adjust the styling of components based on classes assigned with JavaScript.
The sample also listens for the List's calcite event and the Tabs' calcite event to keep the Sheet navigation, Tab Titles, and active content synchronized as users move between the available project views.
In this sample, two separate components are hidden and shown — Shell Panel and Dialog — that contain the same content. In a framework-based application, consider dynamically rendering the content based on application state.
When a user interacts with the Action to change display modes, focus must be appropriately managed. When the Dialog opens, the focus trap behavior automatically sets focus to the Action in the header. When the user toggles to the Shell Panel display, the application programmatically sets focus to the reciprocal element. Explore how to continue to build and design your apps with accessibility in mind.