[Note : This blog would be equally relevant for Lumira Designer 2.x as well as the same migration from SAP UI5 commons controls to sap.m would be required . This blog would focus from the perspective of Lumira discovery.]
With the technology migration from Lumira 1.x to 2.0 , we had taken a conscious call where-in we moved away from supporting the SAP UI5 (including Open UI5 as we) commons library controls to the sap.m library controls and its standards . Now, what it means to our developers is if they have developed any visualisation or data access extensions or components using the SAP UI5 commons library for SAP Lumira , then would have to migrate to the sap.m (https://sapui5.hana.ondemand.com/#/api/sap.m) controls . Using rest of web friendly technologies like the HTML , CSS , Javascripts still remains the same and you can continue using it as long as you were following the guidelines suggested for developing 1.x extensions.
An example for how the library controls between SAP UI5 commons and sap.m would look like is mentioned in the below sample table :
In this blog instead of being theoretical , I will try my best to provide you with a sample data access extension which was built for Lumira Desktop 1.x in SAP UI5 commons library and we will understand how to move to 2.0 to make it UP and Running.
Instead of just mentioning the the technology changes , I will take the example of an extension which is already available in GitHub : Google chrome network logs data access extension :
The extension is available in the below link which you can download(As of today by this time the blog publishes, the extension is still supported for 1.x line and needs to be upgraded.)
https://github.com/SAP/lumira-extension-da-google-chrome-network-logs
The UI elements for the current data access extension was built using SAP UI5 commons library and what we would understand from here in this blog is , how we migrate to SAP UI5 commons library to sap.m library.
At first, i have downloaded the extension available from the GitHub and then imported into the Eclipse IDE.
In the current Chrome network logs extension , the UI is built using the SAP UI5 commons UI controls and the main UI file which is available as part of the file
ChromeLogsExtensionDialogController.js .
In the below screenshots , you can find on your left side of the code is the 1.x supported old UI5 commons controls where-as on your right side of the screen , you can find the changed sap.m controls code.
The complete changed code with sap.m UI controls is given below : /* Copyright 2015, SAP SE Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ define(function() { “use strict”; var ChromeLogsExtensionDialogController = function(acquisitionState, oDeferred, fServiceCall, workflow) { /* * Create dialog controls */ var dLayout = new sap.ui.layout.VerticalLayout({ }); var datasetNameTxt = new sap.m.Input({ enabled : workflow === “CREATE” }); var datasetNameLbl = new sap.m.Label({ text : “Dataset Name:”, labelFor : datasetNameTxt }); dLayout.addContent( datasetNameLbl); dLayout.addContent( datasetNameTxt); // These paths correspond to the included sample data if the workspace // was unzipped to the C drive var datasetTxt = new sap.m.Input({ width : ‘300px’, value : ‘C:’ }); var datasetLbl = new sap.m.Label({ text : “Logs Folder:”, labelFor : datasetTxt }); dLayout.addContent( datasetLbl); dLayout.addContent(datasetTxt); var metadataTxt = new sap.m.Input({ width : ‘300px’, value : ‘C:metadata.txt’ }); var metadataLbl = new sap.m.Label({ text : “Metadata File:”, labelFor : metadataTxt }); dLayout.addContent( metadataLbl); dLayout.addContent(metadataTxt); /* * Button press events */ this.buttonCancelPressed = function() { oDeferred.reject(); // promise fail dialog.close(); }; var buttonOKPressed = function() { var info = {}; info.logsFolder = datasetTxt.getValue(); info.metadataFile = metadataTxt.getValue(); info.datasetName = datasetNameTxt.getValue(); // info.model = oAccordion.getModel().oData; acquisitionState.info = JSON.stringify(info); oDeferred.resolve(acquisitionState, datasetNameTxt.getValue()); dialog.close(); }; var okButton = new sap.m.Button({ press : [ buttonOKPressed, this ], text : “OK”, tooltip : “OK” }); var cancelButton = new sap.m.Button({ press : [ this.buttonCancelPressed, this ], text : “Cancel”, tooltip : “Cancel” });//.addStyleClass(sap.ui.commons.ButtonStyle.Default); var onClosed = function() { if (oDeferred.state() === “pending”) { oDeferred.reject(); } }; /* * Modify controls based on acquisitionState */ var envProperties = acquisitionState.envProps; if (acquisitionState.info) { var info = JSON.parse(acquisitionState.info); datasetTxt.setValue(info.logsFolder); metadataTxt.setValue(info.metadataFile); envProperties.datasetName = info.datasetName; } datasetNameTxt.setValue(envProperties.datasetName); /* * Create the dialog */ var dialog = new sap.m.Dialog({ width : “720px”, height : “240px”, modal : true, resizable : false, closed : onClosed, content : [ dLayout ], buttons : [ okButton, cancelButton ] }); dialog.setTitle(“Chrome Logs Extension: ” + envProperties.datasetName); this.showDialog = function() { dialog.open(); }; }; return ChromeLogsExtensionDialogController; });
Rest of the code remains unchanged , compile and build and execute in the Lumira 2.0 Discovery and you should be seeing new the UI as below.
Input the required details and acquire the dataset.
http://bit.ly/2i1JQ94 #SAP #SAPCloud #AI
