How To: Show UI Elements Conditionally

This example steps through how to use Flow.js to show particular UI elements conditionally, based on the values of model variables.

What You Need

A model variable
Some text or a DOM element that should appear conditionally, based on the value of a model variable
A user interface for your project that uses Flow.js
- You can create this interface using the Interface Builder
- Or, you can create this interface by hand, using Flow.js directly
- Either way, make sure you're including Flow.js and its dependencies in your HTML file

Solution Options

There are several ways to have text or DOM elements appear conditionally. You can:

Use the built-in show and hide attributes.
Use the built-in number comparison converters.
Bind model variables to names of CSS classes.
Create your own converter.
Create your own attribute.

Solution Details

Use the built-in show and hide attributes.

This solution works well if your variable is boolean or numeric and you want to show or hide an entire DOM element.

The data-f-showif and data-f-hideif attributes allow you to display DOM elements based on either the value of the model variable (true or false), or the value of a comparison using a model variable.

If the model variable already has a boolean value, you can use it directly:
```
 <div data-f-showif="sampleBooleanModelVariable">This div appears if the model variable is true</div>
```
If the model variable is numeric, you can convert it to a boolean value using a number comparison converter:
```
 
 <div data-f-showif="widgets | greaterThan(50)"/>Nice job, we've sold plenty of widgets!</div>
```
More information: Binding with showif, Binding with hideif, Number Comparison Converters, and the built-in number comparison attributes solution below.
Use the built-in number comparison converters.

This solution works well if your model variable is numeric and you want to show different text depending on the value.

The Number Comparison Converters include greaterThan, greaterThanEqual, equalsNumber, lessThan, lessThanEqual. Converters allow you to change how data is displayed. For each converter, the original format is the value of your model variable, and the resulting "format" is a boolean value, or another value of your choosing. To use the converters, use the | (pipe) character within the value of any data-f attribute.
```
 
 <span data-f-value="widgets | greaterThan(50, 'Nice job!', 'Not enough widgets!')"></span>
```
More information: Number Comparison Converters.
Bind model variables to names of CSS classes.

This solution works well if you want to show or hide an element, or show the same element in a different way. (It is not as convenient for showing one of two different options.)

Add the built-in data-f-class attribute to an HTML element, and set the value to the name of the model variable. Then add classes to your CSS code whose names include possible values of that model variable.
```
 <style type="text/css">
   .North { color: grey }
   .South { color: purple }
   .East { color: blue }
   .West { color: orange }
   .NotSet { visibility: hidden; display: none }
 </style>

 <div data-f-class="salesMgr.region">
   Content colored by region
 </div>
```
More information: Binding with Style: Using the Class Attribute.

Create your own converter.

This solution works well if you want to separate the content being displayed from the inline HTML.

Converters allow you to change how data is displayed. For each converter, the original format is the value of your model variable, and the resulting "format" is another value of your choosing.

First, create and register your own converter.

 // example custom converters
 // take the value of a numeric model variable, convert to a string

 Flow.dom.converters.register('limit50', function (value) { 
     return (value < 50) ? 'Not enough widgets!' : 'Nice job!';
 });

 Flow.dom.converters.register('limitBy', function (limit, value) { 
     return (value < limit) ? 'Not enough widgets!' : 'Nice job!';
 });

Then, use that converter in your interface.

 // use the converter in your interface
 // displays 'Not enough widgets!' or 'Nice job!', depending on Sales
 <div><span data-f-bind="Sales | limit50"></span></div>
 <div><span data-f-bind="Sales | limitBy(50)"></span></div>

More information: Make your Own Converters.

Create your own attribute handler.

This solution works well if you want to take one or more model variables and combine their values in a single output element. It can also be used to show UI elements conditionally, based on the value of a model variable. Creating an attribute handler is more powerful than creating a converter, because the attribute handler has access to the DOM element.

Built-in attribute handlers like data-f-value automatically bind variables in your project's model to particular HTML elements. However, you can also create your own.

First, create and register your own attribute handler.
```
 Flow.dom.attributes.register('limit50Attr', '*', function (value) {
     if (value < 50) { this.hide(); }
 });

 Flow.dom.attributes.register('chooseVar', '*', function(args) {
     if (args["Sales"] < 50) {
         this.html(args["UnhappyMessage"]);
     } else {
         this.html(args["HappyMessage"]);
     }
 });
```
Then, use that attribute in your interface.
```
 <div data-f-limit50Attr="Sales">Fantastic sales results this year!</div>

 <div data-f-chooseVar="HappyMessage,UnhappyMessage,Sales"></div>
```
More information: Attribute Manager.