How to use SAP HCP, mobile service for SAP Fiori

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:

Add a destination for OData service (this backend will populate data for the sample app)
Create a sample Fiori Project from Template in SAP Web IDE
Prepare Fiori app for mobile packaging
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

2. Add the following destination information

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

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

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

6. Select Project Template

Select SAP Fiori Master-Detail Application
Click Next

7. Basic Information

Provide Project Name
Click Next

8. Data Connection - Provide Service Information

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

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

Data Binding - Object

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

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

10. Run the app

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

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

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