SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5

Share on Facebook15Share on LinkedIn21Tweet about this on TwitterShare on Google+0
Please Share!!

This article is the continuation of our earlier write-up SAPUI5 Part II. We would try to improve the same application which we worked last time. If you are new to SAPUI5 or Routing, we would suggest you take a glance of our Part II and then come over here to get the maximum benefit.

In the previous application, our PO Detail View has no Navigation Button to go back to PO Header View as the Show Nav Button property is False.

SAPUI5 for beginners
Let us set the property to True. Check the Back Navigation button is visible.

Routing in SAP Fiori

Let us test.

Target Mapping in Fiori
When we click any item of the first screen it goes to the PO Detail screen which has the Back button.


But when we hit the Back navigation button, it is not working. Why? We have not told the Back button to do any action. We just created the button with no Event.

Let us create an Event Function and order the button to take us back to the PO Header screen.

Save and go to PODetail.Controller.js file. The below function code would be auto written by the WebIDE wizard.

Like we did in Part II of our SAPUI5 Tutorial, we would create a Router object and pass the Router name in the getRoute function. Where will we find the Router name? In the manifest.js file. Let us check our manifest file in Descriptor mode.

Route_Head is the router name which points to target Target_Head which in turn points to View V_POHeader. So we need to pass router name Route_Head.

Do not forget to pass the Event (oEvt) object to Function.

That is it. We are good with Back Navigation button. Let us test it.

Till now we displayed two views: POHeader and PODetail. The data for both the views were obtained from EntitySet POHeaderSet. Suppose when we click on any PO number in PODetail screen, the user wants to get the PO Item Information for that PO.

How would we handle this?
Ans: Create another View (POItem) and on Click of PO number in PO Detail view Navigate to PO Item View. Simple right? Let’s do it.

PODetail has PO Header Details while POItem will have PO Item Details. Just for clarification. 🙂

Also, POHeader and PODetailed consumed POHeaderSet Entity Set while POItem would consume POItemSet of our OData Service.

Also Read: End to End implementation of Two Fiori Apps

Let us get started.

Right click and create SAPUI5 View.

We have named the view as V_POItem.

Go to Layout Editor and change the title to PO Item Detail.

Go to Manifest file in Descriptor Editor and create a Target to new View V_POItem.

Create a Route to point to V_POItem view.

Let us check the manifest file in the code editor. As informed in earlier posts, the auto code generator does not write the Route name correctly. We need to do our bit manually here.

The next step is to provide a button to go to PO Item Details.

Add an Event to the Button.

In PODetail Controller file we would add two lines of code in the GoToPOItem function.

Save and Test our App. Our Routing works fine as the click of the button takes us to the Item screen.

But in the actual scenario, ideally, we would need to capture the PO number present in the PO Detail view and pass it to the next View so that we can show its details.

Therefore, we need to get the PO number (or any other field you want) and pass it in the Pattern argument of the Router. Check below, we caught PO number in v_res and passed it the pattern parameter SelectedPO in the Router argument which we defined in the manifest.js file.

We already checked above that the button works. It takes us to the Next View (V_POItem). Now we need to pass data and show the details of the PO whose items we want to display.

For that, we need to design a table in the V_POItem view and then populate it in the V_POItem controller file.

Let us go to the Layout editor of the PO Item View and drag a Table Control.

It would generate a bunch of code like below.

Let us clean it and replace it like below. Please note we have given the Table id as “it_item” and items of the table is mapped to path {path: ‘/POItemSet’} of the OData Model. We will need the table id in Item View Controller where we need to populate this table.

Now we need to write logic in Item View Controller to catch the router arguments and display the data in the table.

Please do not be scared of the code. It checks for the Router name, reads the argument in the click event and calls the OData model and filters the data for the PO selected (passed in the click) and then binds it to the table name defined in the POItem view.

You just learned how to Filter data in the OData model. 🙂

In case you need to pass multiple fields in the Filter, you can do as below. Please note the below snippet is not related to the example we are working on this post.

Also check: What ABAPers do in HANA Project?

Let us test it.

Oops, there is No Data. 🙁

Let us debug. When you reach the below screen, press F12 in chrome or right click and hit “Inspect” to go to Developers Tool (debug).

Once you are in Developer Tool, look for Sources Tab and then Controller. If you come here for the first time, you would not see V_POItem.controller (like above, since the controller is not instantiated yet). So a good idea is to put a hard break-point (debugger) in your code (if your application is still in development system) and then go in F12 mode.

Hard Breakpoint at PODetail Controller
Hard Breakpoint at POItem Controller


After you have set the breakpoints, hit the Show PO Items button. F10 is the short key to go step by step. F8 is to execute without stop till next breakpoint (if any).

Check the variable lv_po. PO number is expected here, but it did not show up. It means the way we are passing data in the Pattern is not correct.

Let me make the below change. I added SelectedPO inside curly braces {} i.e now the pattern is {SelectedPO}. Anything in {} is considered mandatory parameter and has to be passed to the Router (else the destination view would not be reached).Let us test again.


Finally, the details of the PO item is displayed successfully. Hope you understand the importance of Pattern parameters and how to use and consume it.

You must have noticed, there is no Back Button (navigation) in PO Item Detail view. Let us put a button which would take us to the first screen. The method is exactly same as we did for PO Detail View where the button took us to the first screen.

Go to Layout mode in the View and make the Show Nav Button property as “True”.

Test again. This time the Navigation Button is visible but it is not functional as we have not attached any function to the event.

Hope by now you know that we need to assign a function to this event and write code in the controller to route it to the destination screen we want to. For our example, we would like to route to the first View.

Check the POItem controller, there is new method created.

Write below two lines of code.

Test again. This time the button would take us to the first screen.

Hopefully, you learned something out of this post. This is a very basic tutorial for complete beginners in SAPUI5. We have tried to jot down every minute details so that the freshers in SAPUI5 could understand or create one working SAPUI5 application.

Summary of today’s tutorial.

1. Enabling standard Navigation Button and adding Events and attaching functions to these Events
2. Adding custom Button and corresponding Events
3. Importance of mandatory parameters in the Pattern
4. Reading view element data in the Router methods in Controllers
5. Reading Router Arguments (parameters) in Controllers
6. Design Table output in View
7. Using Filter in Models
8. Bind Table Items and display in View

If you face any issue or you want to refer to the codes which we have written for our example application, please download the below zipped file and upload it into your system. You would be able to see all views, controllers, and codes.

Download the complete SAPUI5 Project.

In the next post, we would create a brand new custom Application. It would have Input field on the first screen. We will show the Summary in second View and Details in the third View. We would also introduce you to the History Library which would help us in navigating to previous windows.

Please hang on with us. We would surely make you project ready in SAPUI5. We would not preach theories. Our approach is to show you hands on and learn practically.

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 stopping by!!

Also, check our popular step by step tutorials on some of the important topics of SAP ABAP.

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
10. SAP Screen Personas Tutorials

Share on Facebook15Share on LinkedIn21Tweet 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.

5 Comments on "SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5"

  1. Prabhjot Singh Bhatia | October 17, 2017 at 4:29 am | Reply

    Hello Guys,

    Your tutorials are exactly what i was looking for on google from last few weeks.
    As an ABAPer, these tutorials are really helpful for me to understand the programming in UI5 and consuming Odata.
    In your current tutorial, you demonstrated very well how to bind a table for PO Items using selected PO no. but you used Filter in Models.
    I am curious if you can also provide one demo tutorial to bind the table using navigation property i.e. if i have created an association set and navigation property from POHeaderSet->POItemSet based on Ebeln then how can i bind the Item table in 3rd view?

    Please suggest as its equally important in complex projects.

    Thanks and regards,
    Prabhjot

  2. Ankesh Jindal | May 31, 2017 at 7:15 pm | Reply

    Hi Team,

    From Webide, when running application, sometime i am able to see data but most of the time backend data is not coming, it is there in service , but data is not coming in application, I am getting empty drop-list with message Drop list items here . What could be the reason for this?

    Regards,
    Ankesh

    • Dear Ankesh – Since it shows up sometime and not at other times. Issue might be you are calling the model incorrectly.

      Were you able to fix it now?

      Please let us know.

      Regards,
      Raju.
      Team SAPYard.

  3. I encounter an issue wherein when I navigate from detail to item, it gives me all the data from my POItemSet.

    Not so sure if that is a problem with my OData selection or the UI5 filtering.

    It’s very good article nonetheless… 🙂

    • Dear Hafruman – Thank you very much for visiting our page and leaving your feedback.

      I think, you have not added the Filter Logic in the DPC in your backend OData method. It should look something like below. Debug and check the Filter Keys. It should work.

      METHOD poitemset_get_entityset.
      DATA: ls_key_tab TYPE /iwbep/s_mgw_name_value_pair,
      lv_ebeln TYPE ebeln.

      * This is for Navigation Link Filters. Get the key property values
      READ TABLE it_key_tab WITH KEY name = ‘Ebeln’ INTO ls_key_tab.
      IF sy-subrc = 0.
      lv_ebeln = ls_key_tab-value.
      ENDIF.

      * This is for Filter Options
      READ TABLE it_filter_select_options INTO DATA(ls_filter) WITH KEY property = ‘Ebeln’.
      IF sy-subrc EQ 0.
      READ TABLE ls_filter-select_options INTO DATA(ls_option) INDEX 1.
      IF sy-subrc EQ 0.
      lv_ebeln = ls_option-low.
      ENDIF.
      ENDIF.

      IF lv_ebeln IS NOT INITIAL.

      SELECT * FROM ekpo INTO CORRESPONDING FIELDS OF TABLE et_entityset
      WHERE ebeln = lv_ebeln.
      ELSE.

      SELECT * UP TO 10 ROWS FROM ekpo INTO CORRESPONDING FIELDS OF TABLE et_entityset.

      ENDIF.

      ENDMETHOD.

      Please let us know if it still does not work.

      Regards,
      Team SAPYard.

Leave a Reply to Ankesh Jindal Cancel reply

Your email address will not be published.


*