Skip to Content
Author's profile photo Former Member

SAPUI5, EP 7.0 Deployment and iView Creation

Overview:

This blog is intended to people / customers who are implementing SAP Portal solutions and have not yet upgraded their systems to latest and greatest but wish to have their applications developed based on SAPUI5. I have been seeing few questions on forums people asking how to build SAPUI5 applications and deploy them to the SAP EP 7.0. Also, how do we create iViews based on these deployments as there are no templates available to create SAPUI5 iViews as in newer versions like Portal 7.3 and even versions like SAP EP7.01 SP30 and above.

Solution:

I am going to show just a basic example of how to create a Web application project in SAP IDE 7.0, add the project into an EAR application, deploy them to the server and create iViews in Portal.

1) Open your NWDS and create a Web Module Project. (File > New > Web Module Project)

Web Module Project.png

2) In the WebContent Folder Create a html file and name it as index.html

HTML File.png

3) Build your SAPUI5 code into the html file. I have all my code in here but MVC pattern is also supported just in case you need to have the view, controllers, models separately.

/wp-content/uploads/2014/02/index_395804.png


<!DOCTYPE html> 
<html><head> 
    <meta http-equiv='X-UA-Compatible' content='IE=edge' /> 
    <title>Hello World</title> 
 
    <script id='sap-ui-bootstrap'
        src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' 
        data-sap-ui-theme='sap_bluecrystal' 
        data-sap-ui-libs='sap.ui.commons'></script>  
 
<script> 
    var btn = new sap.ui.commons.Button({
        text:'Hello: Deply Me to EP 7.0',
        press: function() {
            alert("Successfully Deployed to EP 7.0!")
        }
    });
    btn.placeAt('content'); 
</script>
</head>
<body class='sapUiBody'>
    <div id='content'></div>
</body>
</html>

4) Create a New EAR Project.

EAR Project.png

EAR Project Name.png

5) Add the Modules to the EAR Project.

Add Modules.png

Add Modules 1.png

6) Generate the Archive Files.

Generate Archive.png

7) Deploy them to the SAP J2EE Engine.

Deploy 1.png

8) Run the application in a browser with the following URL https://<hostname>:<Port>/<WebModuleProjectName>/index.html

Run.png

9) Go to your Enterprise Portal and create a New iView from Template

Create New iView.png

10) Select the URL iView and give the URL of the application you deployed.

URL.png

11) Finish the iView creation and open the iView details. You can define a http system and then use them as a prefix instead of giving the full URL that way when you transport to different environments you do not end up doing manual activities to change the URL to point to the particular server.

HTTP SYSTEM.png

12) Preview the created iView.

Preview from Portal.png

That’s it !!! We have deployed SAPUI5 to SAP EP 7.0 Application Server. Enjoy 🙂

Assigned tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan

      Hi Nagarajan Kumarappan,

      This is very useful information. Even we faced this issue and were waiting for solution. Thanks for good info !

      Regards,

      Chandra

      Author's profile photo Former Member
      Former Member

      Thnx Nagarajan

      Very useful Info, Keep posting more on UI5, Await for your valuable docs..

      Cheers 😉

      Pradyp

      Author's profile photo Former Member
      Former Member

      Thank you Nagarajan,

      Very useful information .

      Regards,

      Vijay

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks All...Glad it was helpful...I just started to work on SAPUI5 and thought of sharing knowledge in the least possible way I could 🙂

      Author's profile photo Former Member
      Former Member

      Thanks for this useful information.

      Have you run into any problems with this method, where you are using complex SAPUI5 controls or JQuery manipulations?  I've seen issues in the past with JQuery for instance clashing with the standard Portal framework so would be interested to know just how stable this approach is?

      Cheers,

      Gareth.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Gareth Ryan

      I did not really test with JQuery options. I had a dynamic menu bar building application built in eclipse based on JSON data and factory functions which I imported into the SAP IDE and deployed to the server that works fine. Will try to see If I can get some JQuery stuff running on SAP Portal...DO you have any handy examples / projects which I can try to import into the server and check?

      Author's profile photo Abhilash Gampa
      Abhilash Gampa

      Hi Nagarajan,

      Very much useful document. As you are pointing to t'https://openui5.hana.ondemand.com/resources/sap-ui-core.js'  load the libraries it is very much not recommended for productive usages. This is good for simple practice. As the public libraries are tend to change frequently the applications will behave inconsistently. You can download all the packages and add them to web project. And also another major issue we need to consider is IE version compatibility.

      Thanks

      Abhilash

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      I agree with you Abhilash. This is just for a test purpose I was showing an example. For production we will have to use the static_server folder from the SAPUI5 package inside our applications.

      Author's profile photo Andre Van Staden
      Andre Van Staden

      Hi,

      Have you per chance deployed an application that was developed using the WEBIDE? I have such an application and was wondering f you can simply import the files into the Web Module Project and then follow the rest of the process described.

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Nagarajan,

      Nice information.

      Can we deploy SAPUI5 application ear file from eclipse to SAP AS JAVA? If so, Can you please tell me the procedure?