App structure

Apps should follow the same base structure to ensure a consistent user experience across the Dynatrace platform ecosystem. There are a few guidelines and components that you can use to provide a familiar structure and, ultimately, make your app's experience more enjoyable.

Page

The page component is an excellent first place to start structuring your app. It comes with basic styling and four regions, your app's main structural building blocks.

1. Header: The header is for your app's main navigational elements and primary actions. You can use the app header component to ensure a consistent navigational experience in your app.
2. Sidebar: The sidebar's content should influence, change, or filter content inside the main view. Additionally, it may accommodate actions or any other elements related to the sidebar's content.
3. Main view: The main view provides the center stage for your app's content.
4. Detail view: The detail view uses the additional screen real estate of widescreen monitors and provides a quick and easy way to show additional information related to main view content without users having to navigate to a new page. Don't use the detail view to show content unrelated to the main view.

App header

The app header component is essential to the user experience. It serves as a visual anchor for users to orient themselves and includes the highest level of navigation and app-wide functions and actions. It should always be present at the top of your app.

1. App name: The app name allows users to quickly return to your app's home from anywhere within your app.
2. Navigation: Navigation items in the app header provide a means of primary navigation in your app.
3. Actions: App header actions act as triggers for system-wide actions available to users at any time, regardless of where they're in your app. Such actions may include settings, help, search, or notifications.

Title bar

The title bar component shows the title of a page or section in your app. It sits at the top of the content it describes and can come with additional information and actions related to the title.

1. Navigation: The navigation region of the title bar component can be used to visualize and enable navigation through your app's content hierarchy. This navigation may be in the form of breadcrumbs or a button that links back to a previous page.
2. Prefix region: The prefix region provides an ideal space to accompany your title with a visual element like an image or icon.
3. Title: The title sets the user's expectation of the content to follow.
4. Subtitle: A subtitle can provide more information about the title and upcoming content.
5. Suffix region: The suffix region provides space for actions related to the title.