Skip to Content

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

To report this post you need to login first.

17 Comments

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

  1. Former Member

    Sirji,

    You rock as always….

    Another excellent masterwork from master of all..

    Keep posting.

    Thanks once again..

    Best Regards

    Tushar Shinde

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

    (0) 

Leave a Reply