Developing SAP UI5 applications in SAP NetWeaver Developer Studio – Part 2/2
Introduction
In part one of this blog, we installed the SAP UI5 toolkit into SAP NetWeaver Developer Studio, created a first sample application and tested it locally using the web app preview.
In this part, we will deploy and run the application on the SAP NetWeaver Java application server.
SAPUI5 as part of NetWeaver Java
Since EHP1 for SAP NetWeaver 7.3 SP05 (or short 7.31 SP05), the SAP UI5 runtime library are shipped as part of NetWeaver, so you can use it from within your own application. There is no need to include a reference to an external source.
For this guide, we assume that you already have SP05 installed on your system. If not, there are good reasons for upgrading…
Download the latest patch for the SAPUI5 software component from the Service Marketplace and deploy it to your system.
The full name of the SC is “SAPUI5 CLIENT RT AS JAVA 7.31”:
Note: NW 7.31 SP05 contains SAP UI5 Version 1.6. The next SP will include UI5 Version 1.8.
Import the UI5 SCA in NWDS
Once you have deployed the SC to your system, you also need to import it into NWDS.
Switch to the “Development Infrastructure” perspective, right-click the development configuration and select “Import SC”.
Select the .sca file that you have downloaded from SMP.
After the import process is complete, you should see the SAP UI5 SC appearing in your development configuration:
Creating references
In order to use the SAP UI5 runtime library from our application, we need to create the respective references on both the software component (SC) level and development component (DC) level.
Open the component properties for your software component, switch to the dependencies tab and add a dependency to “UISAPUI5_JAVA”.
Next, open the component properties of the Enterprise Application DC which contains the Web Module DC with your UI5 application.
Switch to the Dependencies tab and add a dependency to the DC “ui/five” within the SC UISAPUI5_JAVA.
Adapting the sapui5 source location
The last thing left to do is to adapt the source path to the UI5 libraries in the index.html file.
In case of NetWeaver Java, the UI5 libraries are available under “/sapui5/resources”, so change your index.html file accordingly:
<script src="/sapui5/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection" >
</script>Running the application
Deploy your DCs to the server and open the app in your favorite browser.
Summary
In this two-part series, we have seen how you can easily develop UI5 applications and views in the NetWeaver Developer Studio and use them in other NetWeaver-based applications. Due to the open and flexible nature of SAP UI5, it can be easily integrated into existing development landscapes to create appealing user interfaces.
nice blog.
Hi Christian,
Thanks for the blog and showing the possibility of using UI5 from the software component repository.
I'm currently also contemplating whether I would like to use the SAP UI5 version that is coming from the component repository or to include it in (an external library) in my projects. I have the feeling that if I include it in my projects, I have more control over the versions that are used. I may be able to run a newer version of UI5 than the one shipped and will have more guarantees that my application still works after an SP upgrade.
What is your take on this. Go the packaged way, or include it in your project?
Cheers,
Jan
Hi Jan,
if you include the UI5 library into your application, you might end up with different UI5 versions spread across your applications, which you then have to maintain/patch separately.
With the pre-packaged library there is only one single SCA to patch, without having to touch your applications.
Of course you are bound to the UI5 version of your respective SP level.
So it really depends on whether you absolutely need the features of the latest UI5 release.
Regards,
Christian
Thanks Christian - what I really like about this blog is it shows me all those little dependencies (in part 1) that can sometimes go wrong... especially when people are cutting and pasting. I actually had a minor problem with the web preview and was able to fix it by re-checking the libraries on the build path. This is great for those of us who spend significantly more time than we would like resolving obscure bugs because a not-so-obvious dependency is missing or faulty.
A very clear description of what is necessary for operation separate from the building of the user interface itself.
Thanks again.
Hi Christian,
I try to deploy my first SAPUI5 application and I followed your blog, unfortunately I got error message "GRANT LIST DOES NOT ALLOW FOR REFERENCE" when I add DC Dependency(ui/five to my DC). Do you have any idea what can be wrong?
Many Thanks
Hi Christian, I got the error message "GRANT LIST DOES NOT ALLOW FOR REFERENCE" when I tried to add depencies in my DC (ui/five). Do you have any idea how I can fix it. (permission in uf/five is not an option).
Many thanks
Hi Karl,
are you using SP05? It could be that the UI5 SC is only open for external reference from SP06 onwards.
Regards,
Christian
Christian,
I use SP07.
Regards,
Karl
Hi Karl,
download the latest UISAPUI5 SC for 7.31 SP07 (Patch 4) from SMP - search for patches and enter "UISAPUI5*" as search term.
Then import into your NWDS.
This should have the permissions enabled.
Regards,
Christian
Dear Christian.
This has been a very informative and useful blog. I have 3 questions that I hope you may be able to answer:
1) Once the .ear file has been deployed to the SAPj2EE of my NW 7.3 SP09 Portal, how can I create an iView wrapper for the newly deployed .ear file
2) Have you managed to create a portal application (i.e. creates portal.xml) that uses UI5 for presentation layer
3) Is there a place for NWDS 7.3 (stuck at eclipse version 3.5) vs Eclipse Indigo / Juno with plugins.
Any advice greatly appreciated
Mike
A very clear and concise blog to demonstrate how to achieve a simple UI5 application in NWDS.
Given that this has been a core Portal development tool for a number of years, it is good to finally see an example of UI5 in action on a key SAP tool rather than developing in Eclipse,
All Portal code at my current client is packaged in individual SC + DC per development so the UI5 application project as described in Eclipse is a deviation from current strategy.
Hi,
Can you tell how to integrate UI5 with SAP BPM task
Regards,
Sunil Patil
Thanks Christian - it was very useful and I could complete the scenario mentioned in below blog post because of your blog.
http://scn.sap.com/community/pi-and-soa-middleware/blog/2013/09/26/use-sapui5-and-sap-dcs-to-build-development-objects-for-pi-731
Have posted a link back to yours .
Cheers
Vikas
Hello Christian,
Are open UI5 libraries available at NW serwer ?
Locally developed app with open Ui5 resources doesnt work with:
src="/sap/public/bc/ui5_ui5/resources/sap-ui-cachebuster/sap-ui-core.js"
I am right that UI5 and open UI5 are so similar that they can be used interchangeably, and you can switch between them without changes in the application?
At NW where UI5 is stored Its looks like no resources in sap/ui/commons
BR
Lucas
Hi Christian,
thanks for sharing. Do you have any experience with App Cache Buster on Netweaver Java?
BR
Christian
No, I haven't. But since this is a plain web.xml filter I don't see why it wouldn't work on AS java.
Well, that's what I thought 🙂 It doesn't appear to use my web.xml for whatever reason. I also found that the SAPUI5 Web Module inside MII hasn't activated the AppCacheBusterFilter. I'm totally stuck here :/
Hi Christian,
thanks for sharing. I am working in SAPUI5 application and now I need to deploy it on a server from where user can access my application globally, but I have no idea how to and where I can deploy/ publish my application. I used eclipse for the development of application.
Please guide me accordingly.
Thank you
Excellent post Christian,
But in the end when I try to deploy the option is disabled in my NWDS. Did you now that is
happening?
Thank you very much,
Regards,
Sorry, no idea. It's been also a long time 😉
You could try creating a support ticket on the NWDI component...