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
It's part 3 of the blog series "SAPUI5 project setup for beginners with HTML views". All different parts:
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
Put a breakpoint by clicking in front of the line.
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:
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:
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
- SAP Managed Tags:
5 Comments
