Show TOC

Using Complex Syntax in XML and HTML ViewsLocate this document in the navigation structure

Example, how complex syntax can be used for calculated fields in XML and HTML views and in JS views.

In XML views, you use complex syntax for calculated fields as follows:

<mvc:View controllerName="testdata.complexsyntax" xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:table="sap.ui.table"
    xmlns:html="http://www.w3.org/1999/xhtml">
    <html:h2>
        <Label text="Hello Mr. {path:'/singleEntry/firstName', formatter:'.myFormatter'}, {/singleEntry/lastName}"></Label>
    </html:h2>
    <table:Table rows="{/table}">
        <table:columns>
            <table:Column>
                <Label text="Name"></Label>
                <table:template>
                    <TextField value="{path:'gender', formatter:'.myGenderFormatter'} {firstName}, {lastName}"></TextField>
                </table:template>
            </table:Column>
            <table:Column>
                <Label text="Birthday"></Label>
                <table:template>
                    <TextField value="{parts:[{path:'birthday/day'},{path:'birthday/month'},{path:'birthday/year'}], formatter:'my.globalFormatter'}"></TextField>
                </table:template>
            </table:Column>
        </table:columns>
    </table:Table>
    <html:h2>
        <Label text="A type test: {path:'/singleEntry/amount', type:'sap.ui.model.type.Float', formatOptions: { minFractionDigits: 1}} EUR"></Label>
    </html:h2>
</mvc:View>

In HTML views, you use complex syntax for calculated fields as follows:

<template data-controller-name="testdata.complexsyntax">
    <div>
        <h2><div data-sap-ui-type="sap.ui.core.HTML" id="MyHTMLControl" data-content="<div>Hello Mr. {/singleEntry/firstName}, {/singleEntry/lastName}</div>"></div></h2>
        <div data-sap-ui-type="sap.ui.table.Table" id="MyTable" data-rows="{/table}">
            <div data-sap-ui-aggregation="columns">
                <div data-sap-ui-type="sap.ui.table.Column">
                    <div data-sap-ui-type="sap.ui.commons.Label" data-text="Name"></div>
                    <div data-sap-ui-aggregation="template">
                        <div data-sap-ui-type="sap.ui.commons.TextField" data-value="{firstName}, {lastName}"></div>
                    </div>
                </div>
                <div data-sap-ui-type="sap.ui.table.Column">
                    <div data-sap-ui-type="sap.ui.commons.Label" data-text="Birthday"></div>
                    <div data-sap-ui-aggregation="template">
                        <div data-sap-ui-type="sap.ui.commons.TextField" data-value="{parts:[{path:'birthday/day'},{path:'birthday/month'},{path:'birthday/year'}], formatter:'my.globalFormatter'}"></div>
                    </div>
                </div>
            </div>
        </div>
        <h2><div data-sap-ui-type="sap.ui.commons.Label" id="MyLabelType" data-text="A type test: {path:'/singleEntry/amount', type:'sap.ui.model.type.Float', formatOptions: { minFractionDigits: 1}} EUR"></div></h2>
    </div>
</template>

Example of the JSView. It is not declarative view, but you may use the same syntax as in XML- and HTMLView, just do not forget to pass a controller instance as a parameter

sap.ui.jsview("testdata.complexsyntax", {
    
    getControllerName: function() {
        return "testdata.complexsyntax";
    },

    /**
     * 
     * @param oController may be null
     * @returns {sap.ui.cre.Control}
     */
    createContent: function(oController) {
        var c = sap.ui.commons;
        var aControls = [];
        var oLabel = new c.Label({text:"Hello Mr. {path:'/singleEntry/firstName', formatter:'.myFormatter'}, {/singleEntry/lastName}"}, oController);
        aControls.push(oLabel);
        
        var oTable = new sap.ui.table.Table({rows:"{/table}"});
        var oColumn = new sap.ui.table.Column();
        var oLabel2 = new c.Label({text:"Name"});
        var oTextField = new c.TextField({value:"{path:'gender', formatter:'.myGenderFormatter'} {firstName}, {lastName}"}, oController);
        oColumn.setLabel(oLabel2);
        oColumn.setTemplate(oTextField);
        oTable.addColumn(oColumn);
        aControls.push(oTable);
        var oLabel2 = new c.Label({text:"{path:'/singleEntry/amount', type:'sap.ui.model.type.Float'}"});
        aControls.push(oLabel2);
        return aControls;
    }
});

Have a look at a complete UI5 Application example