Skip to Content
Technical Articles
Author's profile photo Ferry Djaja

Add and Use SAPUI5 Elements in SAP Analytics Cloud Custom Widget

In this tutorial, I would like to share how you can add and use SAPUI5 elements in SAP Analytics Cloud. In this case, is add and use sap.m.Input – Password.

From my trials and errors experience, not all UI5 elements can be added and used in the custom widget. It depends on which version of UI5 libraries that are being loaded and used in SAP Analytics Cloud itself. For my case, is version 1.60.13 for SAC version 2020.8.9. See below screenshot.

I can use sap.m.Input in custom widget since it is available from version 1.10. Unlike sap.ui.integration.widgets.Card, I can’t use it since the minimum version is 1.62.

Let’s wait and see if we can use this integration card element once SAC libraries are upgraded to version 1.62 or higher.

Build Web Components

Let’s start by building the Web Components and its properties.

Create the inputpassword.json property file to define the properties, methods and events in Web Components. You may refer to my blog in References section below for more details. Don’t forget to update the URL link http://localhost to your localhost accordingly.

{
  "id": "com.fd.djaja.sap.sac.inputpassword",
  "version": "0.0.2",
  "name": "inputPassword",
  "description": "Input Password",
  "newInstancePrefix": "inputPassword",
  "icon": "data:image/png;base64,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3nvvPd1l3BOhGqa4fPmy+vrrr70+ZBcvXlyqV68u1atXl6pVq0rVqlWlUqVK4ufnx/r1kCNHjqisgL19+3Y5ffq07pK0iYyMlCpVqkjVqlVvBegqVarwBg4AAHCs/v37qwULFugu454yMjII1TBfYmKi+u6772TLli2yZcsW2bt3b54K2b6+vlKqVCmpXLmyxMTESExMjDz00ENStGhR1qlmR44cUZs2bZJNmzbJtm3bJCkpSXdJpvP395eqVatKTEyM1KhR41aAzp8/P+sPAADkKf369VPvv/++7jLuiVANSzg5ZIeFhUnVqlWlSpUqt0J0rVq1OAfaAVJSUlRsbKysWbNGVq5cKefOndNdklsqV64s9evXv/UGTrVq1cTf35/1BwAA8ry+ffuqDz74QHcZ95SZmUmohvXsGrKLFSsmMTExtwXoypUri2EYrD+Hy8zMVDt27JDly5fLsmXL5PLly7pLuquoqChp27atNG7cWBo1aiRFihRh/QEAAK/Up08f9eGHH+ou454I1bCFL7/8UrVq1UoyMjK01jF//nzp378/ay2Pu3Hjhho9erRMnjxZdyl/MnHiRHnllVd4IwcAAEBEevfurT766CPdZdxTZmamuHQXAe+2d+9e1b17d+2BWkRk0KBBsm3bNlu/yYTcCw4ONho1aqS7jDvKyMggUAMAAPxGKWf8ak6ohjZ79+5VzZs3t81W3LS0NOnSpYv88ssvzvjphVvS0tLUqFGjdJdxRzNmzJCEhATWHwAAgIgtThG9H8MwDEI1tNizZ4+tAnWWS5cuSadOneTGjRsEmzxq5MiREhcXp7uMO7pw4YIMHz5cdxkAAAC2QKcauIs9e/aoFi1a2C5QZ9m/f7/06tVLlFN+ipFt27dvV1OmTNFdxj299957snXrVtYeAADwek75dZxQDUvt2rVLNWvWzLaBOstnn30m//jHP3SXARPFx8erp59+2hbn79+LUkoGDRokSUlJzvhXBAAAwEOcsP1bhFANC+3Zs0c9/vjjcuXKFd2lZMuoUaPkww8/JNjkAampqapbt26OuVf1Tz/9JP3799ddBgAAgFZ271RnXV+WUA1L2H3L950opaR///6yefNme/80456UUqpfv36ybds23aXkyLJly+T9999n7QEAAK9l91CdhVANj3NioM6SdUXwffv2OeMnGn/y5ptvypIl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",
  "vendor": "Ferry Djaja",
  "eula": "",
  "license": "",
  "imports": [ "input-controls" ],
  "webcomponents": [
    {
      "kind": "main",
      "tag": "com-fd-djaja-sap-sac-inputpassword",
      "url": "http://localhost/SAC/sacinputpassword/inputpassword.js",
      "integrity": "",
      "ignoreIntegrity": true
    }
  ],
  "properties": {
    "metadata": {
      "type": "string",
      "description": "For internal use",
      "default": ""
    },
    "password": {
      "type": "string",
      "description": "password",
      "default": ""
    }
  },
  "methods": {
    "getPassword": {
      "returnType": "string",
      "description": "Get password",
      "parameters": [],
      "body": "return this.password;"
    },
    "setPassword": {
      "description": "Set password",
      "parameters": [
        {
          "name": "value",
          "type": "string",
          "description": "The new password"
        }
      ],
      "body": "this.password = value;"
    }
  },
  "events": {
  	"onStart": {
      "description": "onStart events trigger"
    }
  }
}

 

Create inputpassword.js to put the app logic. I will walk through it for each section.

  • The HTML template object is created to construct the input password UI element. If you see from line 14 to 31, it is actually an XML view of the sap.m.Input element with controller name myView.Template and livechange event onButtonPress.
  • On constructor() method, The super() function is called, then the shadow DOM root element is created. The copy of the template element is added as a child element to the shadow DOM root element. And finally, initialize the variable to store the password information.
  • On connectedCallback() method, it is populated the available widgets in SAC Analytics Application. It is not currently being used anywhere in this app, but I have put it here for future use.
  • On onCustomWidgetAfterUpdate() method, is the entry point of this app. It loads the function loadthis().
  • The following functions is to fire the custom event propertiesChanged, and implement Getters and Setters Property password.
  • The loadthis() function is the main logic of the app. It has the SAPUI5 controller myView.Template and XMLView that is rendered in _oView. onButtonPress() function will be triggered from the livechange event.
    The onStart() custom event will be triggered to expose the password information so it can be retrieved by standard SAC widget.

Usage

Create an SAC Analytics Application and insert the inputPassword custom widget.

On custom widget inputPassword_1- onStart() event, put the below code to get the password information and print it in InputField standard widget.

InputField_1.setValue(inputPassword_1.getPassword());

Short Demo Video

https://youtu.be/Wy_yRLIkBU0

That’s all that you need to do. Do let me know if you have questions.

References:

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Durairaj Athavan Raja
      Durairaj Athavan Raja

      Dear Ferry,

      Thank you very much for the blog. I have been waiting for this from you. This opens up lot of  opportunities to develop various custom widgets.

      Thanks.

      Raja

       

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Durairaj Athavan Raja

       

      Great! Happy to share what I have done. Looking forward for your custom widget creations!!

       

      Cheers,

      Ferry

      Author's profile photo Durairaj Athavan Raja
      Durairaj Athavan Raja

      Sure, will share them here. I am trying to get data from backend (SSO is taken care) using the json model

      durl = "https://hhh.ddd.com:8888/sap/bc/bsp/sap/ybl_data_se/flightdata" ;
      fmodel = new sap.ui.model.json.JSONModel(durl);
      sap.ui.getCore().setModel(fmodel, "listofflights"); not sure this will work if i am doing this from inside shadow DOM

       

      Although i have set the below http header at bsp page response (ybl_data_se/flightdata)

      CALL METHOD response->if_http_entity~set_header_field
      EXPORTING
      name = `Access-Control-Allow-Origin`
      value = `*`.

      within SAC when i tried to connect i always get "No 'Access-Control-Allow-Origin' header is present on the requested resource", but if i call the bsp outside in browser i can see the headers i have set.

      Do you know how i can handle this?

      Thanks.

      Raja

       

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      I think you need to set that in Trusted Origins. See this blog: https://blogs.sap.com/2018/04/20/sap-analytics-cloud-apis-getting-started-guide/

      Regards,

      Ferry

      Author's profile photo Durairaj Athavan Raja
      Durairaj Athavan Raja

      Thanks. I thought that was for the other way around scenario (embedding SAC in custom web apps)

      I have set that up but didn't help. Will explore further and if i succeed will update here.

      Regards

      Raja

      Author's profile photo Durairaj Athavan Raja
      Durairaj Athavan Raja

      the CORS setting at the back end system has to be updated (live data connection - CORS config) . Earlier i had only allowed sap/bw/ina and sap/opu/odata for sac. will have to add sap/bc/bsp/sap as well. Will test and confirm.

      Regards

      Raja

      Author's profile photo Durairaj Athavan Raja
      Durairaj Athavan Raja

      Confirm that after adjusting the CORS configuration to allow sap/bc/bsp/sap its working fine.

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Great!!!

      Author's profile photo Henry Banks
      Henry Banks

      I've been very much enjoying your series. Thank you! regards, H

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Thank you !!

      Regards,

      Ferry

      Author's profile photo Jyothirmayee A
      Jyothirmayee A

      This is helpful. Thank you for sharing Ferry!.

       

      Thanks,

      Jothi

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Thank you Jyothirmayee A !

      Author's profile photo Dania Almadani
      Dania Almadani

      Hi Ferry,

      I am trying to create a Date picker custom widget using https://sapui5.hana.ondemand.com/#/entity/sap.m.DatePicker

      However, I am getting an error that xmlns: URI sap.m is not absolute

      what can the reason be? I copied the View from here https://sapui5.hana.ondemand.com/#/entity/sap.m.DatePicker/sample/sap.m.sample.DatePicker/code

      thanks

      Dania

      Author's profile photo Dania Almadani
      Dania Almadani

      Well this problem is solved now, however, I have a new problem.

      I am not able to get the value of the date at all !!!

      The loadthis() function is the main logic of the app. It has the SAPUI5 controller myView.Template and XMLView that is rendered in _oViewonButtonPress() function will be triggered from the livechangeevent.

      I made the same as your code I have the loadthis() function and in sap.m.DatePicker

      there is the Event change https://sapui5.hana.ondemand.com/#/api/sap.m.DatePicker%23events/change

      so actually onButtonPressed function should work!!

      I tried to debug and find that it is not entering the function onButtonPressed at all.

      In the Photos you can see the code

       

       

       

      Thank you

       

      Dania

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Dania,

      Sorry for late reply. Could you provide the full source code so I can check ?

      Thanks,

      Ferry

      Author's profile photo Dania Almadani
      Dania Almadani

      Hey Ferry,

      please check if you can see the code in github

      https://github.wdf.sap.corp/i070041/SAC-Custom-Widgets

      Or: 

      https://github.com/Dania94/SAC-Custom-Widgets

      Thanks,

      Dania

      Author's profile photo Dania Almadani
      Dania Almadani

      Hey Ferry,

      I know you may be busy.

      Did you the chance to look at my code?

       

      Thanks,

       

      Dania

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Dania,

       

      I am looking at your code now. Sorry for late reply

      Regards,

      Ferry

      Author's profile photo Ferry Djaja
      Ferry Djaja
      Blog Post Author

      Hi Dania Almadani

      I checked your code. I think you have forgotten to add the change button event for  change="onButtonPressed"

      See this updated code:

      <m:Panel
      		    id ="DatePanel"
      		    headerText="Choose Date"
      		    width="auto">
      		    <m:Label text="" labelFor="dateInput"/>
      		    <m:DatePicker
      			    id="dateInput"
      			    placeholder="Enter Date ..."
      				change="onButtonPressed"
      			    class="sapUiSmallMarginBottom"/>
      		    
      	    </m:Panel>

       

      Regards,

      Ferry Djaja

      Author's profile photo Huimin Li
      Huimin Li

      Hi Ferry,

       

      thank you for sharing this, your tutorial is really helpful, appreciate your efforts so much ^^ !

       

      Huimin