PREREQUISITES

jens_kristen · ‎08-05-2019

Prolog

A real application example could be that a company enables its sales team to always have the latest information about their business partners on their mobile devices. A sales representative can independently decide when and which business partners are offline on the mobile device. The seller can do this by sending the selected business partner to the mobile device from a Fiori web application on their desktop PC. The business partner data is updated in the background and automatically transferred to the mobile device. The advantage for the seller is that he always has the latest information at his disposal.

This is a set of hands-on lab exercises, and the following steps are described

Create a prototype in SAP BUILD with the Fiori Master Detail template

Import the SAP BUILD prototype to SAP Web IDE Full Stack

Change the destination to a real OData Service and run the project as a web application within the Fiori Launchpad

Build a mobile application using SAP Cloud Platform Mobile Cards

Push a Mobile Card from the Master Detail application and run the Mobile Cards application on your mobile device

PREREQUISITES

To meet the prerequisites for this hands on tutorial, please complete the following tutorials:

Sign up for an account in SAP BUILD

You need to register an account on the SAP Cloud Platform

Enable the SAP BUILD Service, WebIDE FullStack and the Mobile Services in the SAP Cloud Platform Trial account.

Download and install SAP Mobile Cards on your iPhone or on your Android.

Sign up for an account with demo SAP Gateway system (ES5). To sign up follow the instructions from https://www.sap.com/sea/developer/tutorials/gateway-demo-signup.html

1.Create a prototype in SAP BUILD with the Fiori Master Detail template

In this chapter, the “Master Detail ” template is used to build the prototype.

Open SAP BUILD

Click LOG IN link in upper right-hand corner and enter your registered email and password to logon.

Click on the Workspace tab and click the NEW PROJECT button. Click on the to CREATE NEW PROJECT button to create a new project.

Give a name e.g. “MyFirstProject” as project name and for description “Create a prototype based on Master-Detail pattern”.

Click the button START WITH TEMPLATE on the tile

Give a project name e.g. "MasterDetailPrototype"

Scroll down the templates and select the Master Detail Template

Two pages have now been created. Select Master Page 1 and click EDIT PAGE.
.

To work with a real data model you need to export the schema from the SAP Gateway ES5 demo gateway system into a file. To copy the model please follow this steps:
- Open the Google Chrome browser and type the following URL in the address bar: https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/
- When prompted for user credentials dialog, enter user credentials you registered with the ES5 demo system.
  The OData collections for the GWSAMPLE_BASIC service is now displayed.
- Add /$metadata to the URL https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/$metadata
  It shows the schema metadata for this service.
- Right-click in the browser and select “Save as” in the context menu.
- Save it and name file “ES5Metadata.xml”

Click on the DATA tab and click Import link to import the EDMX schema file. Select “ES5Metadata.xml” file saved in the previous step. Now the schema file is uploaded and shows all the OData collections in the schema in the DATA tab.

Click Object List in the OUTLINE frame.The PROPERTIES tab on the right hand side displays the List control properties. In the PROPERTIES pane, select from the combo box "Select an object" the “BusinessPartner” collection.

Enable the “Growing” property to ON.

Under ACTIONS section, select the properties for:

Field Name Value

Interaction Item Click

Action Navigate to

Transition Detail Page1

Click on Object List Item control under ObjectList in the Outline pane.
The PROPERTIES tab in right hand side will display List Item properties.

Change the Object List Item properties as below.

Field Name Value

Introduction BusinessPartnerID

Title CompanyName

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

For Object List Item properties, expand the Attributes property and delete both Item Attribute properties with Right-click ► Delete.

Similarly, delete the Item Status properties. Optional you can add an icon from the LIBRARY.

Click on Master Page 1 and change the “Page Header” property to “Business Partner List”.

Click on Detail Page 1, it will load the Detail Page canvas.

Change the propertiy ICON TAB BAR PAGE to BusinessPartner as below.

Click on Object Header control under Detail Page 1 and change the properties as below:

Field Name Value

Introduction BusinessPartnerID

Title CompanyName

Expand “Icon Tab Bar” in Detail Page 1 and click on “Icon Tab Ok” control. Change the Text property from “OK” in “Contacts”.

Double Click on the Table Headers and modify as below

Delete unused tabs from the Icon Tab Bar by Right-Click ► Delete in the Outline pane.The Detail Page should look like as below.

Expand Icon Tab Contacts and click on Table control or click on the Table in the Outline Pane.

Change the table property to “Contact via ToContacts” as below:

Expand Rows and click on Row

Expand Cells

Click on First Cell "Item Identifier" and set Title and Text properties as below

Click on the second Cell “Text” and change the Text property as below

Click on Cell "Item Number" and delete it

Click on Cell and change the Content property to "Text" and click Add

Change the property of the newly created "Text" Cell as below

Now the prototype is ready for endusers to explore. Click the SHARE button on top right-hand corner to publish the prototype

The prototype is now published and can be imported into the WebIDE. This will be described in the next section.

2. Import the SAP BUILD prototype to SAP Web IDE Full Stack

This chapter describes the steps to create a project based on the BUILD prototype.

Verify the presence of the BUILD destinations in the SAP Cloud Platform Cockpit. To enable the BUILD service as a Web IDE plugin, please following this tutorial:

Create new project based on BUILD Prototype. Now you will create a new application using the SAP Web IDE Project template wizard.
- In the SAP Web IDE select the Workspace root and open the context menu by right-clicking.
- Choose New > Project from Template to open the new project creation wizard.
- On the Template Selection page, select BUILD Project category and click on BUILD Project tile.
- Click Next.
- Enter the project name as MasterDetailfromBuild
- Click Next.
- On Select BUILD Prototype page, BUILD System is by default selected as source.
- 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.
- Select “MasterDetailPrototype” from the list.
- Click Next.
- Click Finish to create the new MasterDetailfromBuild application.
- To run the newly generated application, select the MasterDetailfromBuild and click Run icon.
- When prompted, in the Choose File to Run dialog box, select “testFLPServiceMockServer.html” and click OK.

Now MasterDetailfromBuild is running with Mock data in preview mode.

3.Change the destination to a real OData Service and run the project as a web application within the Fiori Launchpad

The WebIDE project must be prepared to use and execute real backend data. This chapter describes how to change the BUILD project in the SAP Web IDE to load data from the real OData services (ES5).

To verify the presence of the ES5 destination in the SAP Cloud Platform Cockpit, please follow this tutorial.

In the SAP Web IDE, expand MasterDetailfromBuild project in workspace.

In the webapp folder, open neo-app.json file in the code editor.

Add ES5 backend destination entry in neo-app.json file under the text-resources path to fetch data for the project in runtime.

,{

      "path": "/ES5",

      "target": {

        "type": "destination",

        "name": "ES5"

      },

      "description": "ES5"

    }

Save and close neo-app.json file.

In the webapp folder, open manifest.json file under in the code editor.

Replace the uri property value under dataSources section with the ES5 backend GWSAMPLE_BASIC OData URI as below:
```
"/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/"
```
Note: In your BUILD prototype, you imported the ES5metadata.xml schema, which is from GWSAMPLE_BASIC service. Hence in the project you refer backend uri with the same service.

After the change, the dataSources property in manifest.json will have the code as below:

	"dataSources": {

			"local": {

				"uri": "/ES5/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",

				"type": "OData",

				"settings": {

					"odataVersion": "2.0",

					"localUri": "localService/metadata.xml"

				}

			}

		},

Save and Close manifest.json file

Select MasterDetailFromBUILD project and click on the Run tab to change the run configurations to consume data from the ES5 backend service.

Click on Run Configurations in the Run menu

Delete testFLPServiceMockServer configuration

Run MasterDetailFromBuild project

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.

4. Build a Mobile Cards Application with SAP Cloud Platform Mobile Services

With SAP Mobile Cards, you can deploy business content to mobile devices without having to implement all the associated business processes in a mobile application. The goal is to provide the relevant business data only in a form that can be accessed through a mobile device. End users can still interact with business processes through the desktop browser and publish only appropriate content used by the SAP Mobile Cards application.

In this chapter you will learn how to design a card so that it can show the content the user collected in the Fiori Master Detail app. The default cards will update accordingly in the background so that the cards are always up to date.

Requirements

This section shows how to build SAP Mobile Cards based on the in the previous built Fiori MasterDetail application. In this scenario the SCP Mobile Service must be enabled.

Create a destination

To get the data for the mobile card a destination is required.

Go to SAP Cloud Platform Mobile Service ► Destinations.

Press the “New” button.

Set “Type” field to “Mobile Destination”

Provide a “Destination Name” ES5_Mobile

Press Next

Set the URL to the ES5 system "https://sapes5.sapdevcenter.com/"

For the Rewrite Mode, select “No Rewriting”.

Press Next

Select “Basic Authentication” for the ES5 Odata Service

Provide your User Name and Password

Press Finish

Now, the destination is ready to be used by the mobile card.

Create a mobile card

Go to SAP Cloud Platform Mobile Services► Mobile Applications ► SAP Mobile Cards

Click on the create new card button.

Set the properties as below

Save the card.

Setting up the sample data

In the previous chapter described how to identify the OData source to build the mobile card. We will take the URL to a BusinessPartnerSet object and run it in a browser.

To get the right format, add the following string to the end of the URL: ?$format=json

The URL should look like as below

https://sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/BusinessPartnerSet('0100000000')?$format=json

Run the modified URL in a browser and save the .json file on your local machine.

(Right click in the Browser►Save as)

Click on the Sample Data tab and click on Browse to import the .json file

Click Save

Creating the mobile card’s user interface

In the previous steps described how to setup the connection to the data source and adding sample data to the mobile card. The next step shows how to implement the User Interface.

Select the Editor tab

In the HTML Editor tab of the interface, use the following code.

<body>

    <div id="mySimpleTemplate" class="myTemplate"

data-type="text/x-handlebars-template">

        <div class="header" style="height: 30px">

            <div style="text-align: left;">

                <span style="font-weight: bold; font-size: 24px; float: left; color: #ffffff; display: inline; padding-top: 8px">

                    {{CompanyName}}

                </span>

            </div>

            <div style="text-align: right;">

                <span style="float: right; display: inline; font-size: 11px; color:#CEDDEC; padding-top: 5px">

                    {{BusinessPartnerID}}

                </span>

            </div>



        </div>

        <div class="card-content">



            <div class="listitem">

                <div class="listitem-label">

                    <span>

                        PostalCode

                    </span>

                </div>

                <br>

                <div class="listitem-value">

                    <span>

                        {{PostalCode}}

                    </span>

                </div>

            </div>

            <div class="listitem">

                <div class="listitem-label">

                    <span>

                        City

                    </span>

                </div>

                <br>

                <div class="listitem-value">

                    <span>

                        {{City}}

                    </span>

                </div>

            </div>

            <div class="listitem">

                <div class="listitem-label">

                    <span>

                        Street

                    </span>

                </div>

                <br>

                <div class="listitem-value">

                    <span>

                        {{Street}}

                    </span>

                </div>

            </div>

            <div class="listitem">

                <div class="listitem-label">

                    <span>

                       WebAddress

                    </span>

                </div>

                <br>

                <div class="listitem-value">

                    <span>

                        {{WebAddress}}

                    </span>

                </div>

            </div>

            <br>

            <br>

            <div class="listitem">

                <div class="listitem-label">

                    <span>

                        PhoneNumber

                    </span>

                </div>

                <br>

                <div class="listitem-availability">

                    <span>

                        {{PhoneNumber}}

                    </span>

                </div>

            </div>

            <div class="listitem">

                <div class="listitem-label">

                    <span>

                        CreatedAt

                    </span>

                </div>

                <br>

                <div class="listitem-value">

                    <span style="float: right; clear: right; display: inline; font-size: 17px; padding-top: 4px">

                        {{CreatedAt}}

                    </span>

                </div>

            </div>

        </div>

    </div>

</body>

In the CSS Editor tab of the interface, use the following code.

.myTemplate {

height: 100vh;

background: linear-gradient(to bottom,#3C607C,#6693B0);

color: #CEDDEC;

font-family: Helvetica;

}



.header {

background-color: #none;

height: 40px;

padding: 16px;

}



.card-content{

padding: 16px;

}



.listitem {

font-size: 12px;

font-weight: normal;

text-align: left;

background-color: none;

height: 40px;

padding-top: 18px;

line-height: 18px;

}



.listitem-availability{

font-size: 17px;

color:#BEDAC3;

font-weight: bold;

float: left;

padding-right: 16px;

}



.listitem:first-of-type {



}



.listitem-label {

float: left;



}



.listitem-value {

color: #fafafa;

font-size: 17px;

float: left;

padding-right: 16px;

}

Click Save

5. Push a Mobile Card from the Master Detail application and run Mobile Cards on your mobile device

This chapter describes how to send the content from the previously built Fiori Master-Detail web application to the SAP Mobile Card via a Default card.
With the Default cards content can be mobilized and the user can push it from any system.

Prerequisites

Download and install SAP Mobile Cards application on your iPhone or on your Android.

Complete the previous chapters.

Go to WebIDE and open the MasterDetailfromBuild that has been created in chapter 2.

Open neo-app.json and add the destinations as below

    {

      "path": "/mobileCards",

      "target": {

        "type": "destination",

        "name": "mobileservices",

        "entryPath": "mobileservices"

      },

      "description": "mobileCards"

    },

    {

      "path": "/mobileservices",

      "target": {

        "type": "destination",

        "name": "mobileservices"

      },

      "description": "mobileservices"

    }

Open the view folder and Right-click on "DetailPage1.view.xml" file to open it in the layout editor.

Click on the Save Button in the footer and rename it to Send

Click on Events tab

Create new Event in the Press property and name it "onShareToCardsPress". Open the newly created Event in Editor

Scroll down until so you see the function onShareToCardsPress. and insert the code as below:

			onShareToCardsPress: function (oEvent) {

				var sCardTypeGUID = "<Your-ID>";



				if (!sCardTypeGUID || sCardTypeGUID.length === 0) {

					sap.m.MessageToast.show("You must set the Template ID first");

					return;

				}



				var sPath = this.getView().getElementBinding().getPath();



				var url = "/mobileCards/origin/hcpms/CARDS/v1/cardTypes/" + sCardTypeGUID + "/cardInstances";

				var bodyJson = {

					"resourceIdentifiers": [{

						"uri": "/sap/opu/odata/iwbep/GWSAMPLE_BASIC/" + this.sContext



					}]

				};



				jQuery.ajax({

					url: url,

					async: true,

					type: "POST",

					data: JSON.stringify(bodyJson),

					headers: {

						'content-type': 'application/json'

					},

					success: function (data, textStatus, xhr) {

						if (xhr.status === 201) {

							sap.m.MessageToast.show("Successfully added Card");

						} else if (xhr.status === 200) {

							sap.m.MessageToast.show("Card has already been added");

						} else {

							sap.m.MessageToast.show("This Card cannot be added");

						}

					},

					error: function (xhr, textStatus, error) {

						sap.m.MessageToast.show("Error: This Card cannot be added");

					}

				});



			}

Switch to SAP Cloud Platform Moble Services Admin Cockpit and click on the BuPaCard that has been created for this chapter.

Copy the ID

Switch back to SAP Web IDE page and paste the ID into the value of the variable sCardTypeGUID in the DetailPage1.controller.js

Click on Save icon to save your changes

Go to the SAP Cloud Platform Mobile Services Admin Page and select the API tab

Open the Mobile Cards application on your mobile device and scan the QR code on your iOS/Android device to start registration

Go back to the WebIDE, select your MasterDetailFromBuild application and click to run icon to run the web application.

Select a BusinessPartner on the ListView and press the Send button to push the BusinessPartner to your Mobile Cards application

Now open your SAP Mobile Cards application and you will see the card you selected and shared from the web application.

Summary:

In this hands-on tutorial you have learned how to setup an complete end-to-end example from creating a protypting with BUILD and set up a real web application project with WebIDE. On top you are now able to push content from the web application via a mobile card to your mobile device. This example can now be customized and connected to your own Backend systems e.g. via the Cloud Connector.

A very good source for further tutorials about how to use SAP Cloud Platform Services is the Tutorial Navigator

Former Member · ‎08-05-2019

Thanks for such a awesome and beautiful post, it made me every doubt clear on it , a very very complete information.

regards,
[Spam removed by moderator]

former_member187069 · ‎08-14-2019

Hi,

Thanks for a beautifully written article. I have created the mobile destination but I dont see the destination listed when I try to create a new SAP Mobile Card. Any suggestions pls?

Thanks

Vishnupriya

former_member187069 · ‎08-14-2019

Got it! Please follow the below step to see the destination in the drop down :

- Go into SAP Mobile Cards on the left-hand side menu. On the right hand side you will see Assigned Features. Click Connectivity within Assigned Features and then ‘add’ this new destination (ES5_Mobile)we just created

former_member187069 · ‎08-16-2019

Hi,

I am getting a notification that New Card is created.. but i am not able to download the cards. Any suggestions pl?

Thanks

jens_kristen · ‎08-22-2019

Hi Vishnupriya,

Did you add a subscription in your Mobile Cards Client? Please click on "More" and check it

former_member688245 · ‎06-30-2020

Thank you so much, Jens, for providing this SAP WEB IDE Tutorial…

Regards

[spam removed by moderator]

Former Member · ‎08-15-2020

Great article. It helps a lot for my work. Thanks for sharing these effective and helpful ways. [spam removed by moderator]

former_member704257 · ‎09-25-2020

Thanks for the wonderful explanation and it helps me a lot.

Hands on - Build a simple application with SAP BUILD, SAP Web IDE Full Stack and SAP Mobile Cards

PREREQUISITES

1.Create a prototype in SAP BUILD with the Fiori Master Detail template

2. Import the SAP BUILD prototype to SAP Web IDE Full Stack

3.Change the destination to a real OData Service and run the project as a web application within the Fiori Launchpad

4. Build a Mobile Cards Application with SAP Cloud Platform Mobile Services

Requirements

Create a destination

Create a mobile card

Setting up the sample data

Creating the mobile card’s user interface

5. Push a Mobile Card from the Master Detail application and run Mobile Cards on your mobile device

Prerequisites

Summary:

Get Your SAP HANA Idea Incubator Badge Today!

SCN Mission - SAP HANA Quiz Challenge is now retired

Share your #HANAStory and Win

Field Name	Value
Interaction	Item Click
Action	Navigate to
Transition	Detail Page1

Field Name	Value
Introduction	BusinessPartnerID
Title	CompanyName

Field Name	Value
Introduction	BusinessPartnerID
Title	CompanyName