Skip to Content

Create a CRUD Master-Detail App

test
0 %
Create a CRUD Master-Detail App
Details
// Explore More Tutorials

Create a CRUD Master-Detail App

12/02/2018

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.

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
Log on to answer question
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.

Log on to answer question
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.

Log on to answer question
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
Log on to answer question
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
Log on to answer question
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.

Log on to answer question
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.

Log on to answer question
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
Log on to answer question
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
Log on to answer question
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
Log on to answer question

Next Steps

Back to top