How to use if / else condition in XML-View sapUI?

Question

How can I implement the if / else condition in an XML representation in SapUI5 that uses the flag (condition) from 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 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 this than to implement an over-quality XML preprocessor?

Answer 1

OpenUI5 Supports Preprocessing Instructions and Expression Linking

With preprocessing instructions you can do things 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'm not sure if test in the first line checks for null/not null or true/false .

An expression binding can be useful here: it allows you to create complex expressions in curly braces

 <template:if test="{= ${marketed} === true}"> 

---

Edit

The following solution may be simpler, but it seems a bit hacked.

Insert both elements into the XML view, but switch visibility using complex expression bindings.

 <Label text="product is marketed" visible="{= ${marketed} === true}"/> <Image src="path.jpg" visible="{= ${marketed} === false}"/> 

Answer 2

I'm not sure I have your requirement, but it seems that just binding the visible attribute to the market flag will do.

If you need to link in the reverse order, you can use expression binding, for example

  visible="{= !${/marketed}}" 

Answer 3

If I understand your question, you can use the format function.

 <Label text="{ path: 'marketed' formatter: '.formatter.marketed' }"/> 

.formatter.marketed in this example refers to a function in a separate formatter.js file:

 marketed: function(marketed) { if(marketed) { return 'product is marketed'; } else { return ''; } } 

See the ui5 SDK for hpow for the proper formatting function:

https://sapui5.hana.ondemand.com/sdk#docs/guide/0f8626ed7b7542ffaa44601828db20de.html

In your example, since this is just a label, we return an empty string, so it will be empty. The shortcut will still be displayed, but it is an empty line, so nothing is visible, so the user will never recognize it. I'm not quite sure, but if you return undefined instead of an empty string, the label may not appear at all.