Skip to Content
Author's profile photo saurabh vakil

How to Deploy HTML5 applications to 7.3 portal

From the very beginning since I started working with HTML5, I was always looking for a way to integrate HTML5 pages in the portal and test these out on actual mobile devices like smartphones and tablets. This blog explains in an easy set of steps how we can build a portal application project in NWDS and include our HTML5 page(s) within this project and deploy it to the portal.

Since as of 7.30 SP08 there is no explicit iView template provided by SAP for creating iViews directly out of HTML5 applications, we are using the portal application project approach.

The portal and NWDS version I am using for this is NW 7.30 SP08. It is advisable to try this out on NW 7.30 SP07 minimum, since in SP07 Smartphone Framework Page is provided out-of-the-box and SP08 onwards Tablet Framework Page is provided out-of-the-box by SAP.

Follow the below steps to deploy your HTML5 page(s) to your portal.

1. In NWDS, create a project of type Portal Application.

/wp-content/uploads/2013/05/image_213766.png

2. Give a project name and click Finish.

/wp-content/uploads/2013/05/image_213766.png

3. Expand the project node and in the dist folder create a folder called html.

/wp-content/uploads/2013/05/image_213766.png

/wp-content/uploads/2013/05/image_213766.png

/wp-content/uploads/2013/05/image_213766.png

/wp-content/uploads/2013/05/image_213766.png

   We will create our HTML5 page(s) within this html folder.

4. Right click on the html folder and create the HTML page(s).

/wp-content/uploads/2013/05/image_213766.png

/wp-content/uploads/2013/05/image_213766.png

/wp-content/uploads/2013/05/image_213766.png

/wp-content/uploads/2013/05/image_213766.png

5. Code the HTML5 page according to your requirements in the HTML editor.

/wp-content/uploads/2013/05/image_213766.png

6. Now we need to create a component within our portal application project. For this right click on the project and select New -> Other.

/wp-content/uploads/2013/05/image_213766.png

7. Then select Portal Application -> Create a new Portal Application Object.

/wp-content/uploads/2013/05/image_213766.png

8. Click Next on the following screen, the intended project will be selected by default.

/wp-content/uploads/2013/05/image_213766.png

9. In the next screen expand Portal Component and select AbstractPortalComponent and click Next.

/wp-content/uploads/2013/05/image_213766.png

10. Enter values for Name and Package Name for the Portal Component. Then click Finish.

/wp-content/uploads/2013/05/image_213766.png

11. Now in the project structure you will find the AbstractPortalComponent object is created within the src.core folder.

/wp-content/uploads/2013/05/image_213766.png

12. In this component’s doContent method we will write the code to call our HTML page. Write the below code in the doContent method. We are just

     declaring a variable of IResource type and including our HTML page within the response using the include method.

    

     Assume that TestHtml is the name of our HTML5 page.

        IResource myHtml = request.getResource(IResource.STATIC_PAGE, “html/TestHtml.html”);

                 if(myHtml.isAvailable()) {

                response.include(request, myHtml);

                                   return; 

        }

                 String url = myHtml.getResourceInformation().getURL(request);

         response.write(“Resource is not available: <a href='”+ url + “‘>” + url + “</a><br>”);

13. Now we have to deploy this component to the portal. For this first we will export this project as an EAR file. For this right click on the project and select the

      option Export from the context menu.

/wp-content/uploads/2013/05/image_213766.png

14. Select the option SAP NetWeaver Portal -> EAR File and click Next.

/wp-content/uploads/2013/05/image_213766.png

15. Select Next on the following screen, the project will be selected by default.

/wp-content/uploads/2013/05/image_213766.png

16. Click Finish on the next screen.

/wp-content/uploads/2013/05/image_213766.png

17. Now you will be able to see the EAR file in the project structure.

/wp-content/uploads/2013/05/image_213766.png

18. Now we will deploy this EAR file to our portal. For this first make sure that the portal system has been added and set as the default system

      under Window -> Preferences -> SAP AS Java.

/wp-content/uploads/2013/05/image_213766.png

19. Now navigate to the Deploy view by clicking Window -> Show View -> Other.

/wp-content/uploads/2013/05/image_213766.png

20. Now expand the node Deploy View and select Deploy View.

/wp-content/uploads/2013/05/image_213766.png

21. In the deploy view, right click on the option External Deployable Archives and select Add.

/wp-content/uploads/2013/05/image_213766.png

22. From your file system, navigate to the path where the project lies and select the EAR file that we created earlier.

/wp-content/uploads/2013/05/image_213766.png

23. The EAR now appears under External Deployable Archives.

/wp-content/uploads/2013/05/image_213766.png

24. With the EAR file selected, select the Deploy button (or right click on the EAR file and select the option Deploy from the menu).

/wp-content/uploads/2013/05/image_213766.png

25. Now you will be able to view the deployment progress in the lower right corner.

/wp-content/uploads/2013/05/image_213766.png

26. You will get a confirmation message upon successful deployment.

/wp-content/uploads/2013/05/image_213766.png

27. Now login to your portal and navigate to Content Administration -> Portal Content Management and expand the node Portal Applications.

    

28. Scroll down until you have located your Portal Application project. Expand the node and you will find your AbstractPortalComponent.

29. Right click on it and select Copy from the context menu.

30. Now navigate to your desired folder under Portal Content and right click on it. Select Paste as PCD Object from the context menu.

31. Give a name (this will be the iView name) and ID (optional) and click Next and Finish.

Thus we have created an iView for the HTML5 page. This iView can be used according to your requirement in your desired mobile Roles(s).

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Steve Oldner
      Steve Oldner

      Something new to try!  I'll have to wait since we are still 7.1.  Thanks for the tutorial!!

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Thanks for your commtnt Steve!!!

      Author's profile photo Former Member
      Former Member

      Very detailed and helpful blog. Thanks for the effort saurabh

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Thanks Akanksha!!

      Author's profile photo Tushar Shinde
      Tushar Shinde

      Sirji,

      You rock as always....

      Another excellent masterwork from master of all..

      Keep posting.

      Thanks once again..

      Best Regards

      Tushar Shinde

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Hi Tushar,

      Good to hear from you!!!

      And thanks for your comments.

      Regards,

      Saurabh

      Author's profile photo Former Member
      Former Member

      Brilliant post.

      Appreciate the efforts of writing such a long post. 🙂

      Author's profile photo Andy Silvey
      Andy Silvey

      Hi Saurabh,

      excellent blog, thank you.

      Andy.

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Thanks Bala and Andy!!

      @Bala: Since as of SP8 there is no iView template for SAPUI5 applications, we have to follow this process to incorporate HTML5 pages in the portal.

      Regards,

      Saurabh

      Author's profile photo Former Member
      Former Member

      Good Blog saurabh.. Keep writing.

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Thanks Rakesh!!!

      Author's profile photo Former Member
      Former Member

      Nice blog Saurabh. Helped me start off with my first UI5 application and deployment of the same.

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Thanks for your kind words Archana!!!

      Author's profile photo Former Member
      Former Member

      Hello, I used your blog for create a simple hello word portal application.

      Your documentation is very usefull

      Thanks

      Antonietta

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Glad you found it useful Antonietta!!!

      Author's profile photo Former Member
      Former Member

      Thank you saurabh

      For posting such a useful document, Surely I'll try this & come back to you.

      Cheers 😉

      Pradyp

      Author's profile photo saurabh vakil
      saurabh vakil
      Blog Post Author

      Thanks for your kind words Pradyp 🙂