Display

Display is a component used by many classes, including DynamicList, Roulette (...) that is used to compute the rendering of an object. It requires Templater.

By default, components that use a Display, will convert any standard configuration object (coming from a JSON configuration for instance) to a Display. For instance, if you use a DynamicList and pass it a standard object for the configuration of the display, DynamicList will automatically convert it to a Display.

The structure of the Display goes as follow:

 {
      template:_STRING_ or _OBJECT_ or false, //Optional, defaults to false
      html:_STRING_ or false, //Optional, defaults to false,
      oml:_OML_ //Optional, the oml for a placeholder, defaults to false,
      css:_STRING_ or _OBJECT_ or false, //Optional, defaults to false,         
 }

Templates

By logic, template supersedes html as it would make no sense to set the display markup twice. If template is set to a string, such as

  {
      template:'MyTemplate'
  }

The value can also be defined as an OSE script (function, method, uxi, ...), here we get the template name by passing the item to a global function

  {
      template:'{{function myGlobalFunction }}'
  }

You can also use inline functions

  {
      template:'{{function if($color === 'red'){return 'RedTemplate';} return 'BlueTemplate'; }}'
  }

Then the Display will fetch the template named 'MyTemplate' in Templater. Now, if the template is set to be bound to a property of an object, in this case, template expects the following format

  {
      template:{
           bind:_PROPERTY_
      }
  }

This tells the Display to use a specific template stored in Templater, and that the name of the template will be found in the value of the property of the object.

For instance, if we have a list of object, and each object has a type property, and that we base the name of the template to use over this property (provided each template is already stored in the templater), our configuration would look like this

 let list = [{name:'Hammer', type:'tool'}, {name:'Banana', type:'fruit'}];
 let config = {
      template:{
           bind:'type'
      }
 }

You can also use an OSE expresion/script for the bind. In this case, if the name of the object is invoice, the bound property of the object will be type else it will be category

template:{
    bind:'{{ function if($name === 'invoice'){ return 'type';}  return 'category';} }}'
}

HTML

If you'd rather use the same HTML markup for every item and not store anything in the templater, you can use the html property instead, such as

 {...,
      html:'<span class="name">{{$name}}</span>'
 }

If you wish to know more about how to create dynamic markup, check out the page dedicated to Templater

CSS

Some components also offer to add a css class to the HTML markup representing each object. It works the exact same way as the template property, in the sense that you can use a string as the class

 {
      css:'classA classB'

 }

or you can bind the css class to a property of the object

  {
      css:{
           bind:_PROPERTY_,
           add:_STRING_,
           remove:_STRING_
      }
  }

OML

If you need to render a more complex object via a display (like in the case of a DynamicList that would render different objects per item), you can use the oml property.

 ...,
 oml:{
       "default:Carousel':{
            ...
       }
  }