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 🙂

To report this post you need to login first.

10 Comments

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

  1. Gareth Ryan

    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.

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

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

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

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

    (0) 

Leave a Reply