Technical Articles
Use Smart Variant Management in Web IDE and Business Application Studio
Challenge
For an easier and faster development I would like to use the Smart Variant Management.
The development for this takes place in the SAP Web IDE or the Business Application Studio.
Via the CloudConnector I connect to my OnPremise system to access the data there.
Issue
The problem itself can have many causes.
However, Smart Variant Management basically accesses the SAPUI5 Flexibility Service.
SAPUI5 flexibility services allow you to extend your apps based on your requirements, for example, by creating your own variants or adapting the user interface at runtime.
The flexibility services enable the communication between the layered repository and the browser and, in particular, the storing and retrieving of variants.
A simple implementation is described in the Smart Controls documentation https://sapui5.hana.ondemand.com/#/topic/97fc0eaaf8b045779878ea829586da1a.html and under Samples https://sapui5.hana.ondemand.com/#/entity/sap.ui.comp.smarttable.SmartTable/sample/sap.ui.comp.sample.smarttable.mtableCustomToolbar
Since the personalized settings must be persisted somewhere, it must be specified where this happens and that a connection must be available.
The first clear indicator is when an error message appears when opening variant management.
In the developer console in the Network tab the lrep calls should also be documented with an error message.
Possible causes and solutions
Using Local Storage
The first option is to do without the remote Flex service completely and store the data locally in the browser via the local storage.
Thereby FakeLrepConnectorLocalStorage must be switched on in the Component.js.
This is described very well in the documentation.
You must add the following code to your Componen.js to make it look like this:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/fl/FakeLrepConnectorLocalStorage"
], function (UIComponent, FakeLrepConnectorLocalStorage) {
"use strict";
return UIComponent.extend("sap.ui.demo.smartControls.Component", {
metadata: {
manifest: "json"
},
init: function () {
FakeLrepConnectorLocalStorage.enableFakeConnector(sap.ui.require.toUrl("sap/ui/demo/smartControls/lrep/component-test-changes.json"));
UIComponent.prototype.init.apply(this, arguments);
},
destroy: function () {
FakeLrepConnectorLocalStorage.disableFakeConnector();
UIComponent.prototype.destroy.apply(this, arguments);
}
});
});
Activate the Flexibility Service
In order to use the Flexibilty Service, it must of course also be switched on.
To activate it, open transaction “SICF”.
Write “LREP*” in the field “Description” and press Execute (F8).
The path is /default_host/sap/bc/lrep
Access Control in Cloud Connector
When connecting to the OnPremise system via the CloudConnector, the individual resources in the system must be enabled.
Important here are, for example, “/sap/bc/ui5_ui5” for access to UI5 applications and “/sap/opu/odata” for access to OData services.
The Layered Repository (lrep) must not be forgotten here.
This can be set in the subaccount under “Cloud To On-Premise” in the tab “Access Control”.
In the Web IDE the following step is very important so that the UI5 app can also access the service.
In the neo-app.json the following entry must be added:
{
"path": "/sap/bc/lrep",
"target": {
"type": "destination",
"name": "MYDESTINATIONNAME",
"entryPath": "/sap/bc/lrep"
},
"description": "MYDESTINATIONNAME"
}
The destination name is the same as used in the Run Configurations for the app.
Conclusion
Before I found out that I could use the Flex service in the Web IDE, I had to deploy the app to the OnPremise system every time I made a change.
Now I can test the changes directly and this saves me a lot of time.
I hope I could help you with this.
Feel free to write further problems and solutions in the comments.
Sources:
SAP Help SAPUI5 Flexibility Services
SAP Help Layered Repository (Setup, Authorizations, more info)
SAP Answers: Answer from Jocelyn Dart with references to SAP Notes
Hi Marian,
Thank you for such a nice blog. This practice is very helpful and saves tons of time testing variants directly in WebIDE.
I just wanted to add "lrep/component-test-changes.json" file sample content you missed to include:
Regards,
Vladimirs
Hi Marian,
Thanks for the post.
Can this SAPUI5 Flexibility Service be setup on SAP HANA XSA platform?
Regards,
Roshan