Show TOC

Step 7: Variant ManagementLocate this document in the navigation structure

The VariantManagement control allows you to handle variants and makes it possible for the user to persist changes carried out on the UI and then later retrieve these changes.

For the smart controls, changes that are persisted include definitions of the filter used to query the results for the table and all changes done to the table with table personalization, visibility of columns and so on. Since we wish to provide stand-alone examples that can run on a local Web server, we do not connect to a real server on which the changes can be persisted so they can be retrieved later. Consequently, in our examples, changes are only kept in the current user session.

Preview

Initially, the UI looks as in the previous steps:

Figure 1: Initial UI Without Personalization

We press Filters as shown in step 5 and then Save in the related dialog.

Figure 2: Specifying the Filter

After that, the following dialog is shown:

Figure 3: Defining the Variant Name

In this dialog, we specify the name under which this variant is persisted, in our case With Currency EUR.. With Set as Default, we can also specify whether this variant is always used initially when navigating to this particular UI (since in our example we only persist within one browser session, this setting has no effect). With Execute on Select we define that the query is fired automatically. The idea behind Share is that some popular but perhaps fairly complicated query settings that are used by several users can be automatically provided to all users. This Share option only has an effect when running on a real server and not on the mock server as in our example. If you choose Share, additional information regarding sharing is required.

We verify these settings now and return to our main UI:

Figure 4: UI with Active Variant

We notice that the Currency field is available in the filter bar and that we have already specified EUR as the currency.

Finally we now customize the table so that we do not see the ProductId column anymore. To do that, we press the Settings icon in the upper right-hand corner of the table and deselect ProductId in the dialog:

Figure 5: Remove ProductId

Returning to the main UI, we see that only the three columns required are now shown:

Figure 6: Personalized Table

Figure 7:

The * right next to the Standard variant indicates that a change has been made. We save this change by choosing the down-arrow symbol and Save As in the dialog, which takes us to a second dialog:

Figure 8: Specifying the Variant Name

Also, here we have the possibility to set this as default and to share the variant. The latter is similar to the variant for the SmartFilterBar control. After confirming the specified name, you return directly to the main UI.

Figure 9: Variant for the Filter Bar and Variant for the Table
Coding

You can view and download all files in the Explored app in the Demo Kit under Smart Controls - Step 7 - Variant Management.

Since the coding is essentially identical with step 5 and step 6, we do not make any listing apart from the view.xml in which one property value has been changed and persistencyKeys have been specified.

VariantManagement.view.xml
<mvc:View 
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="sap.ui.demo.smartControls.VariantManagement"
	xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
	xmlns:smartTable="sap.ui.comp.smarttable">
	<smartFilterBar:SmartFilterBar 
		id="smartFilterBar"
		entityType="Product"
		persistencyKey="SmartFilterPKey">
		<smartFilterBar:controlConfiguration>
			<smartFilterBar:ControlConfiguration
				key="Category" 
				visibleInAdvancedArea="true"
				preventInitialDataFetchInValueHelpDialog="false">
			</smartFilterBar:ControlConfiguration>
		</smartFilterBar:controlConfiguration>
	</smartFilterBar:SmartFilterBar>
	<smartTable:SmartTable 
		id="smartTable_ResponsiveTable"
		smartFilterId="smartFilterBar" 
		tableType="ResponsiveTable" 
		editable="false"
		entitySet="Products" 
		useVariantManagement="true"
		useTablePersonalisation="true" 
		header="Products" 
		showRowCount="true"
		useExportToExcel="false" 
		enableAutoBinding="true"
		persistencyKey="SmartTablePKey">
	</smartTable:SmartTable>
</mvc:View>