Skip to main content
System StatusContact Support
VersionOne Community

Continuum Canvas Layout Demos

This feature is available in Ultimate edition only.

editions-u.png

Overview

This article gives several built-in examples of how Continuum Canvas Layouts work.

This article is intended to show several examples of how Layouts works. It does not provide specific details.  Refer to the Continuum Layout Tutorial to look under the hood at some of these demos. On the Canvas Home page, there will be a 'Demos' menu option. 

Below is Here's a brief explanation of each demo, and what it has to offer:

Before You Begin

Please read the introductory documents before starting the Continuum Layout Tutorial.

Log in to Continuum and go to the upper-right menu, select Canvas > Home.

Demos

This demo assumes Canvas is up and running on localhost. Replace localhost with the appropriate hostname in your environment.

Bootstrap

To include Bootstrap in a Layout, add bootstrap to the libs property of the Layout definition.

Bootstrap is a very popular baseline HTML framework for rapid development of a web based UI. It looks and feels a little like Twitter - because it was originally put together by the folks at Twitter!

Bootstrap has comprehensive CSS, as well as useful Javascript features like modal dialogs. For those who like to write script, Bootstrap can easily be controlled by script. For those less script saavy, one of the neat things Bootstrap offers is the ability to build an interactive page with HTML instead of Javscript, by use of special HTML element attributes.

jQuery UI

To include jQuery UI in a Layout, add jqueryui to the libs property of the Layout definition.

Canvas includes jQuery by default, and jQuery UI is available as well. jQuery UI was one of the first (and still regarded as one of the best) collection of reusable UI 'widgets'.

jQuery UI includes Dialogs, Buttons, Tab panels, Drag and Drop, Date/Time pickers and more. While slightly more advanced than Bootstrap, jQuery UI is well powerful enough to help you build any interface you need.

Flot

To include Flot in a Layout, add flot to the libs property of the Layout definition.

Flot is an open source, jQuery charting library. One of the great features of Flot over other tools is it's 100% pure Javascript, no Flash required.

Chart data for Flot charts can be easily obtained using Canvas Widgets, making dynamic charts a breeze.

Datatables

To include Datatables in a Layout, add datatables to the libs property of the Layout definition.

Datatables is an extremely powerful tabular data presentation and editing tool. Data tables can be populated in a range of ways, from direct HTML to Ajax calls.

Canvas Widgets can easily return JSON documents formatted for use by Datatables, as this demo page shows.

Minimal

While the first few demos show different tools for building a user experience, the 'Minimal' demo gives greater detail in how to integrate Widgets into a Layout.

There isn't a lot of visual sizzle in this demo, but under the hood you can see four different approaches to obtaining data via Widgets, and displaying them all on one Layout.

The Minimal demo pulls data from the Task library in the current Continuum installation. If there are no Tasks defined, the results tables will all be empty.

Task Datastore Demo

Finally, the Task Datastore Demo is a full featured demonstration of the following:

  • Creating data in the CSK Datastore using a Task

  • Viewing, Modifying and Deleting from that data using Canvas.

The scenario being demonstrated here is a Task creates a pool of virtual servers for use in daily development/testing. A developer using this Canvas may put a note on a server, 'claiming' it for his use. When the developer is done, he can shut down the virtual machine and delete the server from the list. If an IT admin manually creates a new VM for the pool, he can add it manually.

Feel free to Add, Update and Delete items using the Canvas. If you'd like to see how the data is automatically populated by a Task, import and run this Task.

{
    "Name": "Write Datastore Data", 
    "Parameters": "", 
    "IsDefaultVersion": true, 
    "QueueDepth": "", 
    "Version": 1.0, 
    "Codeblocks": [
        {
            "Steps": [
                {
                    "FunctionXML": "<function name=\"datastore_drop_collection\">\n\t\t\t\t\t<collection input_type=\"text\" label=\"Collection\">task-datastore-demo</collection>\n\t\t\t\t</function>", 
                    "OutputRowDelimiter": 0, 
                    "Locked": false, 
                    "Description": "", 
                    "IsValid": true, 
                    "XPathPrefix": "", 
                    "Commented": false, 
                    "ID": "6f9e5bba-1bd4-11e3-8dd3-c8bcc89c1491", 
                    "Codeblock": "MAIN", 
                    "OutputColumnDelimiter": 0, 
                    "ValueSnip": null, 
                    "OutputParseType": 0, 
                    "Order": 1, 
                    "FunctionName": "datastore_drop_collection"
                }, 
                {
                    "FunctionXML": "<function name=\"loop\">\n\t\t\t\t\t<start input_type=\"text\">1</start>\n\t\t\t\t\t<counter input_type=\"text\">x</counter>\n\t\t\t\t\t<test input_type=\"select\">&lt;=</test>\n\t\t\t\t\t<compare_to input_type=\"text\">10</compare_to>\n\t\t\t\t\t<increment input_type=\"text\">1</increment>\n\t\t\t\t\t<action><function name=\"datastore_insert\">\n\t\t\t\t\t<collection input_type=\"text\" label=\"Collection\">task-datastore-demo</collection>\n\t\t\t\t\t<object_id input_type=\"text\" label=\"ObjectId Variable\" />\n\t\t\t\t\t<pairs is_array=\"true\">\n\t\t\t\t\t\t<pair>\n\t\t\t\t\t\t\t<name input_type=\"text\" label=\"Name\">address</name>\n\t\t\t\t\t\t\t<value input_type=\"text\" label=\"Value\" style=\"width: 50%;\">192.168.10.[[x]]</value>\n\t\t\t\t\t\t</pair>\n\t\t\t\t\t<pair>\n\t\t\t\t\t\t\t<name input_type=\"text\" label=\"Name\">hostname</name>\n\t\t\t\t\t\t\t<value input_type=\"text\" label=\"Value\" style=\"width: 50%;\">server-[[x]]</value>\n\t\t\t\t\t\t</pair></pairs>\n\t\t\t\t</function></action>\n\t\t\t\t\t<max input_type=\"text\">10</max>\n\t\t\t\t</function>", 
                    "OutputRowDelimiter": 0, 
                    "Locked": false, 
                    "Description": "", 
                    "IsValid": true, 
                    "XPathPrefix": "", 
                    "Commented": false, 
                    "ID": "5609a6b5-1bd4-11e3-b484-c8bcc89c1491", 
                    "Codeblock": "MAIN", 
                    "OutputColumnDelimiter": 0, 
                    "ValueSnip": null, 
                    "OutputParseType": 0, 
                    "Order": 2, 
                    "FunctionName": "loop"
                }
            ], 
            "Name": "MAIN"
        }
    ], 
    "ID": "77093f42-1bc9-11e3-a224-c8bcc89c1491", 
    "Status": "Development", 
    "Code": "Demo 042", 
    "Description": "Will write some sample data into the 'task-datastore-demo' datastore collection.", 
    "UseConnectorSystem": false, 
    "MaxVersion": 1.0, 
    "NextMinorVersion": "1.001", 
    "NextMajorVersion": "2.000", 
    "NumberOfApprovedVersions": 0, 
    "OriginalTaskID": "77093f42-1bc9-11e3-a224-c8bcc89c1491", 
    "ConcurrentInstances": ""
}

To import the following Task, log in and go to Tasks -> Import a Backup File. Paste the Task definition into the big box and click Import.

{
    "Name": "Write Datastore Data", 
    "Parameters": "", 
    "IsDefaultVersion": true, 
    "QueueDepth": "", 
    "Version": 1.0, 
    "Codeblocks": [
        {
            "Steps": [
                {
                    "FunctionXML": "<function name=\"datastore_drop_collection\">\n\t\t\t\t\t<collection input_type=\"text\" label=\"Collection\">task-datastore-demo</collection>\n\t\t\t\t</function>", 
                    "OutputRowDelimiter": 0, 
                    "Locked": false, 
                    "Description": "", 
                    "IsValid": true, 
                    "XPathPrefix": "", 
                    "Commented": false, 
                    "ID": "6f9e5bba-1bd4-11e3-8dd3-c8bcc89c1491", 
                    "Codeblock": "MAIN", 
                    "OutputColumnDelimiter": 0, 
                    "ValueSnip": null, 
                    "OutputParseType": 0, 
                    "Order": 1, 
                    "FunctionName": "datastore_drop_collection"
                }, 
                {
                    "FunctionXML": "<function name=\"loop\">\n\t\t\t\t\t<start input_type=\"text\">1</start>\n\t\t\t\t\t<counter input_type=\"text\">x</counter>\n\t\t\t\t\t<test input_type=\"select\">&lt;=</test>\n\t\t\t\t\t<compare_to input_type=\"text\">10</compare_to>\n\t\t\t\t\t<increment input_type=\"text\">1</increment>\n\t\t\t\t\t<action><function name=\"datastore_insert\">\n\t\t\t\t\t<collection input_type=\"text\" label=\"Collection\">task-datastore-demo</collection>\n\t\t\t\t\t<object_id input_type=\"text\" label=\"ObjectId Variable\" />\n\t\t\t\t\t<pairs is_array=\"true\">\n\t\t\t\t\t\t<pair>\n\t\t\t\t\t\t\t<name input_type=\"text\" label=\"Name\">address</name>\n\t\t\t\t\t\t\t<value input_type=\"text\" label=\"Value\" style=\"width: 50%;\">192.168.10.[[x]]</value>\n\t\t\t\t\t\t</pair>\n\t\t\t\t\t<pair>\n\t\t\t\t\t\t\t<name input_type=\"text\" label=\"Name\">hostname</name>\n\t\t\t\t\t\t\t<value input_type=\"text\" label=\"Value\" style=\"width: 50%;\">server-[[x]]</value>\n\t\t\t\t\t\t</pair></pairs>\n\t\t\t\t</function></action>\n\t\t\t\t\t<max input_type=\"text\">10</max>\n\t\t\t\t</function>", 
                    "OutputRowDelimiter": 0, 
                    "Locked": false, 
                    "Description": "", 
                    "IsValid": true, 
                    "XPathPrefix": "", 
                    "Commented": false, 
                    "ID": "5609a6b5-1bd4-11e3-b484-c8bcc89c1491", 
                    "Codeblock": "MAIN", 
                    "OutputColumnDelimiter": 0, 
                    "ValueSnip": null, 
                    "OutputParseType": 0, 
                    "Order": 2, 
                    "FunctionName": "loop"
                }
            ], 
            "Name": "MAIN"
        }
    ], 
    "ID": "77093f42-1bc9-11e3-a224-c8bcc89c1491", 
    "Status": "Development", 
    "Code": "Demo 042", 
    "Description": "Will write some sample data into the 'task-datastore-demo' datastore collection.", 
    "UseConnectorSystem": false, 
    "MaxVersion": 1.0, 
    "NextMinorVersion": "1.001", 
    "NextMajorVersion": "2.000", 
    "NumberOfApprovedVersions": 0, 
    "OriginalTaskID": "77093f42-1bc9-11e3-a224-c8bcc89c1491", 
    "ConcurrentInstances": ""
}

Data can also be added to the Datastore for this example using the Command Line tools. To add a document using the tools:

ctm-create-document -c task-datastore-demo -t '{"hostname" : "server-12", "address" : "192.168.10.12"}'
  • Was this article helpful?