Introduction

With this blog I would like to show you how to create an application with SAP Web IDE which runs on smartphones and make use of the camera and the geolocation features provided by the Cordova plugin. With this application we’ll be able to capture photos using the phone’s camera and to load as well pictures from the phone’s gallery. Beside this we also display on the main view of the app, latitude, longitude and altitude information coming from the GPS sensor.

The main view for this application will be built by using the SAP Web IDE Layout Editor.

You can find here the complete source code for this project.

Let’s get started!

Prerequisites

  • SAP Web IDE 1.7 and later (you can register at SAP HANA Cloud Platform to get your development environment)
  • Hybrid Application Toolkit 1.1.0 downloadable from here.

Walkthrough

Create the application on SAP Web IDE

  • Open SAP Web IDE
  • Choose File –> New –> Project from Template and click on Next
  • Select the SAPUI5 Mobile Kapsel App Project and click on Next
  • Enter a project name (i.e. “testcamera”) and click on Next
  • Set the View Type to XML, leave the Namespace empty, enter the view name (i.e. “main”) and click on Next/wp-content/uploads/2015/02/03_643594.png
  • Click on Finish. You have your application, now let’s go in the view folder



Create the main view layout

  • Right click on the view xml file (i.e. main.view.xml) and open it in the Layout Editor

/wp-content/uploads/2015/02/04_643614.png

  • Change the page title to something like “Camera Test”

/wp-content/uploads/2015/02/05_643615.png

  • Add 5 HBox controls to the view

/wp-content/uploads/2015/02/07_643617.png

  • In the first HBox control add 2 buttons

/wp-content/uploads/2015/02/08_643618.png

  • For the first button set the text to “Take a photo” and set the witdth to 150px
  • For the second button set the text to “Pick from gallery” and set the witdht to 150px
  • Save the file
  • Add an image control to the second HBox
  • Set the HBox’s Justify Content property to Center

/wp-content/uploads/2015/02/09_643619.png

  • Select the image you just added and change the following properties:
Property Value
Height 200px
Width 200px
Element ID myImage
  • Save the file
  • Add a label and a text controls in the 3rd HBox and repeat this step also for the other two HBox controls

/wp-content/uploads/2015/02/11_643621.png

  • For each one of the 3 added labels set the text property in the following order: Latitude, Longitude and Altitude
  • For each one of the 3 added text controls set the text property to “Calculating…”
  • For each one of the 3 added text controls change also the Element ID property and set it to txtLatitude,txtLongitude,txtAltitude, respectively

/wp-content/uploads/2015/02/12_643622.png

  • Save the file

Create the main view controller

  • Double click on the main view controller and delete in the file all the commented code

/wp-content/uploads/2015/02/13_643624.png

  • Add the following content

sap.ui.controller("view.main", {
    oView : null,
    onInit : function() {
        oView = this.getView();
        navigator.geolocation.getCurrentPosition(this.onGeoSuccess, this.onGeoError, {enableHighAccuracy:true});
    },
    onGeoSuccess : function(position) {
        oView.byId("txtLatitude").setText(position.coords.latitude);
        oView.byId("txtLongitude").setText(position.coords.longitude);
        oView.byId("txtAltitude").setText(position.coords.altitude);
    },
    onGeoError : function() {
        console.log('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');
    },
    onPhotoDataSuccess :  function(imageData) {
        var myImage = oView.byId("myImage");
        myImage.setSrc("data:image/jpeg;base64," + imageData);
    },
    onPhotoURISuccess : function(imageURI) {
        var myImage = oView.byId("myImage");
        myImage.setSrc(imageURI);
    },
    onFail :  function(message) {
    console.log("Failed because: " + message);
    },
    getPhoto : function() {
        var oNav = navigator.camera;
        oNav.getPicture(this.onPhotoURISuccess, this.onFail, { quality: 50,
        destinationType: oNav.DestinationType.FILE_URI,
        sourceType: oNav.PictureSourceType.PHOTOLIBRARY });
    },
    capturePhoto : function() {
    var oNav = navigator.camera;
    oNav.getPicture(this.onPhotoDataSuccess, this.onFail, { quality: 10, destinationType: oNav.DestinationType.DATA_URL });
    }
});







Define the onpress event for the two buttons

  • Reopen the view xml file and add the following functions to the press event of the two buttons:
    • for the first button add the function press=”capturePhoto”
    • for the second button add the function press=”getPhoto”

/wp-content/uploads/2015/02/18_643641.png

  • Save the file

Deploy and run the app

  • Right click on the name of the project and open Project Settings
  • Go on Device Configuration
  • Set the name of the project, the description, the application ID and choose the platforms which you want to run this app on

/wp-content/uploads/2015/02/15_643642.png

  • Enable the Cordova plugins Geolocation, Camera and Access File and save the configuration

/wp-content/uploads/2015/02/16_643646.png

  • Right click on the name of the project and choose Deploy –> Deploy to local Hybrid Toolkit
  • Once deployed, right click on the index.html file and choose Run –> Run on –> iOS (Android) device.
  • NOTE: Pay attention that if you want to use the emulator for testing, only the Android emulator can be used, because the iOS Simulator doesn’t support camera emulation. Of course, for the Android emulator, camera emulation needs to be enabled in the AVD Manager. Geo-location only works on a real device

/wp-content/uploads/2015/02/19_643725.png

This is the final result

IMG_1229.PNG

That’s all folks!

To report this post you need to login first.

30 Comments

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

  1. Sung-Yen Yang

    Hi Simmaco,

    Thanks for this excellent how-to blog and I cannot wait to do the same thing as your described in this blog, but you said WebIDE needs version 1.7. Where I can get this new version of WebIDE? Right now, SAP store only provides version 1.4.4 for us to download. So, would like to know where we can download this new WebIDE. Thanks.

    (0) 
  2. Sivadurga Prasad Madhuranthakam

    Hi Simmaco, nice blog, which helps all of us who are working on Hybrid app development.

    I have got HANA Trial connectivity and also downloaded Hybrid Application Toolkit 1.1.0 from SCN. How to integrate these two??? I think without that integration this option “SAPUI5 Mobile Kapsel App Project” will not show up.


    BR

    Siva

    (0) 
    1. SIMMACO FERRIERO Post author

      In SAP Web Ide you need to go on Tools –> Preferences. Select the Optional Plugins on the left side and enable the Hybrid App Toolkit plugin from the SAP Plugins category.

      Remember to refresh SAP Web IDE after doing this.

      Regards,

      Simmaco

      (0) 
  3. Tom Dammer

    Hi Thank you for this example.

    I want a 3rd Button to send the Photo via E-Mail.

    How is the command in the main.controller.js ?

    A Event in xml press=”sendMail”

    Thank you for your Help.

    regards

    Tom

    (0) 
  4. John Jerome Mallari

    Im getting an error when trying to create a new project from template —> the flow cannot be continued due to incorrect wizard configuration.

    Anyone familiar to resolve this? thanks in advance.

    Capture.PNG

    (0) 
  5. Ruchi Dhiman

    Thank you for this tutorial Simmaco!

    We tried to follow your instructions, but got syntax errors in WebIDE, because the variable oView cannot be found by the functions.

    Do you know if the WebIDE now interprets your code differently than when you developed your tutorial?

    Regards, Ruchi and Sarah

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi Ruchi,

      you don’t have to worry about those errors. The SAP Web IDE editor is checking a little bit the code and it found that the oView variable is declared but never use. This is not true because we are using a jSON object and the variable oView is declare at the beginning and assigned to “null”. That variable is also declared globally so that all the declared functions can use it.

      Simmaco

      (0) 
  6. Ajay Kulkarni

    hi Simmaco,

    This works just fine as stated.

    We are trying to put such application on Fiori Launchpad which will be put in Fiori Client.

    Could you comment on deploying process.

    Will this same app can work on Launchpad.

    Regards,

    Ajay

    (0) 
  7. Johnny Muñoz

    Hi,

    The applications can be installed in the HCP or an SAP ABAP Repository, in our case it is the latter. The application is web type and from the HCP correctly raises Cordova default libraries to take pictures with the camera built into the laptop; but when I got the application from the SAP ABAP Repository, the functionality does not respond because they have not loaded the library Cordova.js

     

    The question is how we make SAP ABAP Repository default call the library or the library manually included in the project, because we tried manually but cordova.js internally calls other files, not full load.

     

    Additionally, our project is based on SAPUI5 1.28 and the application does not have index.html file.

    Best regards,

    (0) 
    1. SIMMACO FERRIERO Post author

      Hi,

      I’ve not fully understood your problem. You can use the camera feature with Cordova only if your application is an Hybrid application and it’s running on a device with Camera. In order to do this, when creating application from SAP Web IDE, you can start either with a Kapsel enabled template like the one here “SAPUI5 Mobile Kapsel Starter Application” or with another template, like a Fiori template, but then you need to enable the flag “Set this project as hybrid mobile application After project creation user can configure Cordova/Kapsel plugins, HCPms or SMP in Project Settings” during the project creation. In these cases the needed libraries are added to your project.

      However since you are using SAPUI5 1.28 this last option is not available for you, so you need to use the first option, which means to start from a Kapsel template as described here. In this case the “index.html” file is automatically created.

      Regards,

      Simmaco

      (0) 
  8. Hirak Bhowmick

    Hi Simmaco ,

    Thanks for  this document and information . I have tried and it has worked successfully. Can you please guide on how I should be able to save the photos which are captured on my phone/emulator.

    Request you all to provide inputs on this.

    Thanks and Regards.
    Hirak Bhowmick

    (0) 
  9. wise men llc

    Hi Simmaco,

    Thanks for the Information, it is really nice.

    I have tried and i have faced a Challenge like when i capture the image can’t save it back to SAP directly.

    But i am able to save the image back to SAP when i select from the Gallery.

    Appreciate all for your inputs on this.

    Regards
    Prabhakar

     

    (0) 
  10. Shilpa Jain

    Dear Simmaco,

    I have included Cordova.js file in my application & runs it on SAP WebIDE.
    Camera is able  to take picture from my desktop & place it in the area as described in your code but when I deployed this app on Mobile phone through SAP Fiori Client it is able to fetch image from Gallery but I am not able to see it in that Square Box.

    Please suggest.

    (0) 
  11. Klaus Koblinger

    Hi Simmaco,

    Thanks for the excellent blog, I have tried your example successfully.

    Can you tell me how I can save the image with an oData Service.

    When I try to save the image I receive an failure:

    The following problem occurred: Converting circular structure to JSON 

    	onSave: function() {
    		var oModel = this.getView().getModel();
    		var oEntry = {};
    		oEntry.PHOTOURL = oView.byId("myImage");
    		oModel.update('/Blob(1)', oEntry, null, function() {
    			alert("Update successful");
    		}, function() {
    			alert("Update failed");
    		});
    	},
    (0) 

Leave a Reply