Skip to Content

This blog post is continuation of a 4-part series on How to use SAP HCP, mobile service for SAP Fiori.

Part 2: Create a sample Fiori App in SAP Web IDE


In this second part, we’ll create a sample Fiori app that we’ll build upon and add other functionalities like push, offline, etc.  You may use an existing working Fiori app, however, please ensure you complete tasks #12 and #13.

In this post, we’ll create a sample Fiori app in SAP Web IDE:

  1. Add a destination for OData service (this backend will populate data for the sample app)
  2. Create a sample Fiori Project from Template in SAP Web IDE
  3. Prepare Fiori app for mobile packaging
  4. Deploy app to HCP and to the SAP Fiori Launchpad from SAP Web IDE

Step-by-step guide:


1. In order to have some data in our app, let’s create an HCP Destination for OData service.  Go to Destinations tab and click New Destinations tab

/wp-content/uploads/2016/06/webide_destination_965236.png

2. Add the following destination information

/wp-content/uploads/2016/06/webide_destination2_965249.png

3. Now we’re ready to create a new project in SAP Web IDE.  Go to HCP Services and locate SAP Web IDE service

/wp-content/uploads/2016/06/webide_service_965250.png

4. At the Overview tab, you’ll find SAP Web IDE URL, click to open (perhaps bookmark it for quicker access)

/wp-content/uploads/2016/06/webide_url_965251.png

5. Click New Project from Template to start creating our Fiori application

/wp-content/uploads/2016/06/webide_create_app_965252.png

6. Select Project Template

  1. Select SAP Fiori Master-Detail Application
  2. Click Next

/wp-content/uploads/2016/06/webide_app1_965722.png

7. Basic Information

  1. Provide Project Name
  2. Click Next

/wp-content/uploads/2016/06/webide_app2_965792.png

8. Data Connection – Provide Service Information

  1. Destination – Northwind
  2. URL – /V2/northwind/northwind.svc (press > arrow)
  3. Click Next

/wp-content/uploads/2016/06/webide_app3_965956.png

9. Template Customization – Fill out all required information noted with asterisk (*); rest of the fields are optional

Application Settings

  • Type* – App for SAP Fiori Launchpad
  • Title* – Product Listing
  • Namesapce* – com.sap.fiori.Insert_AppName (this is referred to as app ID and will be used in Fiori Mobile Advance Configuration File (ACF))
  • Description – optional

/wp-content/uploads/2016/06/webide_app4_969974.png

Data Binding – Object

  • Object Collection* – Products
  • Object Collection ID* – ProductID
  • Object Title* – ProductName
  • Object Numeric Attribute – UnitPrice (optional)
  • Object Unit of Measure – none

/wp-content/uploads/2016/06/webide_app4a_967746.png

Data Binding – Line Item

  • Line Item Collection – Order_Details
  • Line Item Collection ID – OrderID
  • Line Item Title – Quantity
  • Line Item Numeric Attribute – none
  • Line Item Unit of Measure – none

/wp-content/uploads/2016/06/webide_app4b_967747.png

10. Run the app

  1. Open App Project folder
  2. Expand webapp folder and select components.js
  3. Click Run button from navigation menu

/wp-content/uploads/2016/06/webide_app5_969975.png

11. Your application preview mode will be opened in a new browser tab

/wp-content/uploads/2016/06/webide_app6_965969.png

12. Over next several steps, you will ready the app for mobile deployment…

13. Deploy app to HCP

  1. Right-click project folder
  2. Select Deploy
  3. Select Deploy to SAP HANA Cloud Platform

/wp-content/uploads/2016/06/webide_deploy1_965979.png

14. Login to SAP HANA Cloud Platform

/wp-content/uploads/2016/06/webide_deploy2_965981.png

15. Update Application Details (if necessary); click Deploy

/wp-content/uploads/2016/06/webide_deploy3_965982.png

16. Upon successful deployment; Click Register to SAP Fiori Launchpad

NOTE: Currently the cloud packager needs the app to be registered to the launchpad in order to do the “packaging”.  We will look to see if that is a requirement we can eliminate in future.

/wp-content/uploads/2016/06/webide_reg1_965983.png

NOTE:  If you update the existing app (e.g. version 1.0.1), you only need to deploy app to HCP.  Hence, you do not need to register the app to SAP Fiori Launchpad again.

17. General Information – fill out required information and click Next

/wp-content/uploads/2016/06/webide_reg2_965984.png

18. Tile Configuration – fill out required information and click Next

/wp-content/uploads/2016/06/webide_reg3_965985.png

19. Assignment – fill out required information and click Next

/wp-content/uploads/2016/06/webide_reg4_965986.png

20. Confirmation

/wp-content/uploads/2016/06/webide_reg5_965987.png

21. Successfully Registered

  1. Optionally, Open SAP Fiori Launchpad (to preview your app); remember app may not run properly due to destination changes made earlier

/wp-content/uploads/2016/06/webide_reg6_966008.png

This concludes part 2 of this blog… On to part 3, configure Fiori Mobile and test app on your mobile device.

To report this post you need to login first.

10 Comments

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

  1. Ramesh Prasad

    Hi Dhimant,

    I am using trail account and can we deploy apps to HCP ?  As i am getting error In step14: you don’t have permission to access this account.(I am able to logon on browser using same id and password)

    Capture.PNG

    (0) 
    1. Dhimant Patel Post author

      Yes, you should be able to deploy app to HCP.  Is this your trial account (I assume)? for sap ID, can you use your trial id (S#)?  Thanks.

      (0) 
  2. Alberto Sabate

    Hello,

    I am following the guide and in step 2. I am using my URL for OData which I have been created using XS Project in HANA Studio for my trial account. In step 8 I am able to select created Destination. Could you please advice what should be a service URL? I was trying to paste the same as in the Destination setting and many others (Northwind does not work with V2, V3 or V4).

    In Destination the URL is:  https://myhanadbs*********trial.hanatrial.ondemand.com

    the link to display OData is with format:
    https://myhanadbs*********trial.hanatrial.ondemand.com/my_package1/test1/Hello/ODATA_CV.xsodata/$metadata

    Please let me know if I can help with providing more information.

    Regards,
    Emilia

    (0) 

Leave a Reply