Skip to Content
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.

error%20message%20opening%20variant%20management

In the developer console in the Network tab the lrep calls should also be documented with an error message.

lrep%20calls%20in%20dev%20console

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

activate%20flex%20service%20in%20sicf
Right click on the “lrep” and select “Activate Service”. Confirm the dialog with “Yes”.

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”.

ressource%20dialog%20cloud%20connector
Click on the “Add” symbol (1) and fill out the dialog as above.
Afterwards this entry should appear (2).

cloud%20connector%20settings%20cloud%20to%20on-premise

 

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

Be the first to leave a comment
You must be Logged on to comment or reply to a post.