Introduction

SAP Web IDE is an Integrated Development Environment for SAPUI5 and Fiori applications.

In this blog we shall see how to use Cordova plugin Contacts and an external plugin, from within a SAP UI5 mobile app. (along with Kapsel plugin Logon Manager)

Objective

To develop an SAPUI5 app from one of the standard templates which takes data from a backend system. We will use the OData service “CB_CUSTOMER_SRV” for getting the customer information from the backend. We will add some custom code and do the following:

Add a button to add back end Customer Contact details to the mobile device Contacts.

Add a button to Call the Customer directly from within the app without adding it to the Device Contacts.

Once the app is ready, we will mobilize it using the Hybrid Application Toolkit and the trial HCPms system.


The final app will look somewhat like this: (with 2 buttons on the detail view of Customer) FinalApp.png


Prerequisites

  • SAP Web IDE 1.9.3 and later (you can register at SAP HANA Cloud Platform to get your development environment)
  • Hybrid Application Toolkit 1.2.6 downloadable from here
  • An HCPms account configurable as described here
  • SAP HANA Cloud Cloud connector(latest version preferred) downloadable from here
  • An Android device which is recognizable using your PC. (An android simulator can be used only to add contacts, but to call contacts directly an actual Android device is needed)
  • ‘Call Contact’ Plugin (you can find it here)

All the above prerequisites must be properly configured, before moving forward with this guide


Walkthrough

This is the list of all the steps we’ll go through:

  1. Create a destination and connect it to Cloud Connector
  2. Create a new Application in the HCPms
  3. Create a new Kapsel app with SAP Web IDE
  4. Add buttons to the Detail view
  5. Add the necessary custom code for the new buttons
  6. Deploy the app with HAT
  7. Clone the Call number Repository and Add the external plugin to Call Contact
  8. Build the project from command line
  9. Run the project on a mobile device

1. Create a destination and connect it to the Cloud Connector

We have to create a connection to the backend system. We can create a new destination to reach the CB_CUSTOMER_SRV service located on the ABAP system called GM6.

Start the SAP HANA Cloud Connector and create an access control row for the resource path on the ABAP system

1HanaCloudConnector.png

Access your HANA Trial environment and create a new destination which points to the Cloud Connector item created in the previous step

2Destination.png

2. Create a new Application in the HCPms

Create a new application in the HCPms system. You can follow this blog to learn how to enable your HCPms environment.

Go on https://hcpmsadmin-<your_user>trial.dispatcher.hanatrial.ondemand.com where you need to replace the string “<your_user>” with your user account.

Click on Applications

Create a new Application with the following parameters and click on Save

Parameter Value
Application ID com.test.customer
Version 1.0
Name Customer
Type Hybrid
Description Customer Application
Vendor SAP
Security Configuration None

3HcpmsApplication.png


Switch to the Backend tab and specify the Backend URL together with the Authentication Type and the Proxy Type. After this click on Save.

Parameter Value
Backend URL <the backend URL defined in the destination>
Authentication Type No Authentication
Maximum Connections 500
Certificate Alias <leave it blank>
Rewrite Mode Rewrite URL on HANA Mobile Server
Relative Paths <leave it blank>
Proxy Type OnPremise

4HcpmsApplicationBackend.png

5HcpmsApplicationPing.png

3. Create a new SAPUI5 app with SAP Web IDE

Open SAP Web IDE

Create a new SAPUI5 project from the template SAPUI5 Master Detail Kapsel Application

6ProjectFromTemplate.png

Enter a project name (i.e. Customer)

Define the OData connection information to the CB_CUSTOMER_SRV service

7ProjectName.png

8ChoseService_CB_Customer_srv.png

Choose the fields you want to see in the application and click on Next.

NOTE: It’s important, for the goal of this guide, to choose fields related to contact information like phone number, email address etc.,


9OdataFields.png

Click on Finish to end the procedure

You can test the application by running it in the desktop preview mode

10RunApp.png

Right click on the name of the project in SAP Web IDE and choose Project Settings –> Device Configuration. Specify the App Name, the App ID (it needs to match the Application ID used in the HCPms configuration) and the description.

Parameter Value
App Name Customer
App ID com.test.customer
Description Customer Application
Version 1.0.0

Also choose what platforms you want to build your app for. In this case it’s Android

11a_DeviceConfig.png



Specify the Cordova and Kapsel Plugins to use: In this case Contacts and Logon Manager

11CordovaPlugin.png

12KapselPlugin.png

     Enter the information about the SMP server and click on Save.

Parameter Value
Host hcpms-<your_user>trial.hanatrial.ondemand.com
Port 443

13SMPServer.png

4. Add buttons to the detail view

In SAP Web IDE open the Detail view (view/Detail.view.xml) of the app.

Add the following code on the footer toolbar with tag <Toolbar> and save the file

<Button id=”addToContact” icon=”sap-icon://add-contact” tooltip=”Add to Contacts” press=”addToContacts”></Button>

<Button id=”callContact” icon=”sap-icon://outgoing-call” tooltip=”Call Contact” press=”callContact”></Button>

14Code.png

5. Add the necessary custom code for the new buttons

Now open the Detail view controller (view/Detail.controller.js) and add the following function at the beginning of the file, just after the onInit function. Save the file.


//Handle Success / Error on addToContacts

    onSuccess: function(contact) {

        sap.m.MessageBox.show(“Customer Contact successfully saved into Device Contacts “, sap.m.MessageBox.Icon.SUCCESS, “Add to Contacts”);

    },

    onError: function(contactError) {

        sap.m.MessageBox.show(“Failed to save Customer Contact into Device Contacts “,sap.m.MessageBox.Icon.ERROR, “Add to Contacts”);

    },

addToContacts: function(oEvent) {
    var oView = this.getView();
    var sPath = oEvent.getSource().getBindingContext().getPath();
    var custData = oView.getModel().getData(sPath);
    //Get Customer Contact information
    var customerName = custData.CustomerName;
    var customerPhone = custData.MobilePhoneNumber;
    var customerEmail = custData.EmailAddress;
    //Cordova Contact Object
    var contact = navigator.contacts.create();
    contact.displayName = customerName;
    contact.nickname = customerName;
    //name

      var name = new ContactName();

      name.givenName = customerName;

      contact.name = name;

  //phoneNumbers
  var phoneNumbers = [];
  phoneNumbers[0] = new ContactField(“work”, customerPhone, true);
  contact.phoneNumbers = phoneNumbers;
  //emails
  var emails = [];
  emails[0] = new ContactField(“email”, customerEmail, false);
  contact.emails = emails;

        //Save

        contact.save(this.onSuccess,this.onError);

},


    onSuccessCall: function(contact){

    },

    onErrorCall: function (contactError) {

         sap.m.MessageBox.show(“Call to Customer failed “,sap.m.MessageBox.Icon.ERROR, “Call Customer”);

    },

    callContact: function(oEvent)

    {

        var oView = this.getView();

        var sPath = oEvent.getSource().getBindingContext().getPath();

        var customerData = oView.getModel().getData(sPath);

        //Get Customer Contacts data

        var custPhone = customerData.MobilePhoneNumber;

        window.plugins.CallNumber.callNumber(this.onSuccessCall, this.onErrorCall, custPhone);

    },

15Code1.png

6. Deploy the app with HAT

Let us now deploy the project using Hybrid Application Toolkit.

Right click on the name of the project in SAP Web IDE and choose Deploy –> Deploy to local Hybrid Toolkit

After some time you need to specify the Download folder to save the application package coming from SAP Web IDE

15DeployToLocalHAT.png

7. Clone the Call Number repository

When the deployment finishes, open a Command window

Use Git to clone the repository where your external plugin to call Contact is located. In our case we want to use the external plugin for calling a contact from within the app. This is located here so we go in a new folder (in my case “/Users/i033917/myplugins“) and we clone this repository with the following command:

git clone https://github.com/Rohfosho/CordovaCallNumberPlugin.git


16ExternalCordovaPlugin.png

Add the Call Number plugin to the project

In command window

Go in the SAPHybrid folder normally located in your home directory

Navigate to the Customer/hybrid subfolder and type the following command to add the external plugin you cloned, to your project:

cordova plugins add <path_to_the_plugin> (in my case it is “cordova plugins add /Users/i033917/myplugins/CordovaCallNumberPlugin/“)


17AddPluginToProject.png

8. Build the project from command line

Type the command

cordova build

to completely build the project from the command line (you cannot build from SAP Web IDE otherwise you will lose the plugin you just added). Ensure you get a Build successful message.


18CordovaBuild.png

18_aBuildSuccessful.png

9. Run the project on a mobile device

Go back to SAP Web IDE

Select the index.html file of the app, right click on it and choose Run –> Run on –> Android device (Ensure you have plugged in the Android device onto the USB and is recognized)

Once the application starts, provide the credentials for the backend server in the Kapsel Logon.

Switch On the Secure switch and click on Register


20Registration.png

Then create a new passcode or disable it and click on Submit

21PassCode.png

This will give you the list of Customers. Click on any relevant Customer which brings you to the Customer Details.


At the bottom tool bar you should be able to see 2 buttons: Add to Contacts and Call Contact

22CustomerData2.png

Press the first button Add to Contacts to add the Customer Contact details to the Device Contacts

23CustomerDetail.png

You should get a success message on successful addition of the device Contacts.

24AddToContactsSuccessful.png

Press ok.

You could also call the customer even without adding the Customer to the Contacts list using the second button Call Contact.

26CallContact.png

This should trigger the Call Contact.

IMG_20150407_103231.jpg

After you have successfully added the Customer Contact details to Device Contacts using the button, you can also check if the Contact details is indeed added to the Device Contacts.

25CustomerDataAddedToContacts.png

This ends the Contacts demo! Thank You!

To report this post you need to login first.

2 Comments

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

  1. Joao Sousa

    Hello,

    Where is “navigator” in  “var contact = navigator.contacts.create();” declared? How can I see the API for this?

    Thank you.

    (0) 
    1. Sunita Sudarshan Post author

      Hello Joao,

      For question1. Choosing the necessary Cordova plugins to use in Project is like declaring all the required navigator plugins of Cordova. So we do not have to declare this in code.

      Explanation: 

      In step 3, we select the Cordova Plugins needed in Device Configuration of our Project. In this case it is Contacts.

      In step 6, when we deploy the Project with Hybrid App Toolkit, the required plugins are already installed into the destination folder of the deployed Project

      (for example in the path under your Home directory : SAPHybrid\Customer\hybrid\plugins is created with necessary plugins. In this case: org.apache.cordova.contacts. Within this folder if you check the package.json you will see the declaration: This plugin defines a global `navigator.contacts` object.).

      For question2:

      You can find the API reference here PhoneGap API Documentation

      You can find the other API References here: Apache Cordova API Documentation

      Hope that helps?

      Thanks and Regards,

      Sunita

      (0) 

Leave a Reply