SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application

SAPUI5 Training and Tutorial
Share on Facebook55Share on LinkedIn84Tweet about this on TwitterShare on Google+0
Please Share!!

In our SAP Netweaver Gateway and OData Tutorials, we have created our custom OData Service. We learned how to perform CRUD Operations using the OData. We tested the URI stand alone in SAP GW_Client (t-code /IWFND/GW_CLIENT) and Browser. But in the actual project, we do not execute the OData services as stand-alone links. OData always finds their soulmate (effect of Valentine’s day this week) in the form of SAPUI5 Applications. SAPUI5 Applications can connect to the backend database and read information from the system and also create/modify information into the backend database. We have been repeating that Netweaver Gateway is the window (Gate) and OData services are the medium for non-SAP Applications to connect to the SAP backend.

In this tutorial, we would not bore you with the MVC Architecture of SAPUI5 and difference between SAPUI5 and Fiori. We would also not show you how to install Eclipse in your system or how to get your free trial SAP WebIDE. We would also not bother to speak about Cloud Connector and how the backend destination is configured in SAP WebIDE. There are plenty of detailed documents present in SCN, SAP sites and other blogs. (If you really need it in SAPYard too, do let us know. We can compile them too.)

This would be a hands-on exercise with little or no theory. We would be using SAP WebIDE today. The exercises would help us learn and implement the below points:

1. Define the Data Source (backend SAP) and configure OData Service (ZGW_PO_SRV created in OData Tutorials) for the SAPUI5 Application.

2. Create the Default Service Model and configure the Model Type, Data Source and URI.

3. Design the First View Layout of the SAPUI5 Application to show PO Number and PO Type.

3.1. Use List UI Control to display the PO Number and PO Type in the Application.

3.2. Bind the OData Service Data Set (POHeaderSet created in OData Tutorials) to the first View of the Application.

3.3. Bind the OData Service Entity Type Properties (fields) to the first View’s fields (screen elements). EBELN and BSART would be bound to the View UI fields.

And the good news is, we would NOT write a single line of code ourselves. Yes, you read it right. We will NOT write a single line of code to perform all the above 6 activities. If we would not write the code then who would do it for us? The answer is SAP WebIDE. We would drag/drop and exploit the Layout Editor and Descriptor Editor features of WebIDE to achieve the above functionalities. The beauty of modern days programming/development technology is that it tries to make the life of developers easy and the experience of end users intuitive.

This does not mean that we would never need any programming in SAPUI5. I am an ABAPer with some knowledge of C, C++ but no knowledge of Javascript and Java. Are you an ABAPer like me? You would understand my feeling. 🙂 So you might guess correctly, how scared am I when I hear that ABAPers would need to have good knowledge of Javascript to be good front end SAPUI5/Fiori developer. Hopefully, with time, I would have a better grasp of Javascript needed for SAPUI5 developments. But currently, I have no real experience in Javascript. Still, I was able to create an SAPUI5 Application which connected to backend SAP system and fetched data from the database using OData Service and displayed them on the frontend SAPUI5 screen.

If you are an ABAPer like me, this post would be a good moral booster for you. Ultimately, all ABAPers would have to metamorph and attain additional skillsets, but today we would create our first SAPUI5 Application with just our ABAP knowledge, a little drag and drop and some common sense. 🙂

Log into WebIDE link and Create a New Project from Template.
Create your first SAPUI5 application

We would use SAPUI5 Application Template.
What is the difference between SAPUI5 and Fiori

Provide a name. Check it need not start with a Z or Y.
SAPUI5 Training ONline

Give the View Type and Name.
SAPUI5 Online Training

Hit next and Finish. You would be able to see your application in the Workspace like shown below.
Model Vie wController

Model, View and Controller have dedicated folder. It is enough to suggest, SAPUI5 like all modern days applications follow MVC Architecture.

Let us test how this skeletal application looks like. Hit the Execute button (or right click on the application, Run -> Run As -> Web Application). You should see a blank page with the title as “Title”.

Consume OData

We have created our Project. Now let us start the 6 short Exercises which we talked above.

Exercise 1. Add Data Source:

The first step for any SAPUI5 Application design is to let the Application know the source of Data. Whether you would have local data or from some database. ABAPers would be interested in pulling and pushing data from and to SAP backend system. So SAP has provided the Gate (Netweaver Gateway) and OData Service as the medium to communicate with SAP backend. Click on the manifest.json file. Please check the bottom of the manifest.json file. There are two Editors Descriptor and Code Editor.

Code Editor

You can also Right Click on the manifest.json file and Open With -> Descriptor Editor.

what is manifest?

As our aim is to develop our Application with minimal code, we would choose Descriptor Editor for our study today.

In the Descriptor Editor, go to Data Source Tab. Here we need to specify, from where and how you want the application to fetch data. Hit the “+” icon below OData Services. Choose your SAP Client/System. For my case, it is named as “DEV”. This is the backend source.

Now from the list of Services, choose the OData Service which you want to consume in this Application. For our exercise, we would select the OData Service, ZGW_PO_SRV which we created in our SAP Netweaver and OData Tutorial. If you do not have any custom OData Service then we would suggest it would be beneficial if you go through our OData Tutorials and create one OData Service. But you can still continue this post to learn how SAPUI5 application consumes the OData Services.

SAPUI5 Applications

Hit Finish.

Free SAPUI5 Tutorial

You would see something like below.
What is SAPUI5

Take note of OData Service and URI.

Exercise 2. Create Default Service Model

Go to the Models tab in the manifest.json file. By default, i18n model is already present.
how to handle models in SAPUI5?

Hit the ‘+‘ icon to add another Model. Choose Model Source as Select Data Source and Set as Default model for the application.

Looking at the above image you must have made a calculated guess that even though Model Name has an asterisk (*) meaning mandatory, when you Set it as Default Model for application, Model Name input field is grayed out. So for default model, we need not give any Model name. Fewer names, less confusion. 🙂

After you add the model, it would look like below. So the Default Data Source and URI are configured.
SAP Fiori and SAPUI5 Tutorial

We promised, we would not write any code ourselves. But if you open the manifest.json file in Code Editor, you would realize, WebIDE has written a bunch of codes for us.

With time when you would be expert in javascript programming, you could go directly to Code editor and write your own code. But I do not see a point, why would I go and write codes when I can do the same in the Descriptor editor. I am lazy ABAPer. 🙂

Please note: Everyone would speak about the importance of index file, view, controller and models. But very few would stress the importance of manifest.json file. Manifest files are like the traffic control room. They are the descriptor of any SAPUI5 Application. The manifest file holds the Source, Destination, Models, Routes and Navigation information of the SAPUI5 Applications. In the subsequent part of this tutorial series, we would learn more about Routes and Navigations when we would need to traverse from one view to another and pass data to and fro.

Exercise 3. Design the First View Layout of the SAPUI5 Application:

If we want to be frontend developer, Screen/View design is an integral part. Like in Web Dynpro ABAP, we can drag and drop UI elements to the views. Like Web Dynpro, we have standard containers, buttons, input fields, labels etc. If you have ever worked in Web Dynpro, you would easily co-relate the View design in SAPUI5 with that of Web Dynpro ABAP.

If you have never worked in Web Dynpro ABAP, please do not be disheartened. It is not a rocket science. Follow the below steps and create your first view.

Like manifest.json file, View files can also be opened in Code Editor and Layout Editor (instead of Descriptor Editor in manifest). Which editor would you choose? Without a second thought, my heart goes with Layout Editor.
What is SAPUI5?

Exercise 3.1. UI Control to display the PO Number and PO Type in the Application

Choose the Controls Tab and go through all the available controls. SAP has provided all necessary UI elements in WebIDE for the developers. For our exercise, we would you the simple List Control to show the PO Number and PO Type. Drag the List Control to the View area.

Fiori and SAPUI5

By default, three List Items are saved. We want our List to be dynamic. Therefore, we would delete lower two items and design in such a way that the list would show the required numbers of rows depending on the data retrieved from the OData Service.
Web IDE in SAP

Let us go the POHeader.view.xml in the Outline Tab of the view. Treat it as the root xml for this view. Check the hierarchy of the View. Roughly it is as App->Pages->Content->List->Items.

3.2. Bind the OData Service Data Set (POHeaderSet) to the first View of the Application:

Also, check the right-hand side. It has Events and Properties section. Under Properties of XML View, there is a field for Data Set which is “Not defined” by default. Also take note of the chain like icon on the right. It is for Binding. Just like in Web Dynpro, all UI elements of the screen has to be bound to some data source if we want to display some value at run time. For our exercise, we want to show PO Header information in this view. Click on the chain/bind icon.
How to bind UI5 elements

List of EntitySet from the OData Service would be available. If you remember, in our OData Tutorials, we created three Entity Types and Entity Sets. For our first View, we would map POHeaderSet to the XML View.

SAP ABAP Tutorials

Now the root XML View is bound to POHeaderSet. This means all the properties (elements/fields) of the DataSet can be used in the View. It is just like passing parameters to the sub-routines. All the parameters passed to the subroutines (performs) can be used and manipulated in the sub-routine.

3.3. Bind the OData Service Entity Type Properties (fields) to the View’s fields (UI/screen elements).

Now let us check the Standard Item List. By default, the Title of this List is hard-coded as List Item 1.

We would use this fields to show the PO Number from the OData Service. Similarly, we would display PO Type in the Description field.

Data Binding in SAPUI5 and Fiori

Click on the chain/binding icon. Since we have set the DataSet to POHeaderSet, all the field of this entity set is available for us. We would select the field Ebeln (PO Number). Similarly, choose Bsart (PO Type) for the description field. We have removed the icon field.

SAPUI5 data binding concept

Now, let us test our SAPUI5 Application.

Oops!! No output yet. I have deliberately missed one step to show you the issue. We need to Set POHeaderSet as Template of the Standard List Item.

Let us check the View code without setting the Template in the List Item.

After we Set it as default, check the View code again.

Did you notice, {/POHeaderSet} is mapped to items? This means, now the Item has the Source of data.

Now let us test again.

Abracadabra. Our Application has pulled PO Header Info from SAP system using the OData Service. Did we write any code of line yet? Isn’t it cool?

In the about output, the title still shows as “Title”. This is because the i18n has the title mapped to Title.

i18n handling

We can either update the title to our title in i18n (which is the right thing to do), or we can hard code the title on the Page itself.

translations in SAPUI5

Being a lazy ABAPer, I have decided to hard code. Navigate to the content section of the Page and write your Title. Test your application again.

Events in SAPUI5

We could have stopped our article here, today. But we wanted to show the Events section of the View. You guessed it right, Events trigger Functions. Let us give a pop-up message to the users whenever any line of the PO Header is clicked.

Events in SAPUI5

Click on the Press field and select New Function. Give the function name you like. We christened it to GoToPOItem. The function which we created on the Layout editor gets written in the controller file.

Events in SAPUI5

Go to POHeader.controller.js file. Check, the code skeleton for the GoToPOItem function is auto generated. Let us write one line of code to show the pop-up(alert) message. Not really a good practice, but this is just for demonstration. In subsequent parts, we would show how to handle message better.

There is a red cross (x) mark which says it is obsolete. Please ignore it for now. Test the application again. On the first View output, click on any PO. You would see the alert with the message “Navigating to PO Item View“. Congrats, you just triggered an Event in SAPUI5. 🙂

Events in Controller,js

Some useful tips for SAPUI5 Beginners (ABAPers).

1. If you are missing Pretty Printer of ABAP Editor, use Beautify feature to format your SAPUI5 code.

Pretty Printer in SAPUI5

2. How to debug and check what is happening behind the scene in SAPUI5 App?
Ans: In Chrome browser, go to the More tools ->Developer tools.

How to debug SAPUI5 App

3. How to know the sequence of calls when SAPUI5 Application is launched?
Ans: In the Developer tools, go to Network and choose All. You would see the names of all the files called in the order.
Sequence of files called in SAPUI5

4. Do you know how your application would look in Android Galaxy S5 and IOS iPhone 6 Plus?
Ans: From the Developer tools, select the Responsive section.

responsiveness

This is how it would look in iPhone 5

5. Is there a way to check the metadata (skeletal) of the OData Service?
Ans: Yes. Developer tools->Network->All->$metadata->Edmx

$metadata in SAPUI5

Hope this post would give you a necessary boost to dive deeper into SAPUI5. It is not that difficult for ABAPers like us to learn, implement and use it for real projects. Without any custom code, if we can design one screen, then imagine with little more knowledge of Javascript we would be ready to build beautiful and responsive interfaces for our end users. Keep your mind open to learning new areas even if you are a hardcore ABAPers.

In the next post, we would learn how to navigate from the first view to another view. Pass the PO header number and fetch the item details using another EntitySet (POItemSet) of the OData Service. We would touch more about Controller functions and how to create and handle them. Please stay tuned.

Next in the Series: SAPUI5 Tutorial. Part II. Routing and Navigation in SAPUI5 Application

Do you have anything to add to this article? Have you faced any issue understanding and working on SAPUI5? Do you want to share any real project requirement or solutions? Please do not hold back. Please leave your thoughts in the comment section.

If you GENUINELY like our articles then it would be a HUGE help if you subscribed and liked us on facebook. It might seem insignificant, but it helps more than you might think.

Thank you very much for your time!!

Useful Tutorials in SAPYard

1. ABAP for SAP HANA Tutorials
2. ABAP Web Dynpro Tutorials
3. GOS Tutorial
4. OOPs ABAP Tutorial
5. HANA Tutorial
6. SAP Netweaver and OData Tutorial
7. SAP Adobe Form Tutorial
8. SAP Fiori Tutorial
9. SAPUI5 Tutorial

Call for Guest Authors and Contributors to write SAP Articles on our page and get noticed and also receive cool Gifts.

Do you have any tips or tricks to share? Do you want to write some articles at SAPYard? Please REGISTER and start posting and sharing your knowledge to the SAP world and get connected to your readers. Please check our simple guidelines for contributing your articles and receiving the gifts.

Share on Facebook55Share on LinkedIn84Tweet about this on TwitterShare on Google+0
Please Share!!

About the Author

SAP Yard
SAP Yard
SAPYard is one stop page for all Technical Folks in SAP. You would find un-conventional explanations, tutorials, and tricks. Please like our Facebook Page and also join our LinkedIn Group.

14 Comments on "SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application"

  1. Thank you very much for your tutorial. I have already read all the oData tutorials!

    I’m an ABAPer since 1999 and now I’m tring to learn SAPUI5 and Fiori. One issue I have is how to connect my development system with SAP WebIDE (personal Edition). Can you share any link in order to find how?

    Best Regards
    Duffy

  2. Azeem Quadri Mohammed Abdul | February 27, 2017 at 11:11 am | Reply

    Wow another excellent article. You guys are hitting the ball out of the park each time !

  3. Very good article for beginners. Looking forward for more articles….

    • Thank you Venky. Our second article on SAPUI5 is already drafted. We would show Routing and Navigation in SAPUI5. This time with less than 10 lines of javascript code.

      I am sure, you will love it.

      Regards,
      Team SAPYard.

  4. Waiting for a new articles regarding SAPUI5 topic! Very usefull

    • Thank you. Feels good to learn you found the topic Useful. We are working on another quality article on SAPUI5. Please stay tuned. Please keep visiting and leaving your valuable comments.

      Regards,
      Team SAPYard.

  5. Nice Post..Very helpful for beginners..

    • Thank you so much Guru. This post was intended to the fresher and beginners in SAPUI5. We are happy you liked it. Hope it would be helpful to all beginners.

      Please keep visiting and leaving your feedback.

      Regards,
      Team SAPYard.

  6. Nice post!!!!

  7. Very nice and full of goodies about webide.

Leave a comment

Your email address will not be published.


*