<Table id="DemoTableUI" visibleRowCountMode="Fixed" selectionBehavior="Row" selectionMode="None">
<extension>
<m:Toolbar>
<m:content>
<!--add variant management-->
<variant:VariantManagement variantItems="{/VariantList}" select="onSelect" save="onSaveAs" enabled="true" manage="onManage" showExecuteOnSelection="false" showShare="false" id="Variants">
<variant:variantItems>
<variant:VariantItem text="{Name}" key="{Key}"/>
</variant:variantItems>
</variant:VariantManagement>
<m:ToolbarSpacer/>
<m:Button icon="sap-icon://action-settings" press="onPersoButtonPressed" tooltip="Columns Settings"/>
</m:content>
</m:Toolbar>
</extension>
// Peronalisation from ushell service to persist the settings
if (sap.ushell && sap.ushell.Container && sap.ushell.Container.getService) {
var oComponent = sap.ui.core.Component.getOwnerComponentFor(this.getView());
this.oPersonalizationService = sap.ushell.Container.getService("Personalization");
var oPersId = {
container: "TablePersonalisation", //any
item: "DemoTableUI" //any- I have used the table name
};
// define scope
var oScope = {
keyCategory: this.oPersonalizationService.constants.keyCategory.FIXED_KEY,
writeFrequency: this.oPersonalizationService.constants.writeFrequency.LOW,
clientStorageAllowed: true
};
// Get a Personalizer
var oPersonalizer = this.oPersonalizationService.getPersonalizer(oPersId, oScope, oComponent);
this.oPersonalizationService.getContainer("TablePersonalisation", oScope, oComponent)
.fail(function() {})
.done(function(oContainer) {
this.oContainer = oContainer;
this.oVariantSetAdapter = new sap.ushell.services.Personalization.VariantSetAdapter(this.oContainer);
// get variant set which is stored in backend
this.oVariantSet = this.oVariantSetAdapter.getVariantSet("DemoTableUISet");
if (!this.oVariantSet) { //if not in backend, then create one
this.oVariantSet = this.oVariantSetAdapter.addVariantSet("DemoTableUISet");
}
// array to store the existing variants
Variants = [];
// now get the existing variants from the backend to show as list
for (var key in this.oVariantSet.getVariantNamesAndKeys()) {
if (this.oVariantSet.getVariantNamesAndKeys().hasOwnProperty(key)) {
var oVariantItemObject = {};
oVariantItemObject.Key = this.oVariantSet.getVariantNamesAndKeys()[key];
oVariantItemObject.Name = key;
Variants.push(oVariantItemObject);
}
}
// create JSON model and attach to the variant management UI control
this.oVariantModel = new sap.ui.model.json.JSONModel();
this.oVariantModel.oData.Variants = Variants;
this.getView().byId("Variants").setModel(this.oVariantModel);
}.bind(this));
// create table persco controller
this.oTablepersoService = new TablePersoController({
table: this.getView().byId("DemoTableUI"),
persoService: oPersonalizer
});
}
onPersoButtonPressed: function(oEvent) {
this.oTablepersoService .openDialog({
ok: "this.onPerscoDonePressed.bind(this)"
});
this.oTablepersoService ._oDialog.attachConfirm(this, this.onPerscoDonePressed.bind(this));
},
onPerscoDonePressed: function(oEvent) {
this.oTablepersoService .savePersonalizations();
},
onSaveAs: function(oEvent) {
// get variant parameters:
var VariantParam = oEvent.getParameters();
// get columns data:
var aColumnsData = [];
this.getView().byId("DemoTableUI").getColumns().forEach(function(oColumn, index) {
var aColumn = {};
aColumn.fieldName = oColumn.getProperty("name");
aColumn.Id = oColumn.getId();
aColumn.index = index;
aColumn.Visible = oColumn.getVisible();
aColumnsData.push(aColumn);
});
this.oVariant = this.oVariantSet.addVariant(VariantParam.name);
if (this.oVariant) {
this.oVariant.setItemValue("ColumnsVal", JSON.stringify(aColumnsData));
if (VariantParam.def === true) {
this.oVariantSet.setCurrentVariantKey(this.oVariant.getVariantKey());
}
this.oContainer.save().done(function() {
// Tell the user that the personalization data was saved
});
}
},
onSelect: function(oEvent) {
var selectedKey = oEvent.getParameters().key;
for (var i = 0; i < oEvent.getSource().getVariantItems().length; i++) {
if (oEvent.getSource().getVariantItems()[i].getProperty("key") === selectedKey) {
var selectedVariant = oEvent.getSource().getVariantItems()[i].getProperty("text");
break;
}
}
this._setSelectedVariantToTable(selectedVariant);
},
_setSelectedVariantToTable: function(oSelectedVariant) {
if (oSelectedVariant) {
var sVariant = this.oVariantSet.getVariant(this.oVariantSet.getVariantKeyByName(oSelectedVariant));
var aColumns = JSON.parse(sVariant.getItemValue("ColumnsVal"));
// Hide all columns first
this.getView().byId("DemoTableUI").getColumns().forEach(function(oColumn) {
oColumn.setVisible(false);
});
// re-arrange columns according to the saved variant
aColumns.forEach(function(aColumn) {
var aTableColumn = $.grep(this.getView().byId("DemoTableUI").getColumns(), function(el, id) {
return el.getProperty("name") === aColumn.fieldName;
});
if (aTableColumn.length > 0) {
aTableColumn[0].setVisible(aColumn.Visible);
this.getView().byId("DemoTableUI").removeColumn(aTableColumn[0]);
this.getView().byId("DemoTableUI").insertColumn(aTableColumn[0], aColumn.index);
}
}.bind(this));
}
// null means the standard variant is selected or the variant which is not available, then show all columns
else {
this.getView().byId("DemoTableUI").getColumns().forEach(function(oColumn) {
oColumn.setVisible(true);
});
}
},
onManage: function(oEvent) {
var aParameters = oEvent.getParameters();
// rename variants
if (aParameters.renamed.length > 0) {
aParameters.renamed.forEach(function(aRenamed) {
var sVariant = this.oVariantSet.getVariant(aRenamed.key),
sItemValue = sVariant.getItemValue("ColumnsVal");
// delete the variant
this.oVariantSet.delVariant(aRenamed.key);
// after delete, add a new variant
var oNewVariant = this.oVariantSet.addVariant(aRenamed.name);
oNewVariant.setItemValue("ColumnsVal", sItemValue);
}.bind(this));
}
// default variant change
if (aParameters.def !== "*standard*") {
this.oVariantSet.setCurrentVariantKey(aParameters.def);
} else {
this.oVariantSet.setCurrentVariantKey(null);
}
// Delete variants
if (aParameters.deleted.length > 0) {
aParameters.deleted.forEach(function(aDelete) {
this.oVariantSet.delVariant(aDelete);
}.bind(this));
}
// Save the Variant Container
this.oContainer.save().done(function() {
// Tell the user that the personalization data was saved
});
},
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
10 | |
9 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 | |
3 |