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.
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, 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 đ
Hi Cristian Babei,
Did you get to use a library from a launchpad application?
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:
and my gruntfile:
With that I was able to successfully built a library.
Thanks, I will check it and get back to you.
The build issue is fixed now and you should be able to build your library without any modifications.
Hi Jakob, not sure if you've seen Amiram's comment, the build issue is fixed and it should work now đ
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
Hi Mike, we're checking it.
Hi Mike,
This should be fixed now. Can you please confirm?
Thanks,
Michal.
It's all good now, thank you Michal. I just created a new Fiori Library and it built straight away without modification.
This is big news Michal, thanks for sharing!
Great news, Thanks Michal for sharing this, added in my #Trello board for trying out:)
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).
Hi Bastian,
The special characters you are referring to are in the reuse library name?
Thanks,
Amiram
Hi Amiram,
they are in the i18n.properties file.
Thanks, Bas.
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:
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?
Hi,
Does it work if you add the dependency from the abap repo (instead of workspace) prior to deploy of your application?
Thanks,
Amiram
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 Vural,
"Deploy to SAPUI5 ABAP Repository" doesn't work for you when you right click your library? What error do you get?
Thanks,
Amiram
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
Before deploying your application could you try running the Project > Add Reference to Library command and choose the library from ABAP repository?
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 Peter,
have you found a solution?
I'm having the same issue here..
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
I have the same issue since yesterday night...
Looking forward to here solve the issue đ
Cheers,
Aleks
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
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
Hello,
it works again.. ! Didn't do anything... love these problems that solve themselfes! đ
cheers,
Aleks
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:
Â
Â