Flow.JS release - now with conditionals!

#1

Hello Everyone,

We’re excited to announce our latest updates to Flow.js, our JavaScript library that provides bindings between HTML elements in your user interface and variables and methods in your project’s model.

This release of Flow.js includes several new features around showing UI elements conditionally, based on the value of model variables.

Personally, I’m excited about this new capability. It’s an easy way to make simulations more lively, without a need to do any Javascript or other programming. Use this to selectively display pictures, text, videos, etc. For example, you may show a congratulatory message when the variable "revenue " is greater than 1000.

<div data-f-showif="revenue | greaterThan(1000)"/>Nice job, you've met your goals for the quarter!</div>

I think this demonstrates why the Flow.JS framework is so useful. The HTML remains clear and readable – easy to understand or to change.

Highlights of this release:

  • New attributes data-f-showif and data-f-hideif show and hide DOM elements.
  • New converters for booleans (ifTrue, ifFalse) and number comparison (greaterThan, lessThan, etc.) let you show different text depending on the value of your model variable.
  • There’s also a new “how to” that goes through these and other options for conditional display in detail.

The new version of Flow.js is accessible at: https://forio.com/tools/js-libs/flow/0.12.0/flow.js and https://forio.com/tools/js-libs/flow/latest/flow.js.

Complete release notes are below. As always, Epicenter release notes for this and other releases are available at: https://forio.com/epicenter/docs/public/releases/.

Happy modeling!

WILL

Flow.js 0.12.0 Release Notes

Release Date: 5/18/2017

Flow.js 0.12.0 Released

The Flow.js JavaScript library has been updated to version 0.12.0.

New Features

This release includes several new features to support showing particular UI elements conditionally, based on the value of model variables.

  • New ‘toggle’ attributes for showing and hiding elements conditionally:

      <div data-f-showif="widgets | greaterThan(50)"/>Nice job, we've sold plenty of widgets!</div>

  • New number comparison converters, which allow you to convert from a (numeric) model to another value of your choosing:

      <span data-f-bind="widgets | greaterThan(50, 'nice job!', 'not enough widgets')"></span>

  • New Boolean conditional converters, which allow you to convert from a model variable to a boolean value, or another value of your choosing:

      <span data-f-bind="sampleVar | ifTrue('yes! please move forward', 'not ready to proceed')"></span>

Improvements

There are a few minor improvements, including:

There are also a few technical changes, including:

  • It is now recommended to move to jquery 3. The upcoming 1.0 release of Flow.js will drop support for jquery 2.

  • Under the hood, more complete cleanup of the “unbind” operation.

#2