Initializing a New Canvas Project

To open a new Canvas project, click the new project button or select a project that has already been created.

Open

Basic Functionality

Open

The New Canvas includes all of the basic features from the old canvas, including Zoom, Redo/Undo, and project sharing. Additionally, you can now preview Kajoo projects directly in CodeSandbox, a powerful browser-based IDE for web development. Simply press the “Publish to CodeSandbox” button next to the Publish button in the canvas, and quickly see your component live in the browser.

Drag and Drop

Kajoo 1.2 introduces the major addition of a brand new Canvas experience. Unlike the original Canvas, this Canvas provides a live preview of the final rendered code - you can even open up the inspector and look at the DOM yourself as you manipulate it in real-time.

Drag and drop with this canvas is easy, and immediately reflects the way the HTML DOM works.

The Tree Tab

In the new tree tab placed at the left-hand side at the bottom under the explorer and add tabs, users can see how elements are nested in the way they’ll be arranged in the DOM. Users can also select items in the tree, which works the same way as selecting them on canvas, and can even move items around by rearranging them in the tree.

The Data Tab

The Data tab shows every element in the project, along with all relevant data options per element. Users can see how selected elements will be translated into Sitecore fields upon deployment, or they can change them into static, hard-coded values in the markup with a checkbox. Users can also switch element types from the Data panel (eg text to rich text).

Sample Data

In Kajoo, you can add sample data to several elements and see your changes live in Canvas. When you export your project’s code, this sample data will act as a default value for the element as a Sitecore field, or if you choose to make it a static value, it will be hard-coded.

Sitecore-First Development / Project Binding

Oftentimes, Sitecore projects will have built-out Information Architecture, which includes several templates with complex inheritance structures. Kajoo lets you work with these templates by letting you bind these existing templates to your Kajoo projects, then binding specific elements to fields in the templates.

How to Bind a project

The way it works is this: In Kajoo you can already set up Site Configurations for deployment purposes Site Configurations for deployment. We have expanded the Site Configuration Options to include a field for Sitecore Layout Services URL, which allows Kajoo to access the Templates and Renderings in your Sitecore Instance of choice. After setting up the connection, in your Kajoo project, you can click “Bind” to select the Site and Instance. Then, you can pick the rendering item of your choice from your Sitecore Instance. Kajoo will grab the existing template attached to the rendering item. After choosing the rendering, the project is considered “bound,” and the option to bind selected elements to template fields will appear in the revamped Data tab.

Elements will only bind to the appropriate field types. For example, Image elements will map to Image fields, Rich Text elements to Rich Text fields, and so on. However, as described above, you can change element types easily by selecting an element and choosing from the “Element Type” dropdown in the data tab.

Once a project is bound, every element must either be bound to a template field or designated as a “Static Value,” which will render not as a dynamic Sitecore field but as hard code.

When you deploy a project bound to a template, you can only deploy to the site in which the template is located. Then, instead of creating a new template and rendering items, Kajoo will simply push the code linked to the rendering item in Sitecore.

Unbinding

You can choose to unbind your project, which will sever the connection between your project and the Sitecore instance, and reverse the links between your project’s elements and the selected Template’s fields.

Styling Functionalities

Styling functionalities, including individual styling rules, theme functionality and element variants, work nearly the same between the Classic Canvas and the New Canvas, with a few exceptions.

Change HTML Tags for elements

Users can now select the tags used by various elements - for example, select among <div>, <section>, and others for containers, or <h1>, <h2>, and others for headers. This change can be made either in the “Design” tab on the right or by simply clicking a header above a selected element. This update gives users the most flexibility over their rendered markup.

Background Images for Containers

In the new Canvas, enabling background images for a container adds the ability to map the container background to a Sitecore image field in a template (see Binding Projects to Sitecore).

Toggle between Auto and Freestyle positioning

Elements can snap into place using auto-positioning or switch off auto-positioning to place them more exactly with freestyle positioning. Freestyle uses absolute positioning in CSS in addition to top, left, right, and bottom values.