Skip to Content

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

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?

create1.png (48.0 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Sep 08, 2017 at 11:56 AM


    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.


    Add comment
    10|10000 characters needed characters exceeded

  • Sep 08, 2017 at 09:03 PM

    Here is the code :


    <mvc:View xmlns:html="" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="myApp.controller.View1" displayBlock="true">
    			<Page title="{i18n>title}">
    				    <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"/>

    Controller :

    ], function(Controller, JSONModel) {
    	"use strict";
    	return Controller.extend("myApp.controller.View1", {
    		onInit: function(){
    			var oModel = new JSONModel({
    				Questions : [
    					{ myProperty: 'AAA' },
    					{ myProperty: 'BBB' },
    					{ myProperty: 'CCC' }
    			var oContext = oModel.createBindingContext("/Questions/1/");
    		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;
    			this.getView().setBindingContext(oModel.createBindingContext("/Questions/" + newIndex +  "/"));
    Add comment
    10|10000 characters needed characters exceeded

  • Sep 08, 2017 at 07:58 PM

    Thank you!

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

    Is the binding context included in the NavTo routing command?

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 20, 2017 at 03:40 PM

    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...


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

    Add comment
    10|10000 characters needed characters exceeded