Quantcast
Channel: SCN : All Content - SAP Fiori
Viewing all articles
Browse latest Browse all 1807

How to use SAP HCP, mobile service for SAP Fiori - part 2

$
0
0

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

webide_destination.png

 

2. Add the following destination information

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

webide_service.png

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

webide_url.png

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

webide_create_app.png

6. Select Project Template

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

webide_app1.png

7. Basic Information

  1. Provide Project Name
  2. Click Next

webide_app2.png

8. Data Connection - Provide Service Information

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

webide_app3.png

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

 

Application Settings

  • Type* - Standalone App
  • 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

webide_app4.png

Data Binding - Object

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

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

webide_app4b.png

10. Run the app

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

webide_app5.png

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

webide_app6.png

 

12. Ready app for mobile deployment - Initially, the app will not be able to consume data on a mobile device.  The reason being only destinations with "/sap" in URI are being proxied by Fiori Mobile.  Therefore, you will need to append "/sap" in front of "/destinations..." in project.json, neo-app.json, and manifest.json files for your application.  Of course, this change will mean that your app will not successfully cosume data on a browser.

 

Here is what your code will look like:

 

before: uri: "/destinations/northwind/V2/northwind/northwind.svc/",

after: uri: "/sap/destinations/northwind/V2/northwind/northwind.svc/",

 

The simplest way is to use search function (right navigation search button):

  • Click Replace and put "/destionations" in Find and "/sap/destinations" in Replace (you'll be able to see list of files as well)
  • Search in - use drop-down to select your project
  • Click Replace All

webide_app7.png

 

13. Deploy app to HCP

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

webide_deploy1.png

14. Login to SAP HANA Cloud Platform

webide_deploy2.png

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

webide_deploy3.png

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

webide_reg1.png

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

webide_reg2.png

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

webide_reg3.png

19. Assignment - fill out required information and click Next

webide_reg4.png

20. Confirmation

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

webide_reg6.png

 

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


Viewing all articles
Browse latest Browse all 1807

Trending Articles