Element Binding

Simple Formatter

A Simple example to convert data from a model.

Data

{
    "article" : {
        "caption" : "hello world"
    }
}

helloworld/controller/SimpleFormatter.controller.js

/**
* Simple Formatter Controller.
*/
sap.ui.define(['pks/ui5strap/viewer/Controller', 'sap/ui/model/json/JSONModel'], function(Controller, JSONModel){
	
    "use strict";
	
    var controllerImpl = {
        /**
        * Called when the view has been initialized.
        */
        onInit : function(){
            //We make the data available as model in the view.
            var oData = {
                "article" : {
                    "caption" : "hello world"
                }
            };
		
            var oModel = new JSONModel(oData);
			
            this.getView().setModel(oModel, "DATA");
        }
    };
	
    //Return constructor
    return Controller.extend("mycompany.helloworld.controller.ElementBinding", controllerImpl);

});

helloworld/view/SimpleFormatter.view.xml

<!-- Formatter Example View -->
<sapUiCoreMvc:View controllerName="mycompany.helloworld.controller.ElementBinding" xmlns="pks.ui5strap.bs3" xmlns:sapUiCoreMvc="sap.ui.core.mvc"
                      xmlns:data="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
    <!-- START Page Content -->

    <Container type="Website">
        <!-- We bind the caption to the Heading's text property. The controller's function formatCaption is used to convert the value. -->
        <Heading text="{path:'DATA>/article/caption', formatter:'.formatCaption'}" level="1" />
    </Container>
    
    <!-- END Page Content -->
</sapUiCoreMvc:View>

Table of Contents

Basics

Appendix

Element Binding

Simple Formatter