Technical Articles
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.
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
Great example. Thanks for sharing !
Thank you for your useful sharing.