Skip to Content
Technical Articles

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

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

  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 application using SAP Cloud Platform Mobile Cards
  5. 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:

  1. Sign up for an account in SAP BUILD
  2. You need to register an account on the SAP Cloud Platform
  3. Enable the SAP BUILD Service, WebIDE FullStack and the Mobile Services in the SAP Cloud Platform Trial account.
  4. Download and install SAP Mobile Cards on your iPhone or on your Android.
  5. 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.

 

  1. Open SAP BUILD
  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 the NEW PROJECT button. Click on the to CREATE NEW PROJECT button to create a new project.
  4. Give a name e.g. “MyFirstProject” as project name and for description “Create a prototype based on Master-Detail pattern”.
  5. Click the button START WITH TEMPLATE on the tile
  6. Give a project name e.g. “MasterDetailPrototype
  7. Scroll down the templates and select the Master Detail Template
  8. Two pages have now been created. Select Master Page 1 and click EDIT PAGE.
    .
  9. 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:
  10. 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.
  11. 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.
  12. Enable the “Growing” property to ON.
  13. Under ACTIONS section, select the properties for:
    Field Name Value
    Interaction Item Click
    Action Navigate to
    Transition Detail Page1
  14. Click on Object List Item control under ObjectList in the Outline pane.
    The PROPERTIES tab in right hand side will display List Item properties.
  15. 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.

  16. For Object List Item properties, expand the Attributes property and delete both Item Attribute properties with Right-click ► Delete.
  17. Similarly, delete the Item Status properties. Optional you can add an icon from the LIBRARY.
  18. Click on Master Page 1 and change the “Page Header” property to “Business Partner List”.
  19. Click on Detail Page 1, it will load the Detail Page canvas.
  20. Change the propertiy ICON TAB BAR PAGE to BusinessPartner as below.
  21. Click on Object Header control under Detail Page 1 and change the properties as below:
    Field Name Value
    Introduction BusinessPartnerID
    Title CompanyName
  22. Expand “Icon Tab Bar” in Detail Page 1 and click on “Icon Tab Ok” control. Change the Text property from “OK” in “Contacts”.
  23. Double Click on the Table Headers and modify as below
  24. Delete unused tabs from the Icon Tab Bar by Right-Click ► Delete in the Outline pane.The Detail Page should look like as below.
  25. Expand Icon Tab Contacts and click on Table control or click on the Table in the Outline Pane.
  26. Change the table property to “Contact via ToContacts” as below:
  27. Expand Rows and click on Row
  28. Expand Cells
  29. Click on First Cell “Item Identifier” and set Title and Text properties as below
  30. Click on the second Cell “Text” and change the Text property as below
  31. Click on Cell “Item Number” and delete it
  32. Click on Cell and change the Content property to “Text” and click Add
  33. Change the property of the newly created “Text” Cell as below
  34. 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.

 

  1. 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:
  2. 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.

  1. In the SAP Web IDE, expand MasterDetailfromBuild project in workspace.
  2. In the webapp folder, open neo-app.json file in the code editor.
  3. 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"
        }
  4. Save and close neo-app.json file.
  5. In the webapp folder, open manifest.json file under in the code editor.
  6. 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.

  7. 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"
    				}
    			}
    		},​
  8. Save and Close manifest.json file
  9. Select MasterDetailFromBUILD project and click on the Run tab to change the run configurations to consume data from the ES5 backend service.
  10. Click on Run Configurations in the Run menu
  11. Delete testFLPServiceMockServer configuration
  12. Run MasterDetailFromBuild project
  13. 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.

  1. 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"
        }​
  2. Open the view folder and Right-click on “DetailPage1.view.xml” file to open it in the layout editor.
  3. Click on the Save Button in the footer and rename it to Send
  4. Click on Events tab
  5. Create new Event in the Press property and name it “onShareToCardsPress“. Open the newly created Event in Editor
  6. 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");
    					}
    				});
    
    			}

     

  7. Switch to SAP Cloud Platform Moble Services Admin Cockpit and click on the BuPaCard that has been created for this chapter.
  8. Copy the ID
  9. Switch back to SAP Web IDE page and paste the ID into the value of the variable sCardTypeGUID in the DetailPage1.controller.js
  10. Click on Save icon to save your changes
  11. Go to the SAP Cloud Platform Mobile Services Admin Page and select the API tab
  12. Open the Mobile Cards application on your mobile device and scan the QR code on your iOS/Android device to start registration
  13. Go back to the WebIDE, select your MasterDetailFromBuild application and click to run icon to run the web application.
  14. Select a BusinessPartner on the ListView and press the Send button to push the BusinessPartner to your Mobile Cards application
  15. 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

 

5 Comments
You must be Logged on to comment or reply to a post.