How do I use Binding path/context to build (multi-page app) using a single view / controller?

[former_member239819]

I'm building a create survey / questionnaire app, where each question has the exact same format bound to a model.

Is it possible to do this with one controller + view and simply manipulate the binding context/path?

I've created a single view for this in SAP WEB IDE. When I go click on the "Add New question" button, (to display the input for Question 2) how exactly do I setup the new binding path/context to accept data for it?

[Joseph_BERTHE · Accepted solution]

Hello,

If I anderstand weel your requirement... You want to create an application which manager a set of Question entity. Each Question as the same form (shwon in your screenshot). If I'm correct, here is a way to do it.

If you use JSON Model then, you probably have to manage an array :

{
     Question : [ {
                   Category: '',
                   Competency: ''
                   ...
                 } ]
}

You have to bind the view to the last element of your model, each time you clik on Add button.

Regards,

[Joseph_BERTHE]

Here is the code :

View.xml

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myApp.controller.View1" displayBlock="true">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
				    <Input width="100%" id="__input2" value="{myProperty}"/>
				    <Button text="Prev" width="100px" id="__button0" press="onPrevButton"/>
				    <Button text="Add" width="100px" id="__button1" press="onAddQuestion"/>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Controller :

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function(Controller, JSONModel) {
	"use strict";


	return Controller.extend("myApp.controller.View1", {
		
		onInit: function(){
			var oModel = new JSONModel({
				Questions : [
					{ myProperty: 'AAA' },
					{ myProperty: 'BBB' },
					{ myProperty: 'CCC' }
					]
			});
			this.getView().setModel(oModel);
			var oContext = oModel.createBindingContext("/Questions/1/");
			this.getView().setBindingContext(oContext);
		},
		
		onPrevButton: function(oEvent){
			var oCtx = this.getView().getBindingContext();
			var oModel = oCtx.getModel();
			var iIndex = parseInt(oCtx.getPath().slice(11));
			this.getView().setBindingContext(oModel.createBindingContext("/Questions/" + --iIndex +  "/"));
			
		},
		
		onAddQuestion: function(oEvent){
			var oModel = this.getView().getModel();
			var jData = oModel.getData();
			jData.Questions.push({ myProperty: 'DDD' });
			var newIndex = jData.Questions.length - 1;
			
			oModel.setData(jData);
			this.getView().setBindingContext(oModel.createBindingContext("/Questions/" + newIndex +  "/"));
			
		}
		
	});
});

[former_member239819]

Brilliant. Thanks very much 🙂

[former_member239819]

There's a couple of issues with the above....

Firstly, its not the only model I'll be using, so when I add in a name.

this.getView().setModel(oModel,"viewModel");

The binding no longer works in the the view...

value="{myProperty}"  

Also, the onPrevious now crashes out because I've now given it a name...

How do I implement the view to pull in the myProperty ?

Share Alert Moderator Actions

[Joseph_BERTHE]

If you have multiple model, your binding should be :

value="{viewModel>/myProperty}"  
or
value="{viewModel>myProperty}"

[former_member239819]

There's a couple of issues with the above....

Firstly, its not the only model I'll be using, so when I add in a name.

this.getView().setModel(oModel, "viewModel");

The binding no longer works in the the view...

value="{myProperty}"  

Also, the onPrevious now crashes out because I've now given it a name...

[former_member239819]

Thank you!

That's what I thought, but could you give me an example ?

Is the binding context included in the NavTo routing command?

[karthikarjun]

can you share your code in jsbin or plunkr. It would be easy to help you.