Overview

SAP Companion provides in-app help for web applications. It presents knowledge and assets directly within the flow of work. The context help provides additional information for particular areas on the current application screen. It enables users to quickly get orientated in new, rarely used, or complex application interfaces.

Look and Feel of the SAP Companion

When to Use

false

Recommended

Use the SAP Companion if you want to give additional context-specific information, such as:

The meaning or usage of a specific UI element
A guided process with information for each step
Best practices for the users
Useful links

dont

false

Not Recommended

Do not use the in-app help if the UI element is self-explanatory, such as:

Self-explanatory Buttons (Save, Cancel, Delete, Edit, etc)
Clearly labeled input fields (First Name, Last Name, Street, Phone, Email, etc.)

Layout Anatomy

The SAP Companion should be displayed outside of the tool on the side. The only exception is when displaying the companion in expanded mode on mobile phones. In that case, the SAP Companion should overlay the tool content.

56.05; 18.23

The tool layout shrinks to accommodate the space required by the SAP Companion.

53.82; 88.75

Placed in an empty container on the side of the Tool Layout.

Display Modes

SAP Companion.png

Expanded (Default)

This is the default mode of the SAP Companion.

SAP Companion - Snapped.png

Minimized

The companion can be minimized to a narrow side panel.

Design

While the design of the SAP Companion is handled externally there are some general requirements when it comes to placing the SAP Companion alongside BTP Tools. Refer to the image and look below for details.

Expanded Variant Placement

Minimized Variant Placement

<div> <div>Element</div> <div>All Themes</div> </div> <div> <div></div> <div> <p>background: var(--sapGroup_ContentBackground);</p> <p>box-shadow: box-shadow: var(--sapToolLayoutContent_Shadow1);</p> <p>width: 20.25rem;2.75rem;</p> </div> </div> <div> <div></div> <div> <p>margin-left: 0.5rem;</p> <p>margin-left: 0.25rem;</p> </div> </div>

Trigger

According to the UXC Standards for Shell and the User Menu designs and guidelines, all hep topics must be moved to the User Menu. This means the trigger to show the SAP Companion can be found deep in that menu.