Skip to Content

Thanks for SDN, it helped me a lot to finish this document. I just want to make it available in a single document.

Introduction –

Here, we will focus on how we can build SAPUI5 mobile application consuming GW Service builder from the Eclipse.

Prerequisites –

We need to follow the steps as mentioned below

  1. 1. Download and install Java SE6
  2. 2. Download and install Eclipse IDE for Java EE developers from Eclipse (download based on your system type either 64-bit or 32-bit)
  3. 3. Download UI Development Toolkit For HTML5
  4. 4. Install the SAP NetWeaver Gateway Productivity Accelerator (GWPA) features.
  5. 5. You should have Eclipse IDE with SAP UI development toolkit for HTML5 and access to SAP NetWeaver Gateway system.

Steps:

  • First finish the installation of Eclipse.

Pic1.png       

  • From the Eclipse menu choose Help->Install New Software

                        Add the URL in Work with: https://tools.hana.ondemand.com/juno and click on Add, give any name and click OK. (see the below screenshot)

/wp-content/uploads/2013/09/picc2_284587.png

 

  • Select the feature(s) you want to install and follow the steps of installation wizard.(see the below screen shot)

/wp-content/uploads/2013/09/pic3_284603.png

  • After selecting SAP NetWeaver GWPA (Toolkit for HTML5), UI Development Toolkit for HTML5 click 2 times ‘Next’ and then ‘Finish’ as shown below. It will take some time and in between it will give some warning messages, click ‘OK’. At last you need to restart the eclipse for changes to take effect.  After that you will get some error messages, as of now avoid it.

You should also need to install SAP NetWeaver Gateway plug-in for Eclipse which can be downloaded at

New_Gateway_plug-in_for_ Eclipse

          

  In the above URL ‘Click here for download’ as shown below. Accept the license agreement, after that it will ask for SDN User credentials, once that is done, the download starts automatically.

/wp-content/uploads/2013/09/pic5_284604.png

Procedure –

Steps involved for creating SAPUI5 mobile application consuming Gateway Services with the help of Gateway plugin for eclipse.

Step 1:

        

         Select Project from the path shown in the below screenshot.

      In Eclipse Open Menu->File->New->Other

/wp-content/uploads/2013/09/pic6_284605.png

Step 2:

          Select Starter Application Project as displayed in below screen shot

/wp-content/uploads/2013/09/pic7_284606.png 

Step 3:

         Give Project name and select HTML5

/wp-content/uploads/2013/09/pic8_284607.png

Step 4:

         Select List/Details Application (SAPUI5)

/wp-content/uploads/2013/09/pic9_284608.png 

      Step 5:

In this step, we need to select Gateway service either from remote location or from file system. We will choose Remote location and connect to SAP Gateway system.

/wp-content/uploads/2013/09/pic10_284609.png

    Step 6:

If the connection to gateway system is already established, click on catalog and follow from STEP 10. Otherwise, if it is for the first time, click on manage connections.

/wp-content/uploads/2013/09/pic11_284610.png 

   Step 7:

       In the below screen, click on add, you will see pop-up screen asking for a User Credentials.

/wp-content/uploads/2013/09/pic12_284611.png

Step 8:

As displayed below, connect to the gateway system and provide the user details. Here I provided user credentials of  system and Do not check the HTTPS.

  • Provide Server Host  – Mandatory
  • Provide Server Port   – Mandatory
  • Provide Client           – Mandatory
  • Username                – Mandatory
  • Password                 – Mandatory
  • Select checkbox Save Password and click OK.

/wp-content/uploads/2013/09/pic13_284612.png                         

    Step 9:

       If the connection established successfully, you can see the below screen, and click on ‘Add’.

/wp-content/uploads/2013/09/pic14_284613.png

Step 10:

Now, you will be able to see the list of all projects available in your SAP system and you can search for services.

Step 11:

After selecting the Service Builder, you will be get the below screen.

/wp-content/uploads/2013/09/pic16_284621.png

      Step 12:

       If you followed exactly the same steps as mine, you will be facing this error “There are no addressable collections in the service”

/wp-content/uploads/2013/09/pic17_284622.png

 

Troubleshooting:

It is not possible to complete the wizard without solving the above problem. So after some time, I found out that when creating your entity set in Gateway Service builder, you should flag the “Addressable” checkbox. But, when I did this and tried to re-generate my service, I faced the exact same issue, the system kept telling me that everything was correctly generated, but nothing was changed at all.

So, first we need to delete the generated classes of the Service Builder and we need to make the necessary changes and regenerate the classes.

As of now, I don’t have required authorizations to perform the delete action, so I am again recreating the service from the scratch.


Old Entity Set screen shot from Gateway Service builder.

/wp-content/uploads/2013/09/pic18_284623.png

New Entity Set screen shot from Gateway Service Builder

/wp-content/uploads/2013/09/pic19_284630.png

NOTE

After doing some research, I got to know that if even the “Addressable check” box is selected and again if you are selecting the “Required filter”(last checkbox in the above screen shot) check box you will face the similar issue. For avoiding this you need to uncheck the “Required filter” Checkbox.

Once done save it and generate the classes, from the step 10, you need to select the newly created Gateway Service Builder.

Step 13:

Now, we solved the problem. Here we need to create the list view and details view and add the necessary fields which are to be displayed.

/wp-content/uploads/2013/09/pic22_284631.png

Provide the name for View title and Click on symbol and add the fields, which need to be displayed in the list screen.

/wp-content/uploads/2013/09/pic23_284632.png

Again, click on the symbol to create a new view in the left side of the screen. 

Provide View title and add the fields that are to be displayed in the details View and click on finish.

/wp-content/uploads/2013/09/pic25_284633.png

 

Now, Our SAPUI5 mobile application is ready for testing.


Step 14:

  • Now, you can see the newly created project in the Project explorer.
  • Right click on the project, Run as->Web App Preview

/wp-content/uploads/2013/09/pic26_284634.png

NOTE

Here, we need to remember that the list of items displaying in Run As menu varies from the kind of project we developed, that means for android and JQuery the menu options are different.

However I couldn’t test it: while choosing “Run as >> Web App Preview” in the context menu, only a blank page was displayed.

/wp-content/uploads/2013/09/pic28_284635.png

How to Fix the Issue:

To fix this, we need to follow few steps, it is bit complicated, after doing lot of research, we got to do this. Please follow accordingly

  • Go to the folder where we initially downloaded the UI Development Toolkit For HTML5
  • Extract the folder and inside that, again extract “sapui5-static”.
  • Go to sapui5-static->resources, drag and drop resources folder into the Eclipse inside the “WebContent “folder. (But the problem   here is the resources folder is quite heavy i.e., 91MB and my machine did not support it and Eclipse keeps on crashing).
  • So, Instead I can send you light weight “resources” folder which is around 4MB along with this document which makes our life easier.
  • After coping the light weight “resources” folder to the “WebContent” folder in Eclipse,

Click on index.html under WebContent folder.

In the index.html, edit the code as shown in the below screen shots.

/wp-content/uploads/2013/09/picindex_284636.png

So, I changed it to src=”./resources/sap-ui-core.js” and save it.

/wp-content/uploads/2013/09/picindex1_284637.png 

After saving it, run your project. It will ask your username and password, once that is done you can see the output in index.html as below.

Copy the URL and paste it in Internet Explorer, provide user credentials and you are done.

Click on the Address type in the list view and you can see the details view.


Conclusion:

Do the same and follow the same steps as we did here and you can see the output. Let me know if you have any concerns.

Your suggestions and inputs are always welcome

To report this post you need to login first.

6 Comments

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

  1. Emmanuel Dacosta

    Hello Vijay.

    Thanks for the how-to. As mentioned, after importing the resources folder, my eclipse keeps on crashing too.

    Could you send me the light version of resources folder ?

    Regards

    Emmanuel

    (0) 
  2. b28 guest

    Hello Vijay!

    Thanks for the document – got through the issues myself today (Addressable and sapui5.js file). Found also solutions on SDN – but nice that you put it all together!

    One issue I am facing was “No data” – because in the data binding code for the table you need to add a slash in front of the collection name:
    oTable.bindRows(“/Collection”);

    For any CORS issues my Chrome link has this target:

    “C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disable-web-security

    The JavaScript error for missing i18n_en_US.properties and i18n_en.properties I just created empty files in the WebContent/project/globalization folder.

    BR,

    Denise

    (0) 
    1. Vijay Vegesana Post author

      Hello Denise,

      please make sure that your output data is correctly getting populated in OData services and pass some default values while executing using collection.

      Thanks,

      Vijay Vegesana

      (0) 
  3. Jaime Jose Aguilar Cabezas

    Hello Vijay , thank you very much for your document

    Please I have a problem, I would like to know where I can get the following parameters .

    • Provide Server Host  – Mandatory
    • Provide Server Port   – Mandatory
    • Provide Client           – Mandatory
    • Username                – Mandatory
    • Password                 – Mandatory

    From sap gateway.

    Thanks,

    (0) 
    1. Vijay Vegesana Post author

      Hello Jaime,

      Server Host – FQDN (Get from the basis team)

      Server Port  – Go to transaction->SMICM->From the Menu->Goto->Services->HTTP->Port no

      Client          –  SAP Client            

      Username   –  SAP Username

      Password    –  SAP Password

      Thanks,

      Vijay Vegesana

      (0) 

Leave a Reply