Skip to Content
Author's profile photo Michal Keidar

How SAP Web IDE Supports Development of SAP Fiori Reusable Libraries

A key element in application development is creating and sharing reusable components, to ensure consistency and quality, and to make the development easier and faster.

SAPUI5 provides the option to build your own control and other reusable components but SAP Web IDE was lacking the support in this important capability.

Not anymore!

With our latest release, you can create, build, deploy and reuse SAP Fiori/UI5 libraries/controls.

Here’s how:

 

Create a new SAP Fiori Library

The best way to create something new in SAP Web IDE is using our rich collection of templates.

We now added a template for creating an SAP Fiori Library.

Click on File > New > Project from Template.

In the Category dropdown select SAP Fiori Library.

Select the SAP Fiori Library template and click Next.

 

Provide a Title and make sure the Add default control checkbox remains checked. This will create a sample control in your new library.

Click Finish.

Review the generated content in your workspace. You can see the library was created with an src folder that contains the sample control and future code, and a test folder that contains an existing QUnit test and future automated tests.

 

Add an SAPUI5 Control

You can easily add a new SAPUI5 control to your library, or add one from an existing library.

Right-click the library and choose New > Control or New > Control from Existing Library.

The wizard will guide you through the needed steps and a new control will be added to your controls folder.

 

Add Reference to Library

You can easily add a reference to a library in your SAPUI5 app. The library can reside in your workspace, in your SAP Cloud Platform (Neo) account, or in your SAPUI5 ABAP repository.

Right-click your existing SAPUI5 app and choose Project > Add Reference to Library.

Select the repository containing the desired library, select the checkbox of the library and click Add.

Then your app is updated with a dependency to the library (in its manifest.json file), and this allows you to use any control included in it.

 

Use a Control from the Library

For the sake of the example, I have created a new Library from a template and it contains the sample control.

Then in my SAPUI5 app, in my XML view, I have added the control from the library:

 

Run the App

If you are referring to already deployed libraries there are no further steps.

However if you want to run the libraries that are located in your workspace, do the following:

Enter the Run Configurations of your app and create a new one.

In the URL Components tab, add the sap-ui-xx-lesssupport parameter and set its value to true.

In the Advanced Settings tab, under the Application Resources section, select the Use my workspace first checkbox.

Save and run your app.

 

This is how my app with the sample control looks like:

 

Pretty cool right?

We still have a way to go, but hopefully these capabilities will be beneficial for you 🙂

For more information, see the documentation.

 

Assigned tags

      40 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Cristian Babei
      Cristian Babei

      Thanks for the blog!

      I have a auestion ->

      Does Web Ide fully supports deployment to onPremise systems? I mean, can I create a library, deploy to backend, and after Import it in a UI5 app  (saw it can be done) and after deploy this UI5 app to my onPremise gateway and use it from launchpad? Does the reference of the library works fine?

      Had trouble with this time ago, dunno if now with Web Ide , it's easier...

       

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Hi, yes it should work. I suggest that you try it and let me know how it goes, and if all goes well (or after the issues are fixed) you can write a blog about it, sharing the steps 🙂

      Author's profile photo Alfonso Carlos Tello Mora
      Alfonso Carlos Tello Mora

      Hi Cristian Babei,

      Did you get to use a library from a launchpad application?

      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær

      Hi Michal,

       

      Great blog. I had a go at this yesterday and also today. It seems like there is still a few bugs to iron out 😉

       

      I get this error when I create a new library and just try to build it without modification

       

      ui5 build

      ==================== UNSUPPORTED NODE.JS VERSION ====================
      You are using an unsupported version of Node.js
      Detected version v6.13.0 but @ui5/cli requires >= 8.5

      => Please upgrade to a supported version of Node.js to use this tool
      =====================================================================

       

      To get mine working yesterday, i had to change the package.json file accordingly like this:

      {
      	"name": "CommonLibrary",
      	"version": "1.0.0",
      	"private": true,
      	"devDependencies": {
      		"@sap/di.code-validation.js": "1.1.6",
      		"@sap/di.code-validation.xml": "1.1.10",
      		"ajv": "6.5.2",
      		"grunt-cli": "latest",
      		"grunt": "1.0.1",
      		"grunt-run": "0.8.1",
      		"grunt-openui5": "^0.12.0"
      	},
      	"main": "Gruntfile.js",
      	"scripts": {
      		"clean": "rm -rf dist",
      		"build": "ui5 build",
      		"build-for-deploy": "npm run build && npm run flatten && npm run clean-after-flatten",
      		"flatten": "cp -r dist/resources/qldh/sharedlibrary/commonlibrary/* dist && cp dist/resources/* dist || true",
      		"clean-after-flatten": "rm -rf dist/resources dist/test-resources"
      	},
      	"license": "UNLICENSED",
      	"dependencies": {
      		"@openui5/sap.ui.core": "",
      		"@openui5/themelib_sap_belize": ""
      	}
      }
      

       

      and my gruntfile:

      var jsValidator = require("@sap/di.code-validation.js");
      var xmlValidator = require("@sap/di.code-validation.xml");
      
      module.exports = function (grunt) {
      	"use strict";
      
      	grunt.loadNpmTasks("grunt-run");
      	grunt.initConfig({
      		dir: {
      			src: 'src',
      			test: 'test',
      			dist: 'dist'
      		},
      
      		run: {
      			options: {
      				failOnError: true
      			},
      			build: {
      				exec: "npm run build-for-deploy"
      			},
      			clean: {
      				exec: "npm run clean"
      			}
      		},
      
      		openui5_preload: {
      			library: {
      				options: {
      					resources: '<%= dir.src %>',
      					dest: '<%= dir.dist %>/resources'
      				},
      				libraries: true
      			}
      		}
      	});
      	grunt.loadNpmTasks("grunt-openui5");
      	grunt.registerTask("default", ["run:clean", "lint", "openui5_preload"]);
      
      	grunt.registerTask("lint", function () {
      		var issues = [];
      		[xmlValidator, jsValidator].forEach(function (validator) {
      			issues = issues.concat(validator.validateFiles().issues);
      		});
      		if (issues.length) {
      			grunt.log.writeln("Linting issues: \n" + issues.map(JSON.stringify).join("\n"));
      		}
      		if (issues.filter(function (issue) {
      				return issue.severity === "error";
      			}).length) {
      			grunt.fail.fatal("Linting errors found");
      		}
      	});
      };

       

      With that I was able to successfully built a library.

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Thanks, I will check it and get back to you.

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      The build issue is fixed now and you should be able to build your library without any modifications.

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Hi Jakob, not sure if you've seen Amiram's comment, the build issue is fixed and it should work now 🙂

      Author's profile photo Mike Doyle
      Mike Doyle

      Hi Michal, I just built a new library, from scratch, using the 1.52 template.  In order to get it to build I still had to remove the version numbers from the package.json dependencies.  This was the error I got in the build log before I removed the version numbers:

      No matching version found for @openui5/themelib_sap_belize@1.52.19

       

       

       

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Hi Mike, we're checking it.

      Author's profile photo Michal Keidar
      Michal Keidar
      Blog Post Author

      Hi Mike,

      This should be fixed now. Can you please confirm?

      Thanks,
      Michal.

       

      Author's profile photo Mike Doyle
      Mike Doyle

      It's all good now, thank you Michal.  I just created a new Fiori Library and it built straight away without modification.

       

      Author's profile photo Mike Doyle
      Mike Doyle

      This is big news Michal, thanks for sharing!

       

      Author's profile photo Nabheet Madan
      Nabheet Madan

      Great news, Thanks Michal for sharing this, added in my #Trello board for trying out:)

      Author's profile photo Mike Doyle
      Mike Doyle

      Hi Michal, I've got it working now.  Could you please explain the significance of the parameter sap-ui-xx-lesssupport?  I presume that the same parameter is passed when the code is running remotely rather than locally?

       

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      The library is working with less files as opposed to css. Less files require compilation to css on runtime so the parameter sap-ui-xx-lesssupport triggers a client side compilation for them as part of the preview.

      It is only needed when you are running with the library from workspace. If you run it from deployed version then it is already compiled to css.

      Author's profile photo Bastian Wißler
      Bastian Wißler

      Hi Michal Keidar, thanks for sharing.

      I got my own library to deploy in the cloud and reuse it in my app but special chars are converted in the wrong charset (ü becomes Ã¼ and so on) and loading local Web IDE version does not work at all.

      Additionally, deployment to on-Premise does not even show a popup any more …

      Could you please look into it? Thanks!

      EDIT: After some Web IDE reloads the deployment to on-premise systems works again. But still "Use my workspace first" ticked is not working (HTTP error 404 Not Found).

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      Hi Bastian,

       

      The special characters you are referring to are in the reuse library name?

       

      Thanks,

      Amiram

      Author's profile photo Bastian Wißler
      Bastian Wißler

      Hi Amiram,

      they are in the i18n.properties file.

      Thanks, Bas.

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      But out template library contain messagebundle.properties file and not i18n.

      Maybe you could share reproduce instructions or an example for a problematic library?

      Thanks,

      Amiram

      Author's profile photo Bastian Wißler
      Bastian Wißler

      I think the error was that I included the .properties files in the library-preload.js - this is probably not wanted. As it gets copied to the dist folder by the normal process, this is not a problem any more.

      Thanks  anyways for your support.

       

      How is this "Use my workspace first" checkbox in the run configuration working? As soon as I ticked this, I could not load the library any more.

      Thanks, Bas.

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      The “Use my workspace first” checkbox make the preview run to take resources of the used libraries from the Web IDE workspace first.

      Could you share reproduce steps for what exactly doesn't work for you?

      Author's profile photo Bastian Wißler
      Bastian Wißler

      Seems that something was broken with the Web IDE registration of my custom lib (I just reused my coding and changed some paths here and there, but somehow the mapping of Web IDE workspace path to the exported application was not correct, even when I corrected it in .che/project.json).

      My workaround:

      • created a new library based on the template (and correct namespace!)
      • copied my coding into the created paths

      Now it is working!

      EDIT: One day later it is not working any more !!!

      I tried to delete the old project which contains a reference to the same library but I could not. This is the response of the web ide command (as there is no popup or status from the web ide itself):

      {"message":"Unable delete item \u0027/yrtrstartinfolib-1\u0027. "}

      Unfortunately this seems to be a bug not related to some configuration files as the library that was perfectly working yesterday does not work any more today... 

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      Hi Bastian,

       

      What exactly stopped working for you? Was it running the application with library from workspace? Did it start happening by any chance after deploy?

      Do you still unable to delete the other project?

       

      Thanks,

      Amiram

      Author's profile photo Alfonso Carlos Tello Mora
      Alfonso Carlos Tello Mora

      Hi.

      I created a library from webide and deployed it using SAP Abap Repository. From WebIDE I have added to my application the link to my workspace library. When deploying the app in SAP Abap Repository and running it from the launchpad I always get these errors:

       

      Can someone help me load my library from a launchpad application?

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      Hi,

       

      Does it work if you add the dependency from the abap repo (instead of workspace) prior to deploy of your application?

       

      Thanks,

      Amiram

      Author's profile photo Vural Cakir
      Vural Cakir

      Great Blog Michal ! Thank you very much.

      Does any body know how to deploy the library and a consuming app to the ABAP Backend in order to start the consuming app from Fiori Launchpad? I have tried it, but it doesn't work. Does any body have  a solution?

       

      Thanks,

       

      Vural

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      Hi Vural,

      "Deploy to SAPUI5 ABAP Repository" doesn't work for you when you right click your library? What error do you get?

       

      Thanks,

      Amiram

      Author's profile photo Vural Cakir
      Vural Cakir

      Hi Amiram,

      thanks for your reply. I did not express myself correctly. I can deploy the library to the SAPUI5 ABAP Repositoty. After I deployed the library to the SAPUI5 ABAP Repositoty I can not use it. In addition to the library I deoplyed a application to SAPUI5 ABAP Repository wich should consume the controls of the library. If I open now the deployed consuming application in Fiori Launchpad  I get:

      Error: failed to load '..../library.js' from /sap/bc/ui5_ui5/ui2/ushell/resources/....../library.js: 404 - NOT FOUND.

      It is strange that both the library and the consuming application works perfectly, as in the blog from Michael Keidar described, in SAP WEB IDE.

       

      Do you have a solution for my Problem. It would help me a lot and I would be really greatful.

       

      Thanks,

       

      Vural

       

      Author's profile photo Amiram Wingarten
      Amiram Wingarten

      Before deploying your application could you try running the Project > Add Reference to Library command and choose the library from ABAP repository?

      Author's profile photo Vural Cakir
      Vural Cakir

      Hi Amiram,

       

      Thank you very much for replying.

      Thank you for your advice:

      “Before deploying your application could you try running the Project > Add Reference to Library command and choose the library from ABAP repository?”

       

      I tried that. But unfortunately the list where I should be able to see the deployed library is empty.

      We think that this issue has to do with the version.json. Because the Add Reference to Library command triggers an event which checks for library.js in all of my deployed SAPUI5 applications.

      I checked the Network Tab from Chrome devtools and saw that the path to the library.js ist build liked this:

      ${project/artifactId}/library.js

      Maybe the path ${project/artifactId}/… ,which is generated automatically in Web IDE, is worng and thats why I can not see the library which is deployed to SAPUI5 ABAP Repositoty in the list. The path is defined in the version.json like this:

      “application”: “${project.artifactId}”.

      What do you think it. Thanks for your support.

       

      Author's profile photo Peter Vanneste
      Peter Vanneste

      Hi Amiram, Vural,

       

      we have the same issue.

      We can deploy our llibrary to the abap repo from webide.

      However, when we want to add a library in webide using add reference to lib, we cannot see our newly deployed lib. I see 404 issues in chrome debug, it's looking for version.json...

       

      So can you check what we could have been doing wrong?

       

      thanks

      Author's profile photo Jacob Brehm
      Jacob Brehm

      Hi Peter,

      have you found a solution?
      I'm having the same issue here..

       

      Thanks!

       

      Author's profile photo Martin Voros
      Martin Voros

      Hi,

      an update from my side. It was an incorrect LPD_CUST config. After fixing that it works fine. Hence so far I was able to deploy Fiori library to 3 different systems and it seems to be working fine.

      Martin

      Author's profile photo Aleksandar Mijailovic
      Aleksandar Mijailovic

      I have the same issue since yesterday night...

       

      Looking forward to here solve the issue 🙂

       

      Cheers,

      Aleks

      Author's profile photo Hofit Koren
      Hofit Koren

      Hi,

      We have provided a solution for the issue you've reported-

      Add reference to library which deployed to ABAP repository is not working.

      It will be available in factory in the next webide release - in the next two weeks.

      Sorry for the inconvenience

      Hofit

      Author's profile photo Kai Mildner
      Kai Mildner

      Hi,

       

      Realy nice post. For me it works for apps deployed on SCP with predeployed lib.

      But when i register the App to Fiori Launchpad it doesn’t work. It doesn’t find the library.js. In console it looks like the app is trying to find the app in the “https://sapui5.hana.ondemand.com/1.58.6/resources….”.

      How can i fix this to get it running as SCP app and registered to Fiori?

      Author's profile photo Ralph Härle
      Ralph Härle

      Great article, it’s now very easy to create and reference a library.

      I followed the instructions 1:1 with Version 1.52.

      When I run the app in WEBIDE I get some console Errors and double checked each step in the article. Any ideas if I missed something?

       

       

      Failed to load resource: the server responded with a status of 404 ()
      send @ sap-ui-core.js:133
      sap-ui-core.js:168 2019-01-14 13:39:43.569500 failed to load 'com/bosch/test/mylib/library-preload' (failed to load 'com/bosch/test/mylib/library-preload.js' from ../../resources/com/bosch/test/mylib/library-preload.js: 404 - error) - 
      X @ sap-ui-core.js:168
      sap-ui-core.js:133 Failed to load resource: the server responded with a status of 404 ()
      send @ sap-ui-core.js:133
      sap-ui-core.js:168 2019-01-14 13:39:43.967000 failed to load '../../resources/com/bosch/test/mylib/library-preload.json': error - 
      X @ sap-ui-core.js:168
      3sap-ui-core.js:133 Failed to load resource: the server responded with a status of 404 ()

      Author's profile photo ASHISH AHIRE
      ASHISH AHIRE

      Hello @Amiram Wingarte Michal ,

      first of all i would say very nice blog. I was able to deploy and load it in abap repository, can see in developer tool ( source e.g. - library-preload.js ) but strange part is when i was trying to load any file in xml view or controller of consumer app via sap.ui.define its trying to search library files in resources of consumer app.

      I know alternate way to consume it but why its not working via sap.ui. define ?

      Regards,

      Ashish

      Author's profile photo Aleksandar Mijailovic
      Aleksandar Mijailovic

      Hello,

       

      it works again.. ! Didn't do anything... love these problems that solve themselfes! 🙂

       

      cheers,

      Aleks

      Author's profile photo Koushik Laha
      Koushik Laha

      Hello Michal,

       

      I have followed what you mentioned line by line.

      But when I wanted to use a control from shared library to my sapui5 application running in WEBIDE it is not rendered instead giving parse error in console in the view.

      is it something to deal with the lib: namespace in view? when I run the application without the control ( from shared library) added in my view it is running perfectly and also loaded the shared library within the application which I have checked from source by inspect element.

      Here is my App view :

      <mvc:View controllerName=”ibm.sharedLibrary.demo.DemoSharedLibrary.controller.App” xmlns:mvc=”sap.ui.core.mvc” displayBlock=”true”
      xmlns=”sap.m” xmlns:lib=”ibm.library.com.sharedlibrary”>
      <Shell id=”shell”>
      <App id=”app”>
      <pages>
      <Page id=”page” title=”{i18n>title}”>
      <content>
      <Label text=”Name”></Label>
      <Input value=”Swami Vivekananda”></Input>
      <lib:Example xlmns:lib=”lib.controls” text=”Hello World”></lib:Example>
      </content>
      </Page>
      </pages>
      </App>
      </Shell>
      </mvc:View>

       

      here is my shared library namespace: ibm.library.com.sharedlibrary

       

      I got the below error: