Skip to main content
System StatusContact Support
VersionOne Community

Continuum Canvas Layout Reference

Overview 

A Layout definition is a JSON document with many different properties. The schema of the definition can vary depending on the choices for the required properties.

Here's an example of a Layout Definition:

{
    "type": "template",
    "include_html_markup": true,
    "styles": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.css"
        }
    ],
    "scripts": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.js"
        }
    ],
    "templates": [
        {
            "project": "tutorials",
            "component": "layouts",
            "name": "hello.html"
        }
    ]
}

type

The type of the Layout. Valid options are:

  • template - uses properties to construct a well formed HTML page from CSS, HTML and JS resources.
  • series - less rigid than a template, simply concatenates the resources from a number of steps into a response.

session

If provided, the provided string value will be used as a key for the Session. If omitted, the default is the Layout name.

clear_session

If 'true', the named Session will be cleared every time this Layout is requested. If omitted, the default is 'false'.

libs

Optional. A list of built-in Javascript libraries to be included in the Layout. Currently supported libs are:

 

If the Layout type is series, 'libs' will only be included if include_html_markup is true.

  • maestro - CSS styles to match the Continuum UI theme
  • catoapi - the Automate REST API. (Can only be used when Canvas is authenticated.)
  • maestroapi - the Deploy REST API. (Can only be used when Canvas is authenticated.)
  • bootstrap - the open source Bootstrap framework. (Includes Bootbox)
  • jqueryui - the open source jQuery UI UI elements
  • flot - the open source Flot charting tool
  • jsoneditor - the open source JSON Editor tool

include_html_markup

Optional. If 'true', the page flow of this Layout will be marked up with a standard 'head' and 'body' elements, as an HTML5 page.

include_html_title

Optional. If set, will be the title attribute of the page.

include_session

Optional. If 'true', a script block will be added at the bottom of this Layout, and will define a global Javascript variable __SESSION containing the current Session collection.

The 'template' Layout type

The following properties are valid for template Layout types.

templates

A list of Canvas resources to be included in the HTML portion of the page flow of this Layout. Valid properties are:

  • name - Required.
  • project - Optional. If omitted, will inherit from the Layout.
  • component - Optional. If omitted, will inherit from the Layout.
  • visible - Optional. - If false, "false", 0 or "0", this template item will be skipped. If omitted, or any other value, this property is ignored and the item will be included. Useful for controlling Layout content contextually using [$variables$] in the Layout definition.

style

Optional. A list of Canvas resources to be included as inline styles in the head of the page flow of this Layout. Valid properties are:

  • name - Optional. Must use url if not using name.
  • project - Optional. If omitted, will inherit from the Layout.
  • component - Optional. If omitted, will inherit from the Layout.

  • url - Optional. Instead of a Canvas resource by name, a url can be specified. A <link> reference will be added with the provided url as it's href attribute. Useful for including trusted style sheets, such as from your company web site or the application hosting Canvas.

  • visible - Optional. - If false, "false", 0 or "0", this template item will be skipped. If omitted, or any other value, this property is ignored and the item will be included. Useful for controlling Layout content contextually using [$variables$] in the Layout definition.

scripts

Optional. A list of Canvas resources to be included as script blocks at the end of the page flow of this Layout.

Valid properties are:

  • name - Optional. Must use url if not using name.
  • project - Optional. If omitted, will inherit from the Layout.
  • component - Optional. If omitted, will inherit from the Layout.

  • url - Optional. Instead of a Canvas resource by name, a url can be specified. A <script> block will be added with the provided url as it's src attribute. Useful for including trusted hosted libraries, such as Google Hosted Libraries.

  • visible - Optional. - If false, "false", 0 or "0", this template item will be skipped. If omitted, or any other value, this property is ignored and the item will be included. Useful for controlling Layout content contextually using [$variables$] in the Layout definition.

The 'series' Layout type

The following properties are valid for series Layout types.

steps

A list of items that will be concatenated in order into a response.

Valid properties are:

  • name - Optional. If provided, the references Canvas resource will be included.
  • project - Optional. Accompanies name or widget. If omitted, will inherit from the Layout.
  • component - Optional. Accompanies name or widget. If omitted, will inherit from the Layout.

  • lib - Optional. Instead of a Canvas resource by name, a single built-in lib can be included. 'libs' are css and/or script blocks.

  • literal - Optional. A list of literal text items to include.

  • widget - Optional. A Widget resource - will be rendered on the server and included in the Layout response.

  • visible - Optional. - If false, "false", 0 or "0", this template item will be skipped. If omitted, or any other value, this property is ignored and the item will be included. Useful for controlling Layout content contextually using [$variables$] in the Layout definition.

options

Layout support several options:

anonymous

Layouts are served anonymously by default, so anyone can see them, even if not logged in to Continuum. To secure a Layout, add the anonymous option with a value of false.

content_type

Layouts are assumed to be web pages, so the default HTTP Content-Type is text/html. Developers can force a specific Content-Type using this property.

step_separator

Valid only if the Layout type is series, the value of this property will be placed between each 'step' in the series.

  • Was this article helpful?