This blog is co-written by Rasheed Abdul Azeez (rasheed.abdul.azeez@sap.com).

In this blog, we will walk through whole end to end flow of steps:

• Create a prototype design in SAP BUILD
• Import the prototype design from SAP BUILD to SAP Web IDE as a project
• Integrate the project with SAP Cloud Platform backend destination to run as a web application
• Build a mobile application using Fiori Mobile Cloud Build Service

PREREQUISITES

Before proceeding to the step by step procedure, you need to have the following prerequisites met in your development environment.

1. Sign up for an account in SAP BUILD (https://www.build.me).
2. You need to have an account registered on the SAP Cloud Platform (https://account.hanatrial.ondemand.com) and following services enabled in the SAP Cloud Platform Cockpit.
3. Sign up for an account with demo SAP Gateway system (ES4). To sign up follow the instructions from https://www.sap.com/sea/developer/tutorials/gateway-demo-signup.html

EXPORT A SCHEMA FROM DEMO GATEWAY ES4 SYSTEM INTO A FILE

1. Open Google Chrome browser and type the following URL in the address bar:
   https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC
2. When prompted for user credentials dialog, enter user credentials you registered with the ES4 demo system.
   OData collections for the GWSAMPLE_BASIC service is displayed.
3. Append /$metadata to the URL https://sapes4.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/$metadata
   It displays the schema metadata for the service.
4. Right-click in the browser and select “Save as” context menu.
5. Save it as “ES4Metadata.xml” file and click “Save” button to save it in your local folder.

CREATE A NEW PROTOTYPE IN SAP BUILD

In this blog, “Master Design” template to is used to build a prototype.

1. Open SAP BUILD (https://www.build.me )
2. Click LOG IN link in upper right-hand corner and enter your registered email and password to logon.
3. Click on the Workspace tab and click NEW PROJECT button.
4. In Create new project page, select START FROM SCRATCH tile and click CREATE NEW PROJECT button.
5. Type “MDPrototype” as project name and type “Create a prototype based on Master-Detail pattern” for description.
6. Click CREATE PROJECT button.
7. Click START PROTOTYPING button in the MDPrototype project page.
8. In PROTOTYPE tab, select Master-Detail page style and click SELECT button.
9. Select Master Page 1 and click EDIT PAGE.
   It will open the Master Page 1 Canvas in Desktop Form factor by default.
10. Click DATA tab and click Import link to import the EDMX schema file.
    Select “ES4Metadata.xml” file saved earlier. The schema file is uploaded and shows all the oData collections in the schema in the DATA tab.
11. In the OUTLINE frame, click List control under Master Page 1.
    The PROPERTIES tab in right hand side will display List control properties.
12.  In the PROPERTIES tab, from the combo box for “List of” property, select “Product” from.
13. Enable the “Growing” property to ON.
14. Under ACTIONS section, select “Selection Change” for Interaction, “Navigate To” for Action and “Detail Page 1” for Page property.
15. Click on List Item control under “List”.
    The PROPERTIES tab in right hand side will display List Item properties.
16. Change the List Item properties as below.
    

    Introduction	Custom Value
    Title	ProductID
    Number	Price
    NumberUnit	CurrencyCode
    Type	Navigation

    When you change the properties, the Master Page canvas updates accordingly.

17. For List Item properties, expand the Attributes property and click Delete button to delete both Attributes.
18. Similarly, delete the First Status and Second Status properties. When all attributes and status properties are deleted, the Master Page 1 canvas will look like this.
19. Click on Master Page 1 and change the “Page Header” property as “Product List”.
20. Click on “Detail Page 1” now. It will load the Detail Page canvas.
21. Change “Detail Page 1” properties as below.
22. Click on Object Header control under Detail Page 1 and change the properties as below:
    

    Introduction	Custom Value
    Title	ProductID
    Icon	Custom Value
    Number	Price
    NumberUnit	CurrencyCode

23. Expand “Icon Tab Bar” in Detail Page 1 and click on “Icon Tab Ok” control. Change the properties as below. Icon Tab Ok is now renamed as Icon Tab Order Items
24. Expand Icon Tab Order Items and click on Table control and change the property as below.
25. Click the PUBLISH button on top right-hand corner.
26. Click PUBLISH button again to publish the prototype.

The prototype is published.

EXTEND BUILD PROTOTYPE TO SAP WEB IDE

This section demonstrates the steps to extend a BUILD prototype in SAP Web IDE using backend OData services to develop a real application.

Verify presence of BUILD destinations in SAP Cloud Platform Cockpit

To enable BUILD tool as a Web IDE plugin, following 2 destinations must be present in SAP Cloud Platform cockpit. When you enable BUILD service in SAP Cloud Platform cockpit, these destinations are created by default.

Create backend OData destination in SAP Cloud Platform Cockpit

To use data source from the imported BUILD prototype in SAP Web IDE, you need to setup a backend destination in SAP Cloud Platform Cockpit. In this blog, Gateway ES4 system is shown as backend destination.

1. Access HANA Cloud Platform cockpit using https://account.hanatrial.ondemand.com/cockpit
2. Select Connectivity > Destinations link in the left pane.
3. Click New Destination to open a new destination configuration screen.
4. Create new “ES4” destination with the values as listed below:
   

   Parameter	Value
   Name	es4
   Type	HTTP
   Description	ES4
   URL	https://sapes4.sapdevcenter.com:443/sap/opu/odata
   Proxy Type	Internet
   Authentication	Basic Authentication
   User	<your registered user>
   Password	<your registered password>
   TrustAll	true
   WebIDEEnabled	true
   WebIDESystem	ES4
   WebIDEUsage	odata_abap

5. Click Save.

Enable Plugins (Hybrid App Toolkit & BUILD plugin)

Before creating the project in SAP Web IDE, you need to enable the plugins “Hybrid App Toolkit” and “Import Prototype from BUILD”.

1. 1. Open SAP Web IDE:
   • Login to SAP HANA Cloud Platform Cockpit.
   • Select Services > SAP Web IDE.
   • Click Go to Service. SAP Web IDE opens.
2. In SAP Web IDE, select Tools > Preferences.
3. Select Plugins.
4. Enable Hybrid App Toolkit.
5. Select Build Destination from the Combo box for the repository.
6. Enable Import Prototype from BUILD.
7. Click Save.
8. Click Refresh to reload SAP Web IDE.

Create new project based on BUILD Prototype

Now you will create a new application using the SAP Web IDE Project template wizard.

1. In the SAP Web IDE select the Workspace root and open the context menu by right-clicking.
2. Choose New > Project from Template to open the new project creation wizard.
3. On the Template Selection page, select BUILD Project category and click on BUILD Project tile.
4. Click Next.
5. Enter the project name as ProjFromMDPrototype
   
6. Click Next.
7. On Select BUILD Prototype page, BUILD System is by default selected as source.
8. Enter the email address and password you registered and used in BUILD tool to create prototype in the user credentials dialog box.
   Available Prototype list is now populated with all the prototypes you created and published in BUILD for this account.
9. Select “MDPrototype” from the list.
10. Click Next.
11. Click Finish to create the new ProjFromMDPrototype application.
12. To run the newly generated application, select the ProjFromMDPrototype and click Run icon.
13. When prompted, in the Choose File to Run dialog box, select “testFLPServiceMockServer.html” and click OK.

Now ProjFromMDPrototype is running with Mock data in preview mode.

Change Project to Consume backend data source

In this section, you will prepare the project to consume and run with real backend data.

1. In the SAP Web IDE, expand ProjFromMDPrototype project in workspace.
2. In the webapp folder, open manifest.json file under in the code editor.
3. Replace the uri property value under dataSources section with ES4 backend GWSAMPLE_BASIC OData service as below:
   “uri”: “/sap/opu/odata/iwbep/GWSAMPLE_BASIC/”
   
   Note: In your BUILD prototype, you imported the ES4metadata.xml schema, which is from GWSAMPLE_BASIC service. Hence in the project you refer backend uri with the same service.
4. Remove the defaultUpdateMethod property from settings in dataSources. After these 2 changes, dataSources property in manifest.json will have code as below:

   "dataSources": {
   			"main": {
   				"uri": "/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",
   				"type": "OData",
   				"settings": {
   					"odataVersion": "2.0",
   					"localUri": "localService/metadata.xml"
   				}
   			}
   		},

5. Save and Close manifest.json file
6. In the webapp folder, open neo-app.json file in the code editor.
7. Add ES4 backend destination entry in neo-app.json file to fetch data for the project in runtime.

   {
         "path": "/sap/opu/odata",
         "target": {
           "type": "destination",
           "name": "es4"
         },
         "description": "ES4"
       }

8. Save and close neo-app.json file.
9. Select ProjFromMDPrototype project and click Run icon to run the application with backend data.
10. When prompted, in the Choose File to Run dialog box, select “testFLPService.html” and click OK. Now the application runs with actual backend data in preview mode.Master page is populated with Product List data, still detail page is not binding to selected row in master list.
    You need to adjust the code in master view controller to correct it.
11. Expand webapp > controller folder in ProjFromMDPrototype project and open master_page_1.controller.js in code editor.
12. Change a line of code in _onListSelectionChange function as below:

    //var oBindingContext = oEvent.getSource().getBindingContext();
    var oBindingContext = oEvent.getParameter("listItem").getBindingContext();

13. Save and close the file.
14. Re-run the project now. It will bind the detail page with selected row.

Now the project is ready for Mobile build.

BUILD MOBILE APP USING MOBILE SERVICE FOR SAP FIORI

This final section is going to build a hybrid mobile application from “ProjFromMDPrototype” project, install and run the application on a smartphone.

Deploy to SAP Cloud Platform and Register to Fiori Launchpad

1. In SAP Web IDE, select ProjFromMDPrototype project, right-click to open context menu and select Deploy > Deploy to SAP Cloud Platform.
   Deploy Application to SAP Cloud Platform dialog box opens.
2. Accept the defaults from the dialog box and click Deploy. The deployment starts and after successful deployment, the following dialog box is shown. Click Register to SAP Fiori Launchpad.
   
3. Accept the default Application name.
4. In the Description text box, type Master-Detail Prototype from BUILD and click Next.
   
5. In Tile configuration page, select Static for type, enter value for Title and Subtitle and click Next.
   
6. Accept the defaults for the Assignment page and click Next.
   
7. Click Finish in confirmation page. App is registered to Fiori Launchpad.
8. Click OK button to close the dialog.

Build with Mobile Service for SAP Fiori

1. In SAP Web IDE, right click on ProjFromMDPrototype project, and choose Fiori Mobile > Build > Build Packaged App.
   Configure Fiori Mobile Build Settings dialog box opens.
2. In App Info page, accept the defaults and click Next.
3. In Platforms and Signing Profiles page, select Android checkbox, select valid Signing profile from the dropdown list and click Next.
4. Click Next button by accepting defaults for other pages.
5. In Confirmation page, review the selection and click Build button. This will start the build process and the status is shown in Web IDE console as below.
6. Wait for the build to complete. Once build is successfully done, a QR code is shown to scan and install the application on your device/emulator.

Install and Run on Mobile Device

1. Using an Android phone, scan the QR code from Build result to download and install the app from SAP Mobile Place.
2. After you install the app, you can run the app on your device.
   (In the initial logon screen, you should enter your SAP Cloud Platform credential)
3. Tap “Disable Passcode” button in Passcode screen.
4. Application retrieves data for “Product List” master page and renders it.
5. Tap a row in Product List. Product Details page is loaded for the selected product.
6. Tap back button in Product Details page. Application navigate to Product List page.