Sponsor

Expressions

Expressions are used throughout VJSF to provide dynamic functionalities like conditional rendering, fetching items of a select component, etc.

There are 3 types of expressions supported for the time being : "js-fn", "js-eval" and "js-tpl". All of them are compiled to Javascript functions that accept the same parameters.

Parameters

  • data - it varies depending on the expression you are using, it can be the data from the current node, an item in a select component, etc.
  • options - the options object passed to VJSF then merged with contextual options from all parent nodes.
  • context - shortcut for "options.context".
  • display - the display object used to manage responsive layouts.
  • layout - normalized layout information of the current component.
  • readOnly - shortcut for "options.readOnly".
  • summary - shortcut for "options.summary".
Content of the display parameter: 
{
  width: number // the width of the parent container
  xs: boolean,
  sm: boolean,
  smAndDown: boolean,
  smAndUp: boolean,
  md: boolean,
  mdAndDown: boolean,
  mobile: boolean, // alias for mdAndDown
  mdAndUp: boolean,
  lg: boolean,
  lgAndDown: boolean,
  lgAndUp: boolean,
  xl: boolean,
  xlAndDown: boolean,
  xlAndUp: boolean,
  xxl: boolean
}

Pure/impure expressions

Expressions are considered as pure by default. It means that they should only use their input parameters, and no global variable. This allows for caching optimizations. It is possible to declare that an expression is not pure like this:

{
  expr: '!!window.myVar',
  pure: false
}

This kind of expression has access to some extra parameters:

  • rootData - the root data of this vjsf instance.
  • parent - wrapper to access data from the parent node (use parent.data or go higher in the hierarchy with parent.parent).

Type js-eval

This type of expression lets you write a single JS statement that will be evaluated and returned. It is compiled like this :

 new Function(...params, 'return (' + expression + ')')

This is the default type when the expected result of the expression is a boolean or a complex object (like the if property).

Type js-tpl

This type of expression lets you write a JS template literal that will be evaluated and returned. It is compiled like this :

 new Function(...params, 'return `' + expression + '`')

This is the default type when the expected result of the expression is a string (like the url property in a fetch instruction).

Type js-fn

This type of expression lets you write the full body of a JS function including its return statement. It is compiled like this :

 new Function(...params, expression)