Continuum Canvas Layout Reference

Last updated
Save as PDF

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.