Skip to Content

         Taking into consideration the fact that number of mobile devices is constantly growing I decided to learn some ways to write mobile application with SAP backend. Mobile development is new for me . Only few months ago I have started learning JavaScript, JQuery, JQuery Mobile and Sybase Unwired Platform (now it is called SAP Mobile Platform). I should say that the process of writing program in SUP was really interesting and exciting. In this blog I will try to help beginners in SUP to develop programs faster and easier without repeating the mistakes that I have made. Also I would like to thank everyone who helped me with answering my questions on SCN. I want to say a special thank to Artem Ruzak who helped me at all stages of development.

          Working at Symphony Solutions we strive to deliver more than required to our customers, so I decided to make some useful thing for one of them – namely a management dashboard for tracking maintenance tasks statuses and created new app called Mchart that consists of SUP Hybrid Web Container frontend and SAP as a backend.

/wp-content/uploads/2013/04/full_205728.png 

    

     I had started the process of developing using only standard SUP features, but then I understood that it would be better not only to Drag & Drop, but also to be able to write and edit a code directly (then I began to learn JQuery Mobile). It gives more options for developing and greater understanding of the whole project. The main idea of writing this App was to learn how to use MAKit, and I decided to make chart which will show user operations performance.  In order to debug my app Weinre was used. Then some Phonegap features were added. So, if you are interested how to use MAKit, Phonegap or Weinre in your SUP App,  you will find some useful stuff here! One suggestion – if you want to create mobile App, using emulator is not very good idea. Its slow work will take only a desire to further develop, so better to test App on real device.

     Below I try to cover as much as possible from what I have learned doing my first app.

MBO

           Nice video how to create MBOhttp://www.youtube.com/watch?v=itmPzqFY6Bo.

 

As you see on the picture MChart consists of 2 MBOs. First of them is called Task and is main in the App. According to those data, chart will be drawn. On personalization key section you can see 5 keys, 4 of them are used in Task MBO. In the bottom of the picture you can see how to connect them.

When MBO is created and connected to some personalization keys project should be deployed to server. Now when MBO is created we need to work with it somehow. There are 2 ways : Menu item or custom action. More information you can find here. If you create a menu item or an action that invokes an object query, it automatically creates an output key, which is a list of keys that are bound to the attributes of the mobile business object.  As example I will show how I used Task MBO. At first custom action should be added on screen design. Then you should add some properties as on the picture below.


 

  Now personalization keys are mapped to UI elements.

I faced the problem that I can not add custom action in screen design or I have added it, but it was invisible. The following error occured :’The screen ‘Start’ has a custom action ‘null’ which key is empty’. I just ignored such kind of errors.  I faced a problem for a couple of times. And solution is very easy – just copy previous custom action on Screen Design and paste it to custom actions. So you will have new custom action and will be able to edit properties or some mapping parameters.

Hybrid Web Container 

Some useful information about HWC can be found here . In SUP data can be received from SAP using BAPI/RFC (on SAP side) and MBO (on SUP side). So the first thing that I did was a BAPI. If you have some experience in ABAP it will not be a problem for you to write it. Here is a link to Tutorial how to make your own BAPI .

                  In JavaScript you have a possibility to get data from MBO directly. The following code goes through all MBO (Task) and fills JavaScript array:

var taskList = message.getData("Task");
var tasks = taskList.getValue();
var noOfItems = tasks.length;
if (noOfItems > 0) {
             var i = 0;
             while (i < noOfItems) {
                             var theItems = items[i];
                                      taskObj=theItems.getData("Task_PERFORMANCE_attribKey");
                                      task_performance = taskObj.getValue();
                                      task_array.push(task_performance);
}
}

             One more interesting thing. I created custom action  menuItemCallbackStartkRead_Tasks() which fills Task MBO. However if you use above mentioned code after calling this custom action you will get incorrect data or no data. Solution is customAfterDataReceived() in custom.js. You can use the following :

var mvc = incomingWorkflowMessage.getValues();
 if (mvc) {
          var  task_list = mvc.getData('Task');
            if (task_list) {
                  alert(‘data from SAP already received’);
            }

So in that way you can go through the whole MBO and do with this data (received from SAP) all that you want. I don’t know if this is good idea, but I decided to copy fields from MBO which I needed to javascript array and then worked with it.

While Working with MBO I faced few problems:

1.   When you try to add some new fields into the exporting parameters or new fields to the structure in table section to BAPI, on MBO preview everything looks nice. But when I deployed project to mobile, there were some problems like xxxxxx field undefined. I tried to reopen Sybase unwired workspace, redeploy project, but nothing helped. The solution that I found is to rename BAPI and newly connect it to MBO.

2.   I can not import tables to MBO. I posted a few questions on SCN how to do that but solution was not found so I decided to import string instead of table. You need to create personalization key as a string, connect it with MBO in attributes->load argument section. Then connect this pkey to some element in UI (in my case editBox) and fill this box by data you need separated by some value (for example ‘/’). On SAP side just split string in table at ‘/’. And you will have table in BAPI.

3.   If you have Xstring as an export parameter from BAPI then you should add one more field which will be a unique key; in other cases key is not required.

      You might find useful the list of Known Issues for Sybase Unwired WorkSpace that could be found Here.

Debugging

                  It was very difficult for me  to arrange all elements. So I decided to use Weinre to have a possibility to watch and change css rules of elements. Weinre – it is a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), but it’s designed to work remotely and, in particular, to allow you to debug web pages on a mobile devices such as a phones or tablets.

The most useful tabs are:

Remote – choose session

weinre.PNG

Elements – see DOM structure, edit CSS (On the left side – DOM structure, on the right – CSS rules applied to highlited element)

Capture.PNG

Console – write some javascript, track errors

For using weinre you need to download archive here. File called weinre-jar-1.4.0.zip.

Then unzip archive.

Open your project in Custom.js file change customBeforeShowScreen function. Write the following :


        

 var headId = document.getElementsByTagName("head")[0];
          var newScript = document.createElement('script');
          newScript.type = 'text/javascript';
          newScript.src = 'http://xxx.xxx.xxx.xxx:5354/target/target-script-min.js#anonymous';
          headId.appendChild(newScript);
          return true;


     Where xxx.xxx.xxx.xxx is your machine (or remote machine) ip address.

Now we need to start weinre server. My suggestion is to create .bat file in the folder with weinre within the following data:

@echo off
java -jar weinre.jar -httpPort 5354 --boundHost -all-

It was a bit dissappointing for me that there is no possibility to use usual debugger (put break point and debug step by step), but watching DOM and editing CSS is also helpful. In weinre I like most is that when you suggest an element in DOM structure he highlited in the device. So you know which element you work with. 

In the second part of blog you can find information about MAKit and Phonegap features used in the App.

To report this post you need to login first.

4 Comments

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

  1. Artem Ruzak

    Good description of all steps needed and tools in one blog. I guess woudl be very helpful for  many who decides to go the SMP-way.

    (0) 
  2. Jyotiranjan Rout

    Hello Denysyuk Pavlo,

    Thanks for posting this information(this is the 1st one I found in Google search related to MAKit).

    But, What I feel is, this may not be for biggener’s.Kindly give detail explanation regarding the JS code.Probable, in which method to write what(if possible certain comments)??

    Note: I have plan to get data from MS SQL server and make use of MAKit for dashboard.

    Thanks again.

    (0) 
      1. Jyotiranjan Rout

        Thanks…

        Actually, I want to develop native ios app using MAKit.But, it seems that the tutorial (

        Mobile Analytics Kit Developer Guides: iOS 2.1 ESD #2) does not have sufficient info.Please guide me.Thanks.

        (0) 

Leave a Reply