- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
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.
Layout
Filter Bar
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”.
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 (*).
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.
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.
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.)
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
- Responsive Table (guidelines)
- Table Toolbar (guidelines)
- Filter Bar (guidelines)