Skip to Content
Technical Articles
Author's profile photo Suleyman Dogu

Adding a second standard layout in Variant Management

Overview

In this blog post you will have information about how to create a new standard layout in SAPUI5 Variant management.

Before reading this blog post, I would recommend you to look into the below links to get more information about SAPUI5 coding for Variant Management.

https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.variants.VariantManagement

https://experience.sap.com/fiori-design-web/variant-management/

And, you can see how to implement table personalization in SAP UI5/FIORI in the below link before my blog post.

https://blogs.sap.com/2018/07/23/persistent-table-personalization-in-sap-ui5fiori-apps-using-variant-management-step-by-step-guide/

Variants let you store settings that users create for the smart filter bar, such as selection fields and layout, and for the smart table, such as sorting and visible columns. The variant management provides us a standard layout as default like shown below screenshots. But for some cases users might need more than one standard layout to change table view easily without spending time for saving a new layout. In situations like this I think that my blog post will help you.

 

The variant items are appeared after pressing the specified section as shown below.

After pressing the manage button above, you will see a standard layout described by default. Now we will try creating a new one with different columns like this one.

Step 1 : Coding XML view using sap.ui.table.Table and sap.ui.comp.variants.VariantManagement libraries

At first you should add the Variant Management and ui table to view. As you can see below, you must id for table and each column of table to able to create a new standard layout.

<!DOCTYPE xml>
<mvc:View xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:table="sap.ui.table" xmlns:v="sap.ui.comp.variants" xmlns:viz="sap.viz.ui5.controls"
	xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core"
	controllerName="com.test.tst.controller.OverviewTabs.PROverview"
	xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
	<OverflowToolbar>
		<!-- Variant Management -->
		<v:VariantManagement select="onSelectVariant" save="onSaveVariant" id="VMId" showSetAsDefault="true" enabled="true" manage="onManageVM"
			showExecuteOnSelection="false" variantItems="{/}" showShare="false">
			<v:variantItems>
				<v:VariantItem key="{key}" text="{text}" readOnly="{=${key}==='layout2'}" executeOnSelection="true"/>
			</v:variantItems>
		</v:VariantManagement>
		<!-- Setting -->
		<Button icon="{i18n>SRP_B_Settings}" tooltip="{i18n>SRP_BT_Settings}" press="onSettings" type="Transparent"/>
		<ToolbarSpacer/>
	</OverflowToolbar>
	<table:Table rows="{jsonModel>/}" enableColumnFreeze="true" id="PROverviewTId" alternateRowColors="true" enableSelectAll="true"
		selectionMode="MultiToggle" enableGrouping="true" visibleRowCount="15" visibleRowCountMode="Interactive"
		rowSelectionChange="onTableRowSelect" showColumnVisibilityMenu="true">
		<table:columns>
			<table:Column id="PROCol0" filtered="false" filterProperty="KNUMH" sorted="false" sortProperty="KNUMH">
				<Label design="Bold" text="Click" tooltip="Open"></Label>
				<table:template>
					<HBox>
						<Button icon="sap-icon://feeder-arrow" type="Transparent" app:condId="{jsonModel>KNUMH}" app:articleId="{jsonModel>MATNR}" press="onNavToPR"></Button>
					</HBox>
				</table:template>
			</table:Column>
			<table:Column id="PROCol1" filtered="false" hAlign="Center" class="myborder" filterProperty="ZCOMPLETION_STAT" sorted="false"
				sortProperty="ZCOMPLETION_STAT">
				<Label design="Bold" text="Status" tooltip="{i18n>PRO_T_compStatus}"></Label>
				<table:template>
					<ObjectStatus tooltip="{path:'jsonModel>ZCOMPLETION_STAT', formatter:'.formatter.getCompletionStatusTT'}"
						state="{path:'jsonModel>ZCOMPLETION_STAT', formatter:'.formatter.getCompletionStatus'}"
						icon="{path:'jsonModel>ZCOMPLETION_STAT', formatter:'.formatter.getCompletionStatusIcon'}"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol2" filtered="false" filterProperty="POSNR" sorted="false" sortProperty="POSNR">
				<Label design="Bold" text="ID"></Label>
				<table:template>
					<Text text="{jsonModel>POSNR}" tooltip="{jsonModel>POSNR}" maxLines="1"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol3" filtered="false" filterProperty="ZSTATUS_NAME" sorted="false" sortProperty="ZSTATUS_NAME">
				<Label design="Bold" text="Status Text"></Label>
				<table:template>
					<Text text="{jsonModel>ZSTATUS_NAME}" maxLines="1" tooltip="{jsonModel>ZSTATUS_NAME}"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol4" filtered="false" hAlign="Center" filterProperty="ZCOMPLETION_STAT" sorted="false" sortProperty="ZCOMPLETION_STAT">
				<Label design="Bold" text="Material"></Label>
				<table:template>
					<Text text="{jsonModel>ZMATNR}" tooltip="{jsonModel>ZMATNR}" maxLines="1"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol5" filtered="false" filterProperty="ZVKORG" sorted="false" sortProperty="ZVKORG">
				<Label design="Bold" text="Organization"></Label>
				<table:template>
					<Text text="{jsonModel>ZVKORG} {jsonModel>ZVKORG_DESC}" tooltip="{jsonModel>ZVKORG} {jsonModel>ZVKORG_DESC}" maxLines="1"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol6" filtered="false" filterProperty="ZVALTO" sorted="false" sortProperty="ZVALTO">
				<Label design="Bold" text="Date"></Label>
				<table:template>
					<Text text="{path:'jsonModel>ZVALTO', formatter:'.formatter.getDateFormat'}"
						tooltip="{path:'jsonModel>ZVALTO', formatter:'.formatter.getDateFormat'}" maxLines="1"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol7" filtered="false" filterProperty="ZZ_GEBART" sorted="false" sortProperty="ZZ_GEBART">
				<Label design="Bold" text="Detail"></Label>
				<table:template>
					<Text text="{jsonModel>ZZ_GEBART} - {jsonModel>ZZ_GEBART_DESC}" tooltip="{jsonModel>ZZ_GEBART} - {jsonModel>ZZ_GEBART_DESC}" maxLines="1"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol8" filtered="false" filterProperty="ZQUANTITY3" sorted="false" sortProperty="ZQUANTITY3">
				<Label design="Bold" text="Unit"></Label>
				<table:template>
					<Text
						text="{ path: 'jsonModel>ZQUANTITY3', type: 'sap.ui.model.type.Float', formatOptions: { minIntegerDigits:1, minFractionDigits: 0, maxFractionDigits: 0 } } {jsonModel>MEINS}"
						tooltip="{ path: 'jsonModel>ZQUANTITY3', type: 'sap.ui.model.type.Float', formatOptions: { minIntegerDigits:1, minFractionDigits: 0, maxFractionDigits: 0 } } {jsonModel>MEINS}"
						maxLines="1"/>
				</table:template>
			</table:Column>
			<table:Column id="PROCol9" filtered="false" filterProperty="ZFINSALES" sorted="false" sortProperty="ZFINSALES">
				<Label design="Bold" text="Amount"></Label>
				<table:template>
					<Text
						text="{path: 'jsonModel>ZFINSALES', type: 'sap.ui.model.type.Float', formatOptions: { minIntegerDigits:1, minFractionDigits: 2, maxFractionDigits: 2 } } {jsonModel>ZWAERS2Q}/{jsonModel>MEINS}"
						tooltip="{path: 'jsonModel>ZFINSALES', type: 'sap.ui.model.type.Float', formatOptions: { minIntegerDigits:1, minFractionDigits: 2, maxFractionDigits: 2 } } {jsonModel>ZWAERS2Q}/{jsonModel>MEINS}"
						maxLines="1"/>
				</table:template>
			</table:Column>
		</table:columns>
	</table:Table>
</mvc:View>

 

Step 2 : Creating a .json file which includes binding model of table and all the columns of table.

Firstly you should find table ID and column ID of the each column by using F12 key as shown below.

For my example, I have 10 columns.

Column Ids;

–  __xmlview1–PROCol0

–  __xmlview1–PROCol1 

–  __xmlview1–PROCol2 

–  __xmlview1–PROCol3 

–  __xmlview1–PROCol4 

–  __xmlview1–PROCol5 

–  __xmlview1–PROCol6 

–  __xmlview1–PROCol7

–  __xmlview1–PROCol8

–  __xmlview1–PROCol9

 

 

Now, it is time to create a json file. You can see table.json file I’ve created in the below code part. If you pay attention, I set visible property of first 5 columns as true. Because I want only these columns to display in new standard layout I will create.

 

You should consider combining table id and column ids when you prepare json file as shown below. (like –xmlview1–TableId-__xmlview1–PROColx )

{
	"jsonModel": {
		"layout2": {
			"text": "New standard layout",
			"settings": {
				"aColumns": [{
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol0",
					"order": 0,
					"visible": true,
					"width": "9em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Click"
				},{
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol1",
					"order": 1,
					"visible": true,
					"width": "9em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Status"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol2",
					"order": 2,
					"visible": true,
					"width": "7em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "ID"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol3",
					"order": 3,
					"visible": true,
					"width": "7em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Status Text"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol4",
					"order": 4,
					"visible": true,
					"width": "12em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Material"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol5",
					"order": 5,
					"visible": false,
					"width": "5em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Organization"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol16",
					"order": 6,
					"visible": false,
					"width": "4em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Date"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol7",
					"order": 7,
					"visible": false,
					"width": "7em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Detail"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol8",
					"order": 8,
					"visible": false,
					"width": "3em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Unit"
				}, {
					"id": "__xmlview1--PROverviewTId-__xmlview1--PROCol9",
					"order": 9,
					"visible": false,
					"width": "3em",
					"sorted": false,
					"sortOrder": "Ascending",
					"grouped": false,
					"name": "Amount"
				} ],
				"_persoSchemaVersion": "1.0"
			}
		}
	}
}

 

Step 3 : Javascript coding to create the new standard layout

In the last step, we will be creating the new standard layout using getContainer() method of sap.ushell.Container.getService(“Personalization”) standard class.

You can find more information about this in the below link.

https://sapui5.hana.ondemand.com/#/api/sap.ushell.services.Personalization

 

In this code part my aim is that the new data in table.json file is added to container item and saved.

setStandardVariantTable: function (tableId, callback) {
				var thiz = this;
				var oTable = this.getView().byId(tableId);
				sap.ushell.Container.getService("Personalization").getContainer("com.test.tst").then(function (oCC) {
					thiz.oCC = oCC; //oContextContainer
					// 1 check if item is available or not if not then create
					if (!oCC.containsItem(tableId)) {
						oCC.setItemValue(tableId, {
							items: []
						});
					}
					// 2 check if standard is available or not if not then create
					var ovar = oCC.getItemValue(tableId);
					//if (!ovar.hasOwnProperty("*standard*")) {
					thiz.getDefaultPersoData(oTable, function (defaultSet) {
						ovar["*standard*"] = {
							key: "*standard*",
							text: "Standard",
							data: defaultSet
						}; //set default data
						if (!ovar.hasOwnProperty("defaultKey")) {
							ovar["defaultKey"] = "*standard*";
						}
						oCC.setItemValue(tableId, ovar);

						var oModel = new sap.ui.model.json.JSONModel();
						oModel.loadData(jQuery.sap.getModulePath("com.test.tst", "/model/table.json"), "", false);
						var data = oModel.getProperty("/jsonModel");
						debugger;
						for (var lay in data) {
							ovar[lay] = {
								key: lay,
								text: data[lay].text,
								data: data[lay].settings
							}
							ovar.items.push({
								key: lay,
								text: data[lay].text
							});
						}
						oCC.setItemValue(tableId, ovar);
						oCC.save().done(function () {
							if (callback) {
								callback(oCC, defaultSet);
							}
						}).fail(function (err) {
							console.log(err);
						});
					});
				});
			},

 

Finally, I have two layouts when I open my page and I can switch to view I want easily.

Conclusion

In this blog post, we saw that more than one layouts as initial for all users can be created instead of all users are creating common layout like this one by one.

References

https://sapui5.hana.ondemand.com/#/api/sap.ushell.services.Personalization

https://sapui5.hana.ondemand.com/#/api/sap.ui.table.TablePersoController%23controlProperties

Süleyman Doğu

Assigned Tags

      2 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Canan Özdemir
      Canan Özdemir

      Great example. Thanks for sharing !

      Author's profile photo Emre Çetinkaya
      Emre Çetinkaya

      Thank you for your useful sharing.