Updated: February 8, 2023

SAPUI5 Version 1.120

Smart Link

sap.ui.comp.navpopover.SmartLink

Intro

Like the quick view, the smart link triggers a popover from a text link. This popover shows additional information, such as simple object details, and offers links to related apps for the user to take action. The user can choose which links are shown in the popover by selecting them in a separate dialog.
The smart link is a smart control that uses metadata annotations to offer user-specific navigation. It analyzes the user’s assigned apps and offers only relevant navigation targets.

When to Use

Use the smart link if:

You want to offer direct navigation to a related app. For example:

Navigate from a product list to the app for changing the pricing
Navigate from a sales order list to the app that shows a customer’s balance

You want to show a popover with contextual information or navigation. For example:

Offer navigation to multiple related apps
Display simple object details

Do not use the smart link if:

You want to display more or complex information about an object. Use the object page or charts instead.
Access to metadata is not possible, and only a direct link to a website, document or application is needed. Use the standard link instead.
You need to structure information in a deeper hierarchy. Use the quick view or a list drilldown instead.

Components

The smart link popover contains the following areas:

The header bar of the smart link popover is only visible on mobile devices (see example image for responsiveness, size S).
The title area contains a title and a subtitle. You can also show the title as a link, which can be used to navigate to the corresponding object or fact sheet. You can use the subtitle to show an object ID, for example.
The content area shows object-related information, such as details about a product or contact information. You can use any UI control, based on what best fits your use case.
The link area offers links to all other apps that are relevant for a user role. The link list includes all semantic objects defined for the app, and can also include additional links defined manually by the application development team. The link area can have two states:

Link area is empty:
If no links have been selected for the app, or if there are more than 10 links, the link area is initially empty. Instead, the user sees a Define Links button, which opens a dialog for selecting the links to be shown.

Links are shown:
As soon as the link area contains links, the button text changes to More Links. This opens the same selection dialog.

Only the header bar is mandatory (for mobile devices). All the other sections are optional. For example, you might choose to show only a content area or a only a link area, depending on your use case.

The areas of the smart link (header bar not shown)

Behavior and Interaction

The smart link and its popover are always triggered by clicking a text element that appears as a link. You can place this text element in any list, table, or other container. You can also set the link label individually. Clicking outside the popover closes it. If only one link is offered, and there is no additional information, the smart link control navigates directly to the target without opening the popover.

If the semantic object annotation is not set, the smart link is rendered as sap.m.Text by default. However, you can also opt to render any other control.

Link Selection Dialog

Clicking the More Links or Define Links button opens the Define Link List dialog. There, the user can select the app links to be displayed in the link area. The links offered in the selection list are modifiable semantic objects suggested by the smart link control. The app team can remove links from the selection list, change the link texts, or manually add links to any website or app.

Exception: Within SAP Fiori elements, the links offered in the Define Link List dialog are generated automatically. App teams cannot adapt the list.

You can switch off the More Links / Define Links option by setting the property enableAvailableActionsPersonalization to “false”. By default, it is set to “true”.

Smart Links in a Smart Table

Within a smart table, the link label of the smart link is set automatically using the semantic object annotation. In other words, you can’t change the description. If there are no navigation targets, the smart link is rendered as sap.m.Text.

Define link list dialog with a list of application links

Responsiveness

The responsiveness of the smart link is based on the responsiveness of the popover that overlays the content.

On desktop devices, clicking anywhere outside the popover closes it.

On mobile devices, the smart link opens a full screen dialog with a Close icon () on the top right.

Size S – On smartphones, the smart link overlays the content

Sizes M/L/XL - Smart link shown in a table on a desktop device

Top Tips

Check the related apps you offer carefully. Only display those that are relevant for the user.
Use meaningful link names in the link area. Do not use the same link name more than once. If necessary, rename the links to suit your context (for example, “Add Product” instead of “Manage Products”).