UI Elements Views (Variant Management)

Updated: July 25, 2017
SAPUI5 Version 1.48

Variant Management

sap.ui.comp.variants.VariantManagement

Intro

Variants store filter settings which have been defined within the filter bar. The filter settings consist of filter parameters, selection fields and a layout. This control enables the user to load, save, and change variants. In some cases, the table settings are also saved within a variant.

In the context of tables, this control is used to save, manage, and load table settings which include layout, column visibility, sorting, and grouping.

Smart variant management saves both filter settings and table layouts. It creates a page variant that includes all the controls. The button is located within the page header bar, and no secondary management is possible on table level.

Usage

Use the variant management control if:

  • The user needs to save and load different filter settings to find the relevant data.
  • The user needs to save and load different layouts (for example, a table) to display data in different views.
  • Use smart variant management if the user needs to save the page including the filter settings and table layout.

Responsiveness

Size S (Smartphone)

Variant selection, manage dialog, and save dialog are opened in full screen.

Variant selection
Variant selection
Manage variants
Manage variants
Save variant
Save variant

Size M (Tablet)

Variant selection
Variant selection
Manage variants
Manage variants
Save variant
Save variant

Size L (Desktop)

Variant selection
Variant selection
Manage variants
Manage variants
Save variant
Save variant

Layout

The variant management control is used within the filter bar (next to the page title) and the table toolbar (next to the table title).

Filter Bar

The variant management control is located next to the page title within the page header container and saves the stored filter settings or both filter and table settings.

Variant management within filter bar next to the page title
Variant management within filter bar next to the page title

Table

The variant management control can also store table settings (layout, column visibility, sorting, or grouping) independently of the filter settings.

It is placed as the first item within the table toolbar.

If a title or the variant management control is placed inside a toolbar, you need to apply the following styles:

  • The toolbar height must be set to 3 rem.
  • The toolbar design must be transparent.
  • The title must have the class “sapMH4Fontsize”.
Variant management within table toolbar
Variant management within table toolbar

If the table has a separate title, place the title first.

Variant management with table title
Variant management with table title

Behavior and Interaction

This control allows the user to select, create, update, and delete variants within the filter bar. In the context of a table, this is the table configuration (layout, column visibility, sorting, and grouping).

Selecting a Variant

The control label displays the active variant. When the user selects it, a popover displays all available variants. The currently active variant is highlighted. To load another variant, the user simply selects one from the list.

Variants that have been modified but not saved are marked with an asterisk (*).

Selecting a variant
Selecting a variant

If more than 10 variants exist, a search option is displayed.

Select variant – Search option
Select variant – Search option

The standard variant is the minimum set of variants which is delivered by SAP and cannot be modified or deleted.

Save

Save can only be applied to variants that the user is allowed to save. Otherwise, this button is disabled. Save overwrites the active variant.

Save As

Save As enables the user to save the current filter settings as a new variant. The Save As function can also be used to duplicate existing variants for later modification.

Manage

This opens a new dialog which allows the user to update and delete existing variants.

Creating – “Save As” Variant

The following options can be set:

Set as Default

The variant that is set to default is selected when the user launches the app.

Execute on Select

If this option is active, the variant is executed immediately. The user does not need to click or tap the ‘Go’ button. This option is often used if small filter changes need to be made before the user finally executes the search.

Save As
Save As

Share

The user can set the Share option to make a variant available to other users.

All variants that are shared by users or delivered by SAP, partners, or key users are available within the manage list and the selection list.

Create As Tile

A tile with the same label as the variant is created on the home page.

You can hide the options Execute on Select and Create as Tile by configuring the control correspondingly.

Information
Note that you must still create the tile even if you select the Create as Tile flag.

Managing – Update/Delete Variant

Within the manage dialog, the user can rename, delete, and change properties of existing variants.

Users can only modify or delete entries if they have the necessary permissions. By default, variants which have been created by the user can also be modified and deleted. Users can also modify and delete entries from other users. This is currently a limitation.

 

Based on the configuration of the variant management control, the following column can be hidden or shown:

  • Execute on Select. (If this control is used in the context of tables, Execute on Select is hidden.)
Manage
Manage

Guidelines

In the context of variants, we recommend that you directly reference the variant with the tile. Use the name of the variant as the tile title. Map this as a preset title that cannot be edited by the user.  In this case, whenever the variant is updated, the tile is updated accordingly.

Enable the option Create as Tile within the Save As dialog if your use case generally requires a tile to be created immediately after the Save As action.  In some scenarios, such as MRP, variants and their respective tiles are created on a weekly basis and then removed.

If the variant has been modified but not yet saved (“dirty state”), ensure that the variant is saved before the tile is created.

Exception

If the variant cannot be referenced directly due to technical limitations, offer the standard tile creation option where only filter parameters and settings are saved within the URL. Do not offer the Create as Tile option within the Save As dialog.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation