if

The <template:if> instruction evaluates a condition expressed via existing OpenUI5 data binding features, such as extended syntax; in the preprocessing it is removed or replaced by its child elements based on the value of this condition.

For more information, see Using Extended Syntax to Add Filters and Sorters

You set the condition to the test attribute of the if instruction. It is recommended to use expression binding if you need to write logical expressions or convert values into Booleans. You can also use formatter functions, as with any OpenUI5 binding, such as sap.ui.model.odata.AnnotationHelper.isMultiple. For more information, see sap.ui.model.odata.AnnotationHelper.isMultiple in the API Reference.

Note The test condition is treated as a property binding and the result is converted to the Boolean type according to the usual JavaScript rules, with the exception of the string "false", which is converted to the Boolean false for convenience. For more information about the JavaScript rules, see the ECMAScript® Language Specification on the ECMA International website.

Example:

"if" Instruction to Include an Image Only if the URL is Set

The output of the template below after preprocessing is as follows: If the test condition does not hold, the <template:if> node is dropped and if the test condition holds, the node is replaced by its content.

#!xml
<template:if test="{meta>ImageUrl}">
  <Image src="{path: 'meta>ImageUrl', formatter: 'sap.ui.model.odata.AnnotationHelper.format'}" />
</template:if>

Note

The example above shows a shortcut syntax where <template:then> can be omitted in case no <template:else> is present.

Example:

"if/then/else" Instruction to Include an Image Only if the URL is Set and Display a Title Otherwise

The syntax of this example is more complex due to the additional <template:then>/<template:else> elements. The output is the <template:if> node replaced by the content of the appropriate child node.

Sample Code

#!xml
<template:if test="{meta>ImageUrl}">
  <template:then>
    <Image src="{path: 'meta>ImageUrl', formatter: 'sap.ui.model.odata.AnnotationHelper.format'}" />
  </template:then>
  <template:else>
    <Text text="{path: 'meta>Title/Value', formatter: 'sap.ui.model.odata.AnnotationHelper.format'}" />
  </template:else>
</template:if>

Example:

if/then/else Instruction

It is even possible to check multiple conditions in one <template:if> construct using the <template:elseif> element as shown in the example below.

#!xml
<template:if test="{meta>ImageUrl}">
  <template:then>
    <commons:Image src="{path: 'meta>ImageUrl', formatter: 'sap.ui.model.odata.AnnotationHelper.format'}" />
  </template:then>
  <template:elseif test="{meta>TypeImageUrl}">
    <commons:Image src="{path: 'meta>TypeImageUrl', formatter: 'sap.ui.model.odata.AnnotationHelper.format'}" />
  </template:elseif>
  <template:else>
    <commons:TextView text="{path: 'meta>Title/Value', formatter: 'sap.ui.model.odata.AnnotationHelper.format'}" />
  </template:else>
</template:if>