How to Display a Specific Control Based on Some Value?

Question

I have the following code:

<t:template>
  <Text text="{path: 'dateday', formatter:'.formatdate'}"/>
</t:template>

<t:template>
  <Text text="{path: 'datetime', formatter:'.formatime'}"/>
</t:template>

And I need to display the second template only if the 'dateday' value is null, undefined or empty.

Any idea how to achieve this in XML?

Off-topic but if the `datetime` is coming from an OData service, you might want to use a [built-in type](https://stackoverflow.com/a/47603778/) instead of a custom formatter. — Boghyon Hoffmann, Jun 29 '18 at 20:04

score 1 · Accepted Answer · answered Jun 29 '18 at 19:51

All controls can be displayed or hidden via the property visible (or setVisible). Combine it with expression binding and the second Text is only visible when dateday value is not falsy.

<Text
  text="{
    path: 'datetime',
    formatter:'.formatime'
  }"
  visible="{= !!${dateday}}"
/>

score 0 · Answer 2 · answered Jun 29 '18 at 19:54

ok so I figured it out using 'visible' property

<t:template visible="{= ${/dateday} !== null }">
<Text text="{path: 'dateday', formatter:'.formatday'}"/>
</t:template>

<t:template visible="{= ${/dateday} === null }">
<Text text="{path: 'datetime', formatter:'.formatime'}"/>
</t:template>

Hope it can help others :P

How to Display a Specific Control Based on Some Value?

2 Answers2