Skip to Content

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.

 

36 Comments
You must be Logged on to comment or reply to a post.
  • 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…

     

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

  • 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?

     

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

  • 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).

        • 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

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

          • 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?

          • 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…¬†

          • 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

  • 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?

  • 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

      • 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

         

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

             

          • 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

          • 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

  • 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?

  • 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 ()

  • 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