Description

A common application page with a simple structure supporting light interactions.

Usage

Due to its lack of heavy structure or a well-defined form factor, the application page functions more like a web page and less like a tool or creation space. As such, the application page is more suitable for reading content and few components, such as in administrative, utility, settings and preferences, forms, feeds, or other similar pages.

• Your content is simple or of low complexity, requiring little structure and simple interactions.
• You content relies on text, forms, feeds, and other long scrolling content.
• Your content fits in the utility, administrative, or system-wide preferences category.
• Your need to support a high degree of content and complex interactions.
• You need a creation or tooling space. Use a Canvas or a more appropriate floorplan instead.
• You need a multi-stepped form for a guided process. Use a wizard instead.
• You need to focus or display an object and all its attributes. Use an object page instead.

Anatomy

– required

– optional; choose from either a header toolbarapplication toolbar

, required

Different color backgrounds can be achieved using the sap.m.PageBackgroundDesign enumeration, or by hard coding their values if not using UI5. The default background is , resulting in a light grey background. While other alternatives are also possible: results in a white background, and is used to allow for images or patterned backgrounds. Follow the link to see API references or see Specifications for exact color values.

– optional

Application page footers can be in the floating of fixed styles. Floating footers are generally used as sticky footers for pages that require scrolling, while fixed footers are non-sticky and stay affixed to the very bottom of the page.

Best Practices

Consider letterboxing

Letterboxing restricts the width of a page to 80rem (1280px). This is a useful technique for pages with small amounts of content, and for maintaining the aspect ration of a page when displaying it in large or wide monitors.

Consider using this technique when you have too little content to fill up the whole screen; you want to provide focus and increase readability; and when the full width would stretch content, cause distortion, and lead to poor usability

If not using UI5, maintain product consistency by enforcing the same 80rem (1280px) screen width size. For more information, see Letterboxing in Fiori guidelines.

Divide the Page into Sections

Group related content and divide the page into simple and logical content sections, or chunks, with an obvious hierarchy. This help organize of the page and makes it easier to scan and browse its contents.

Section breaks and headers are heavily content dependent, and vary according to page navigation, content, or components. Please ensure the correct one is always being used to create a clear hierarchy. For section breaks using typography outside of their component classes, please review Headlines and Font Styles for UI Controls.

The Translations UI uses headers, group headers, and a numbering system to divide content into sections.

Beware of a False Bottom

When pages require scrolling to the bottom to see their contents in fullness, the scrolling itself can be source of confusion when section gaps and spaces create a false sense of reaching the bottom of the page. In order to minimize this problem:

• Avoid longer than needed gaps of space between sections
• Ensure the name and number of all sections are referenced somewhere else in the UI, such as an icon tab bar
• Use the proper footer style for the page design: if scrolling is required, use a floating footer; if not, a fixed footer
• Use anchor navigation to enable auto-scrolling within the content itself

Simplify the Navigation

Consider simple patterns for navigating through the content sections of a page. Most often, this looks like a persistent/sticky icon tab bar used for anchor navigation (a.k.a., jump-to navigation) or for creating page tabs.

When using anchor navigation, consider changing the URL based on scrolling position. This allows the exact location of a page to be easily bookmarked or shared with others based on URL alone.

Keep it Light and Simple

When using the application page floorplan, consider keeping the content light and simple, uniform in purpose, quick to load, and requiring only one type of scrolling. When appropriate, offer a content header or a good introduction to set the context and answer the user’s question of “What is this page about?”

Avoid over-designing screens and keep them light and simple. Without a strict form-factor and a basic structure, application pages are the most suitable for a simple experience. If more complexity is expected, consider using a different floorplan that can accommodate the main content better.

Search to Insight excels in minimal design and reducing the signal-to-noise ratio.

Specifications

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.