You can use the the 3D viewport control to enable 3D viewing in your SAP Fiori application. This control is available in the Visual Interaction toolkit library. The 3D viewport control can display simple and complex 3D objects in SAP Fiori, and offers basic user interaction with the 3D environment and its objects.

You can use the 3D viewer in various locations in the app, such as the object page, the dynamic side content control, dialogs, or popovers.

Usage

Use the 3D viewport control if:

• You want to show 3D models in an SAP Fiori environment.
• You want to let users view 3D files in the browser without downloading any browser plugins.
• You want to enable users to interact with 3D models stored locally or remotely.
• You want to load multiple 3D models at the same time.

Do not use the 3D viewport if:

• There is not enough space for users to interact with 3D content (in other words, the 3D viewport is too small to interact with 3D models).
• You require simple visual representations of objects or functions. In this case, use sap.m.Image instead.

Responsiveness

If you use the 3D viewport in conjunction with SAP Fiori page layouts or floorplans, responsiveness is determined by the respective layout or floorplan, such as the dynamic page layout or flexible column layout.

The 3D viewport adjusts its size to fit within the available space.

Behavior and Interaction

The 3D viewport supports a range of specific mouse and touch gestures by default. The available gestures are determined by the viewport component with which you interact.

When a 3D model is loaded into the 3D viewport, you can pan, zoom, rotate, and click or tap the model with the following actions:

The recommended selection behavior is known as “sticky” selection (default):

• When a user clicks on an object, it is marked as selected.
• Clicking another object selects that object, along with all previously selected objects.
• Clicking a selected object deselects it.
• Clicking empty space deselects all objects.

Resources

A line chart displays information as a series of data points connected by straight lines. It is a basic type of chart that is common in many areas. Line charts are typically used to visualize a data trend over intervals of time, so the line is often drawn chronologically.

Usage

Use the line chart if:

• You want to display trends over time, where the focus is on the trend, not on the individual values.
• You want to help users see dependencies between two or more variables.
• You want to show higher and lower values (like prices or workloads).

Do not use the line chart if:

• The y axis has a set of distinct (not successive) categories (not a timeline). In this case, use a bar chart, or a line chart with separate horizontal lines.

Color Palette

Selection and Popover

When the user clicks on a data point in the line chart, the associated value is displayed in the popover. The popover can also be customized to display other information and actions.

Axes

Line charts can be used with 3 types of axes:

• Time axis
• Categorical axis
• Dual axis

Using the Time Axis

If the horizontal axis represents time and you want to show the variation of values over time, you can use the time axis.

It can display years, quarters, months, weeks, days, hours, minutes, and seconds.

The time axis has three main advantages:

• It allows you to display dates and times in a responsive manner.
• All the complexity involved with formatting the axis labels is automatically taken care of.
• The physical spacing between the data points accurately represents the time scale, as opposed to being equidistant.

If you do not need the advantages offered by the time axis, you can use a horizontal categorical axis instead.

Choosing the Corrects Axis

For certain chart types, the physical spacing between your data points accurately reflects the time scale being displayed, as opposed to just rendering all your data points equidistantly. We can see what a difference this makes by comparing the charts below. The chart on the left uses the categorical axis, and the chart on the right uses the time axis. Even though both charts were generated from exactly the same dataset, the high concentration of early data points means they tell completely different stories about how the values have increased over time.

Customization

Managing Null or Missing Values in a Line Chart

If you expect to have null values or missing values in your dataset, you can connect the available data points, or show a clear break between them.

Resources