How can I implement an if-else condition in a XML-View in SAPUI5 that uses a flag (condition) from a JSONModel
?
So far I have a Controller:
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel" ], function (Controller, JSONModel) { "use strict"; return Controller.extend("sap.ui.demo.myApp.myController", { onInit: function () { //// set data model on view var oData = { title: "A cool title", values: [{name: "Text 1", marketed: true}, {name: "Text 2", marketed: false}, {name: "Text 3", , marketed: true}] }; var oModel = new JSONModel(oData); this.getView().setModel(oModel); } }); });
and a View:
<mvc:View controllerName="sap.ui.demo.myApp.myController" xmlns="sap.m"> <!-- using aggregation binding --> <Panel expandable="true" expanded="true" headerText="{/title}" width="100%" content="{/values}"> <content> <Label text="{name}"/> <!-- if {marketed} <Label text="product is marketed"/> else add nothing --> </content> </Panel> </mvc:View>
Edit:
Is there a better way to do it than by implementing an overkill-feeling XML-Preprocessor?
Advertisement
Answer
OpenUI5 supports Preprocessing Instructions and Expression Binding.
With Preprocessing Instructions you can do stuff like this:
<template:if test="{marketed}"> <template:then> <Label text="product is marketed" /> </template:then> <template:else> <Image src="path.jpg" /> </template:else> </template:if>
I am not sure if the test
in the first line tests for null/not null
or true/false
. This is where the Expression Binding might be handy: it allows for complex expressions within the curly brackets:
<template:if test="{= ${marketed} === true}">
Edit
The following solution might be more simple, but seems a little hacky.
Embed both elements in your XML view, but toggle the visibility with complex expression binding:
<Label text="product is marketed" visible="{= ${marketed} === true}"/> <Image src="path.jpg" visible="{= ${marketed} === false}"/>