Skip to Content

Hi,

In this blog I’m going to show you how to pass data between views while navigating in a SAPUI5 application. This blog is based on

SAPUI5 project setup for beginners with HTML views – Part2: Navigation and storing data with a global model

It’s part 3 of the blog series “SAPUI5 project setup for beginners with HTML views”. All different parts:

Part1: Installation

Part2: Navigation and storing data with a global model – full project https://github.com/lemaiwo/SAPUI5-part1

Part3: Navigation and storing data with different models – full project https://github.com/lemaiwo/SAPUI5-part2

Part4: Testing your application

Part3: Navigation and storing data with different models

This blog will show you another option for passing data when navigating between views.  In the previous blog I used one global model which was used in both views. In this example I’m going to read the input field from the global model and pass it to the second view. In the second view I add the input field to a second model so it can be used on the view by using the new model.

I’m starting with what I’ve already created in the previous blog.

Search for the input field in the model:

I start by putting a breakpoint in the controller of the First View before navigating.

Open my development tools in Google Chrome by pressing F12, go to sources and select the FirstView.controller.js

/wp-content/uploads/2013/11/pic1_324164.png

Put a breakpoint by clicking in front of the line.

/wp-content/uploads/2013/11/pic2_324165.png

Go to you First View, add some input and press the button. The SAPUI5 application will stop at the breakpoint if the development tools is still open. Now it ‘s possible to search for the input value by using the console:

/wp-content/uploads/2013/11/pic3_324166.png

With this step we know how to access the input field in the model:

sap.ui.getCore().getModel(“model”).oData.input

Change the controller of the First view:

The next step is to extend the application and pass this value to the Second View.

I’ve changed the navigation in the tap event. I added the parameter data with the value of the input field:

secondView: function(){
                    var bus = sap.ui.getCore().getEventBus();
                    bus.publish("nav", "to", {
                              id : "SecondView",
                              data : { input : sap.ui.getCore().getModel("model").oData.input }
                    });
          }

Change the controller of the Second view:

In the second View  controller I add the following code to the init function to register a new method onBeforeShow:

onInit: function() {
                    this.getView().addEventDelegate({
                              // not added the controller as delegate to avoid controller functions with similar names as the events
                              onBeforeShow : jQuery.proxy(function(evt) {
                                        this.onBeforeShow(evt);
                              }, this)
                    });
          },

I also create a new function, onBeforeShow, where the data that’s send from the first view will be read. Nexst step is to instantiat a new model, put the data in it and set this new model as default model for the Second View:

onBeforeShow : function(evt) {
                    if (evt) {
                              var secondViewModel = new sap.ui.model.json.JSONModel();
                              secondViewModel.setData(evt.data);
                              this.getView().setModel(secondViewModel);
                    }
          },

Change the view of the Second view:

In the view of the Second View I add a second form to show this option next to the option from previous blog Part2: Navigation and storing data with a global model.

<div data-sap-ui-aggregation="formContainers">
                                                  <div data-sap-ui-type="sap.ui.commons.form.FormContainer" id="myInfoContainer2" data-title="Option 2">
                                                            <div data-sap-ui-aggregation="formElements">
                                                            <!-- input field -->
                                                                      <div data-sap-ui-type="sap.ui.commons.form.FormElement">
                                                                                <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-linebreak="true" data-margin="false"></div>
                                                                                <div data-sap-ui-aggregation="label" data-sap-ui-type="sap.m.Label" id="inputLabel2" data-text="Input">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "2"></div>
                                                                                </div>
                                                                                <div data-sap-ui-aggregation="fields" data-sap-ui-type="sap.m.Text" id="inputValue2" data-text="{/input}">
                                                                                          <div data-sap-ui-aggregation="layoutData" data-sap-ui-type="sap.ui.commons.layout.ResponsiveFlowLayoutData" data-weight= "10"></div>
                                                                                </div>
                                                                      </div>
                                                            </div>
                                                  </div>
                                        </div>

Because the new model is connected to the view, It is possible to just use data-text=”{/input}” for binding the value to the view. It automatically uses the model connected to the view.

Result:

/wp-content/uploads/2013/11/pic4_324167.png

/wp-content/uploads/2013/11/pic5_324168.png

Both options work!

You can view the full project at https://github.com/lemaiwo/SAPUI5-part2

Next step Part4: Testing your application

Kind regards,

Wouter

To report this post you need to login first.

5 Comments

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

  1. Sharique Nasser

    Hi Wouter,

    Excellent blog.

    Will help many UI5 developers when they are stuck in view navigation.

    Can you tell if there is more than two views then how do we have to pass the data from second view to third view??

    (0) 
    1. Wouter Lemaire Post author

      Hi Sharique,

      Thanks for feedback!

      You can access the model of the view by using this.getView().getModel();

      There you can find the data that you want to send to the third view. Try using chrome development tools to inspect your model.

      Use the eventbus for the navigation to the third view and add input from your model to pass some data.

      You will also have to extend the app view for the navigation.

      Kind regards,

      Wouter

      (0) 
  2. Graham Robinson

    Hi Wouter,

    these are a good series of blogs – thanks a lot.

    I just wanted to point out that as of release 1.16 of SAPUI5 a new Routing mechanism was introduced that supersedes previous navigation techniques like such as using sap.ui.core.EventBus.

    I am still struggling a bit with it but the big advantage is that it provides for bookmarking and resuming application state.

    Detail here.

    Cheers

    Graham

    (0) 

Leave a Reply