Visual Designer

In the Output Editor you get the option to select the fresh Visual for playback, this requires you to set a fixed duration for the Visual playback time.

Refer to Visual Designer for the usage of dynamic data in your text elements. With dynamic data you are able to show for example Nowplaying or Scheduling information in the Visual.

With the Media Layer you can select still-image from your Media Assets list. The Visual Player in the Outputs will automatically load the correctly sized version of this image and will make sure that the Visual transition can only be started after the media is loaded.

Refer to Visual Designer for the different ways to utilize dynamic data for these urls.

💡

Did you know that you can also utilize the Visual Designer in HTML layers? This enables you to automatically populate the custom HTML with all the available dynamic data in the system.

Also check Output Settings for re-using certain elements (like a station logo) in every Visual automatically.

Because the HTML layer is rendered dynamically on every relevant data change injecting custom JS this way is not supported and the code will not be executed. Take a look at the Output Settings and 👩‍💻Develop with VRA for these Custom JS use cases.

Make use of the developed Snippets from Output Settings. The selected snippet is sized and positioned relatively to the size of the layer.

yaml
# NP Music Artist + Title
{{ vra.np.music.artist }}
{{ vra.np.music.title }}

# Scheduling Onair Program Title
{{ vra.schedule.onair.title }}

json
# data structure:
{
  "vra": {
    "variables": {
      "field": {
        "list": ["item1", "item2", "item3"]
      }
    }
  }
}

yaml
{{ vra.variables.field.list.2 }} # outputs: item2 

yaml
{{ vra.variables.api_x.field.deep-123.1.content:encoded }} # does not work

{{ vra.variables.api_x.field.[deep-123].1.[content:encoded] }} # works

yaml
# Before
{{ vra.variables.html_content }}

# After: renders html content
{{{ vra.variables.html_content }}}