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.

2. Give a project name and click Finish.

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

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

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

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

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

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

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

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

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

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

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.

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

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

16. Click Finish on the next screen.

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

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.

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

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

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

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

23. The EAR now appears under External Deployable Archives.

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).

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

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

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).