Skip to Content

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.

 

To report this post you need to login first.

31 Comments

You must be Logged on to comment or reply to a post.

  1. 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…

     

    (0) 
    1. Michal Keidar
      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 ūüôā

      (1) 
  2. 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.

    (0) 
      1. 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

         

         

         

        (0) 
  3. 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?

     

    (0) 
    1. 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.

      (2) 
  4. 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).

    (0) 
        1. 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

          (0) 
          1. 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.

            (0) 
            1. 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?

              (0) 
              1. 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…¬†

                (0) 
                1. 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

                  (0) 
  5. 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?

    (0) 
  6. 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

    (0) 
      1. 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

         

        (0) 
          1. 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.

             

            (0) 
            1. 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

              (0) 

Leave a Reply