How we can build SAPUI5 mobile application consuming GW Service builder from the Eclipse.

[vijaybhaskarraju_vegesana]

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.

       

• 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)

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

• 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.

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

Step 2:

          Select Starter Application Project as displayed in below screen shot

 

Step 3:

         Give Project name and select HTML5

Step 4:

         Select List/Details Application (SAPUI5)

 

      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.

    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.

 

   Step 7:

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

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.

                         

    Step 9:

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

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.

      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”

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.

New Entity Set screen shot from Gateway Service Builder

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.

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

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.

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

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.

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.

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

 

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