Some context
A couple weeks ago I was trying to create a Custom Control Library in UI5 and I wanted to deploy my library to our on-Premise ABAP stack, but for some reason some parts are missing in the documentation at the moment. Luckily if found the excellent blogs of sergey.korolev describing the things he tried in order to deploy a UI5 custom control library to SAP HCP and to the ABAP Stack, I recommend that you read these two blogs as a prerequisite for this blog.
Troubles in SAP WebIDE
When deploying a UI5 Application from the SAP WebIDE to the ABAP stack a dist folder is generated with also the preloading is being taken care of by the SAP WebIDE, unfortunately this is not the case when you deploy a Custom Control Library. In this case no dist-folder is created and no preloading of your library has been done. So I exported my project and went in another direction for deploying my custom control library... in comes SublimeText and Grunt-tasks for the preloading and deployment of the library.
Custom Control Library in Local "IDE"
As a starting point I took the custom control from the walkthrough tutorial from the SAPUI5 developer guide, so the same one as in Sergey's blog. My folder structure in SublimeText is as follows
As you can see I have created a src and a dist folder to have the same process as deployment via SAP WebIDE. In the src folder I have added my code and when i use my default grunt-task I will clean the dist-folder, preload my library (more on this later in the blog), copy all necessary files and folders to the dist-folder and last but not least deploy directly to our ABAP Repository using grunt-nwabap-ui5uploader. the last part you can also do manually via the ABAP Report /UI5/UI5_REPOSITORY_LOAD or by using Eclipse (yikes!).
As we are using grunt we need to have a package.json in which we add the "devDependencies" for preloading our library (do not forget to install npm before you start).
Now you can use your terminal to navigate to your project folder and just type npm install and all your devDependencies will be created (a folder node_modules will appear).
Once my devDependencies were added I started with the actual development of my custom control library. In my first try i created the following files (steps can also be found on gitHub:
- Created my Custom Control and added the link to the library (see 2), just as Sergey did
Besides the ./library in define and the namespace the code is exactly the same as in the walkthrough tutorial. - Next up I create the library.js file, like on SAP's GitHubpage
When we need to add controls I just can add them in the initLibrary-function of the Core of UI5. - Important to not forget to set your type to library in your manifest.json!
So at this point I had the following folder structure for my control library, you can ignore the i18n and themes folder for the purpose of this blog.
On the GitHub page of UI5 there were some additional steps described, but I wanted to see what it would do if i deployed it like this.
UI5 Application
My application is just a master-detail template which accesses the RTSAMPLESFLIGHT2 OData-service. I have just added the dependency to the custom control library namespace in the manifest.json.
And then I just use add my control on my view, as described in the walkthrough and you would do if you use a custom control in your application itself.
First test without preloading
When I deployed my src-folder directly to the ABAP-stack without preloading the application I always got an could not open app-error the first time I opened the application on the FLP, when I analysed the network-trace I noticed that the the framework searched for a library-preload.json file and did not perform a fallback to the library.js file. Strange thing was that when I opened the app again that it just opened and worked as you would expect.
So this was not yet the way to go, but we were sure that we were heading in the right direction.
Use grunt to preload the library
Because I investigated the network trace in the previous step I knew that UI5 was searching for the library-preload.json file, so in comes Grunt. You need to add a Gruntfile.js for this, in the screenshot you can find my basic grunt process.
Library preload grunt task
I had a look in the documentation of grunt-openui5 project on GitHub. So I added the openui5_preload task as below, but notice that I added the compatVersion-option. If you don't add this the preloading-task will generate a library-preload.js file, which is relevant for UI5 starting from version 1.40, as the UI5 version of our ABAP Stack is 1.38.x we had to set the compatVersion to 1.38 in order to get the library-preload.json-file.
I registered two tasks:
- A build-taks: which will preload the library and copies the files to the dist-folder.
- The default-task: Which first cleans the dist-folder (deletes all files and folders) and then executes the build-task and last but not least deploys it the the abap-stack (detail)
When we run the default-task or project is deployed with our library-preload.json file, but when opening the application from our FLP we still received the could not open app-error. Reason why is that the UI5-library looks for the library-preload.json in the ushell-resources (/sap/bc/ui5_ui5/ui2/ushell/resources/...) which is not the path that I expected...
After investigating the documentation in GitHub I noticed that you also need to add a .library-file.
.library file
I created the .library-file like it was described in the gitHub documentation.
Once I created this and deployed the new version of my custom control library, my dist-folder looked like this:
This resulted in the following BSP application on the back-end:
The UI58102... file is the library-preload.json file, notice that we also have a .library-file in our BSP-application and all the files that we created in all the previous steps.
Final test
When we now test the application it works from the first try, as you can see below.
If we now investigate the network-trace we notice that the library-preload.json is loaded from a completely different location as before (/sap/bc/ui5_ui5/sap/mycustlib), which is our deployed BSP-application.
So at this point we have a working control library deployed to our ABAP Repository and are able to use it in our applications. It would be nice that this process would work from the SAP WebIDE, but using Grunt we have a simple solution for this problem.
- SAP Managed Tags:
8 Comments
