Skip to Content
Previous

Create a CRUD Master-Detail App

By Vino Gandhi M

Create a CRUD Master-Detail app using the template provided by SAP Web IDE, and get it ready to be built as a hybrid app.

Details

You will learn

  • How to configure a destination
  • How to choose the SAP Web IDE template and create the app

Step 1: Log in to SAP Cloud Platform

Go to https://account.hanatrial.ondemand.com and log in to your SAP Cloud Platform cockpit.

Some alternative text
Please log in to access this content.
Step 2: Enable mobile service for development and operations

Choose Services on the left pane, scroll down and then choose Development & Operations, std.

Some alternative text

On the Service: Development & Operations, std - Overview page, click Enable.

Use this service to access the destination that you create, and to build your app as a mobile app using the cloud build service.

Please log in to access this content.
Step 3: Create new destination

In the left pane, select Connectivity > Destinations, then click New Destination to open a new Destination Configuration form.

Some alternative text

Provide the following configuration values for the new destination:

Field Name Value
Name MobileServiceSampleData
Type HTTP
Description Mobile Service Sample OData Service
URL https://hcpms-<your account number>trial.hanatrial.ondemand.com/SampleServices/ESPM.svc
Proxy Type Internet
Authentication BasicAuthentication
Some alternative text

Add the following additional properties by clicking the New Property button once for each property:

Field Name Value
TrustAll true
WebIDEEnabled true
WebIDESystem ms
WebIDEUsage odata_gen
Some alternative text

Click Save.

Select the value of the Web IDE Usage parameter in your destination from the list below and click Validate:
×
Step 4: Open SAP Web IDE Full-Stack

In the left pane, choose Services, scroll down and choose Web IDE Full-Stack.

Some alternative text

From the Service: Web IDE Full-Stack - Overview page, choose Go to Service to open Web IDE Full-Stack in a new browser tab.

Some alternative text

If you can’t select Go to Service, it means the Web IDE Full-Stack service isn’t enabled for your account. On the Service: Web IDE Full-Stack - Overview page, choose Enable to enable the service and then repeat the above step.

Please log in to access this content.
Step 5: Choose a new project template

Select File > New > Project from Template.
On the Template Selection page, choose All Categories from the Category list.
From the displayed templates, choose the CRUD Master-Detail Application template and select Next.

Some alternative text
Please log in to access this content.
Step 6: Enter basic project information

On the Basic Information page, provide the following information:

Field Name Value
Project Name OfflineCRUDDemo
Title Offline CRUD Demo App
Namespace com.sap.offlinecruddemo
Description Demo app to showcase offline capabilities

Select Next.

Some alternative text
Please log in to access this content.
Step 7: Configure data connection

On the Data Connection page, choose Service URL as the service source. If you only have one WebIDEEnabled destination in SAP Cloud Platform, it is automatically selected. If you don’t see the MobileServiceSampleData service selected (the destination you created in step 3), click the dropdown menu and select it.

Some alternative text

If the MobileServiceSampleData service doesn’t appear in the dropdown menu, return to your destination in the SAP Cloud Platform cockpit and double-check the entries from step 3. If you make changes, reload Web IDE and repeat the procedure from step 5 in this tutorial.

Please log in to access this content.
Step 8: Test the data connection

Enter / as the relative URL and select Test.

Some alternative text

You should see the data from the service.

Some alternative text

Select Next.

Please log in to access this content.
Step 9: Customize the template

In the Data Binding - Object section, enter the following values:

Field Name Value
Object Collection Suppliers
Object Collection ID SupplierID
Object Title SupplierName
Object Unit of Measure PhoneNumber
Some alternative text

In the Data Binding - Line Item section, enter the following values:

Field Name Value
Line Item Collection Products
Line Item Collection ID ProductID
Line Item Title Name
Line Item Numeric Attribute Price
Line Item Unit of Measure CurrencyCode
Some alternative text
Please log in to access this content.
Step 10: Generate the app

Select Finish to create the new CRUD app. After the app is generated, select the OfflineCRUDDemo project folder icon to see the project structure.

Some alternative text
Please log in to access this content.
Step 11: Run the app

Under the OfflineCRUDDemo project folder icon, choose the test.html file and select Run.

Some alternative text

On the Testing Overview page, choose test/flpSandbox.html to launch the app.

Some alternative text

Your app opens in a Web IDE preview pane.

Some alternative text
Please log in to access this content.

Updated 09/16/2018

Time to Complete

15 Min.

Beginner
Next
Back to top