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

    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,

    Add comment
    10|10000 characters needed characters exceeded

  • Sep 08, 2017 at 09:03 PM

    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 +  "/"));
    			
    		}
    		
    	});
    });
    
    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...

    value="{myProperty}"  

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

    Add comment
    10|10000 characters needed characters exceeded