how-to-replace-sap-ui-comp-variants-variantmanagement-0b64485.md

How to replace sap.ui.comp.variants.VariantManagement

This documentation is meant to ease the transition from sap.ui.comp.variants.VariantManagement (deprecated) to sap.m.VariantManagement.

As of 1.120, sap.ui.comp.variants.VariantManagement has been deprecated and replaced by sap.m.VariantManagement. For more information about this control, see the API Reference and the sample.

Differences of Controls

There are some differences between the two controls that are listed in the following table, which compares the main attributes of the controls:

Comparison of controls

sap.ui.comp.variants.VariantManagement	sap.m.VariantManagement
Standard variant available	No standard variant available, which is usually shown first The application has to implement the standard variant via the items aggregation as required. A newly added standard variant has to be inserted at position 0.
Reordering of items	No reordering of items The application has to implement ordering via the items aggregation as required. A newly added variant view has to be inserted at the required position (otherwise, it is listed alphabetically).
Default for title style H4 available	titleStyle property must be set to H4

What applications need to do

Applications need to ensure the following:

• Create a standard variant item with the rename and remove properties (variantItem )

The following code sample shows the way the former VariantManagement handled this:

			var aVariants = [{
				key: "key1",
				text: "text1",
				author: "author1"
			}, {
				key: "key2",
				text: "text2",
				author: "author2"
			}];
			var oModel = new sap.ui.model.json.JSONModel({
				variants: aVariants
			});
			var oVariantManagement = new sap.ui.comp.variants.VariantManagement({
				variantItems: {
					path: "/variants",
					template: new sap.ui.comp.variants.VariantItem({
						key: "{key}",
						text: "{text}",
						author: "{author}"
					})
				},
				save: function (oEvent) {
					var oParameters = oEvent.getParameters();
					var aNewVariants = oModel.getProperty("/variants");
					
					aNewVariants.push({
						key: oParameters.key,
						text: oParameters.name,
						author: "authorX"
					});
					
					oModel.setProperty("/variants", aNewVariants);
				}
			}).setModel(oModel);

The following code sample shows the way it is handled now. It also shows the creation of a standard variant:

			var aVariants = [{
				key: "keyStandard",
				text: "Standard",
				rename: false,
				author: "SAP"
			}, {			
				key: "key1",
				text: "text1",
				remove:true,				
				author: "author1"
			}, {
				key: "key2",
				text: "text2",
				remove:true,				
				author: "author2"
			}];
			var oModel = new sap.ui.model.json.JSONModel({
				variants: aVariants
			});
			var oVariantManagement = new sap.m.VariantManagement({
				supportFavorites: false,
				supportPublic: false,
				supportApplyAutomatically: false,
				selectedKey: "keyStandard",
				defaultKey: "keyStandard",
				popoverTitle: "My Views",
				titleStyle: "H4",
				items: {
					path: "/variants",
					template: new sap.m.VariantItem({
						key: "{key}",
						title: "{text}",
						rename: "{rename}",						
						remove: "{remove}",							
						author: "{author}"
					})
				},
				save: function (oEvent) {
					var oParameters = oEvent.getParameters();
					var aNewVariants = oModel.getProperty("/variants");
					
					aNewVariants.push({
						key: oParameters.key,
						text: oParameters.name,
						author: "authorX"
					});
					
					oModel.setProperty("/variants", aNewVariants);
				}
			}).setModel(oModel);

The following code sample shows the way the former VariantManagement handled the XML view definition:

		<core:View
			id="view1"
			height="100%"
			xmlns:mvc="sap.ui.core.mvc"
			xmlns:core="sap.ui.core"
			xmlns="sap.m"
			xmlns:variant="sap.ui.comp.variants"
			> 
			<variant:VariantManagement standardItemText="Standard" enabled="true" showExecuteOnSelection="false" showShare="false" id="variantManagement">
				<variant:variantItems>
					<variant:VariantItem text="variant1" key="variant1"/>
				</variant:variantItems>
			</variant:VariantManagement>
				
		</core:View>

The following code sample shows the way it is handled now:

		<mvc:View
			id="view1"
			height="100%"
			xmlns:mvc="sap.ui.core.mvc"
			xmlns:core="sap.ui.core"
			xmlns="sap.m"
			> 
			<VariantManagement supportApplyAutomatically="false" supportPublic="false" id="variantManagement"
			      titleStyle="H4" supportFavorites="false" selectedKey="keyStandard" defaultKey="keyStandard" popoverTitle="My Views">
				<items>
					<VariantItem title="Standard" key="keyStandard" rename="false"/>				
					<VariantItem title="variant1" key="variant1" remove="true"/>
				</items>
			</VariantManagement>
				
		</mvc:View>