Description

The canvas floorplan is a free-style page for displaying, arranging, and presenting content of a visual, graphical, material, or pictorial nature. Canvases may be restricted to a fixed size or grow dynamically along with their contents.

Usage

Use the canvas to display a large amount of content in free or uniform styles. Most often, canvas content takes the form of cards, tiles, widgets, and other items that need to be presented as material objects.

• You need a space to build dashboards, reports, and presentations.
• You need a space to arrange and display entry points to other pages, files, or documents.
• You need a space to structure content, make connections, and define relationships between items on display (i.e., data objects, agenda topics, and so on.)
• Your content is simply textual and cannot be made visual. Use the basic page instead.
• You need a large list of specific items or detailed values. Use a table floorplan instead.
• You have a workflow that requires timing and scheduling functions; use Calendar instead.

Anatomy

required

required

Choose from either the application toolbar or the header toolbar. Do not combine these styles to create a new one. Canvas headers should be consistently used and applied, and their structure should be recognizable to users.

required

There are three main aspects that largely define how users will experience and interact with the canvas floorplan:

The canvas area is the content area and a central focus of this floorplan. Any control can be used in a canvas, but typically card and tiles or widgets. Canvas content may be set in place by the system or an admin or created and arranged in a freestyle by the user.

The underlying grid of a canvas is its main structural system. As with all other Fiori-based UI design, canvases employ a 1rem (16px) grid system. This base unit allows consistent and predictable content layouts, sizing, and zooming. The grid system may be exposed or hidden from users, or switched on and off by them.

Different color backgrounds can be achieved using sap.m.PageBackgroundDesign enumeration, or by hard coding their values if not using UI5.

• Standard (default) results in grey
• List results in white
• Transparent is used for images or patterned backgrounds

Follow the link above to see API references or see Specifications for exact color values.

Styles

Canvases may be set up to have different boundaries styles, each impacting its sizing capabilities

Fixed

Fixed canvases have predefined or reconfigurable fixed sizes. These types of canvases have the most restrictions around movement but are the simplest to navigate using scrolling.

• Best use: Uniform content arranged in a long-scrolling fashion, or for when a limited canvas size is needed
• Notable examples: Story Builder in a fixed canvas size

When using a fixed canvas size, users build out their stories within those limits.

Dynamic

Dynamic canvases start with a base size but expand dynamically as more content gets added to its content area, either by the user or the system.

• Best use: Freestyle content arrangements, and where users have the potential to grow their content.
• Notable examples: Story builder in a dynamic canvas size, Home Screen, Digital Boardroom's Agenda Builder, OEM Query Designer

The Home Screen starts with a base size, and expands vertically as the content

grows through new cards and pinned charts.

Adjustable

Adjustable canvases are often used for complex content requiring large amounts of space. Users can navigate these canvases by panning, zooming in and out on a specific frame, or using a viewfinder component to adjust the magnification level of the canvas.

• Best use: Complex structures for representing hierarchy, order, relationships, and so on
• Notable examples: Digital Boardroom (Dashboard), legacy Value Driver Tree, new Modeler

The legacy Value Driver Tree uses a canvas that can adjust its magnification.

Behavior & Interactions

Scrolling

Scrolling can be implemented in up-down or left-right orientations.

Nudging

Use the directional keys on a keyboard to move content on the canvas area 1px at a time within the canvas’ grid system. Holding down the shift key and pressing the directional keys will move content 10px at a time. If snapping to grid is enabled, nudging moves strictly within the grid system, or 1rem(16px) at a time.

Snapping to Grid

Snapping to grid restricts movements exclusively withing the grid system. Users can drag and drop their content at will, and the canvas will snap it to the closest grid point, allowing users to align their content with precision.

This behaviour may be implemented as a default or enabled by the user in setting preferences. When enabled, the canvas reveals its pixel grid when objects are in motion and hidden when objects are static.

Dynamic Resizing

A canvas's content area can expand and grow dynamically as content requires more space. This could be the result of growing content or of moving content beyond the boundaries of the canvas. The ability to grow dynamically is the defining characteristic of the dynamic canvas style.

Story canvas responding to content being moved beyond its established

boundaries by increasing its size dynamically. Pixel grid is turned on.

Panning

Users can click on an empty canvas space, hold, and drag their mouse or trackpad to pan through the canvas. This interaction is most often used for navigating adjustable canvas styles.

Zooming

Zoom in to close in on details or zoom out to get a bird’s eye view of canvas content. Zoom is a function of the View menu, but can also be performed in few additional ways:

• Interacting with a viewfinder component
• Magnifying buttons in the Canvas or some other place in the UI
• Using keyboard shortcuts.

However, even when using these additional ways, ensure Zoom is still found in the View menu first. This interaction is most often used for navigating adjustable canvases.

Best Practices

Use Empty States to the User’s Benefit

Prevent any scenario where the user is faced with a completely empty canvas. Due to their large content areas, empty canvases can be confusing, overwhelming, or interpreted as missing content or not loading properly. Instead of showing an empty canvas, consider using good defaults or partially built items, placeholder text, or illustrations to instruct, guide, or onboard the user.

The OEM canvas-based query designer's empty state.

Provide Order and Structure

Because of their large and expansive sizes, canvases are desirable environments for creation spaces, cataloging or archiving large collections of items, and making complex connections and relationships between multiple objects. However, their expansiveness, and their undefined borders, can cost a sense of order and structure. Consider the following strategies for providing limits without clipping a user’s sense of freedom and flexibility:

Fixed canvases have clearly defined boundaries that may restrict movement. Consider giving users the option to configure their size and aspect ratios. Dynamic and adjustable canvases, on the other hand, suffer from being undefined and indefinite. With these styles, consider providing generous, but reasonable max size limits suitable for the volume of content expected to populate the content area.

On canvases the support the creation, placement, and movement of content in a free-style, consider offering users the option to snapping content to the grid. Not only will this help users move items with ease, but it will also allow items to be nudged and aligned with precision. Use a 1rem (16px)grid for a high degree of flexibility.

Consider how canvas content will be consumed and whether it needs to be viewed in smaller screen sizes. If so, consider adding responsive lanes that can guide users from structure content in a way suitable for smaller devices.

Specifications