1. Developer Documentation
  2. Themes (Interface)

Page Canvas

The Page Canvas interface is a quick way to model a new Ajax created page within VO. The concept of this model is to emulate the standard OOP parent child inheritance within the context of JS. At the time of this writing (Dec 4, 2017) it functions but the JS requires more standardization.

There are three things you need to know in order to initialize a VO Page Canvas interface:

  1. Page Canvas controller map ( base/action/admin/core/page-canvas.php )
  2. Markup template to be referenced in the controller map
  3. JavaScript initializer

There is a boilerplate VO Page Canvas flow setup to demonstrate how it works.

Template Markup

Create a template with the body markup you require.

theme/admin/VO4/core/boilerplate.tpl

<div class="block">
    <div class="toolbar vo-toolbar">
        <a href="#" class="vo-click-me toolbar-btn btn btn-default">Click Me</a>
    </div>
    <div class="block-body">

    </div>
</div>

Controller Mapping

Then decide on a unique page namespace and add that to the Page Canvas controller. We will use boilerplate. Notice the template reference there too.

case "boilerplate":
	$tpl->display( "core/boilerplate.tpl" );
	break;

JavaScript Init

Next you will want to initialize the page place holder in the JavaScript.

theme/admin/VO4/ui/js/boilerplate-page-canvas.js

$(document).ready(function() {

    // PAGE CANVAS - People Importer
    Boilerplate = (function () {
        // Constructor
        var $this = function (settings) {
            // Set these arguments for the parent class constructor
            $this.base.constructor.apply(this, arguments);
        };

        // Extend Class methods
        extend(VOIPage, $this, {
            pageNamespace: 'boilerplate',
            initPage: function (pageHeader, pageBody) {
                var obj = this;
                // Setup interface events here
                // pageHeader is the jQuery object for the header
                // pageBody is the jQuery object for the body
                var toolbar = pageBody.find('div.vo-toolbar');
                $('.vo-click-me',toolbar).click(function () {
                    $('.block-body', pageBody).append('<p>I\'ve been clicked</p>');
                });

            },
            close:function(){
                $this.base.close.context(this)();
                $('.block-body', this.pageBody).empty();
            },
            load: function () {} // This shuts off the default load
        });

        return $this;
    })();

    $boilerPage = new Boilerplate({
        pageSubject: 'Boilerplate Page',
        pageInstance: 'boilerplate-page',
        serverController: '/action/admin/core/boilerplate'
    });
});

Test Example

You can test this example here: http://staging.sabramedia.com/admin/ppl/user/

Run the following code in your browser console command line:

$boilerPage.open()

 

Notice how clicking the toolbar button adds the paragraphs, then closing the page cleans them up because the close method was extended in the child class we created. The parent base close method was called closing the page

$this.base.close.context(this)();

Then we performed the cleanup in our subclass method after this.

Method Reference

This approach is based on the VOI wrapper ( theme/admin/VO4/ui/js/voi.js ) and the pageCanvas wrapper ( theme/lib/js/sabramedia-v4.js )

Methods in the parent class in order to expedite some basic functionality via the calling subclass.

  • initPage
  • getId
  • insert
  • update
  • delete
  • open
  • close
  • addNew
  • setPageData
  • load
  • ajaxSuccess
  • unsetNewProfileState
  • setStatus
  • clearUserForm

 

Schedule
a Demo