Initializing a New Canvas Project
As described in Creating a New Project, to open a new Canvas project, select the “Import a Figma Design” option in the New Project modal when you select New Project on the Projects page.
Basic Functionality
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 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, 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 a number of elements and see your changes live in the Canvas. When you export your project’s code, this sample data will act as a default value for the element as Sitecore field, or if you choose to make it a static value, it will be hard-coded.
Sitecore-First Development / Project Binding
Often times, Sitecore projects will have built-out Information Architecture, which includes a number of 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 already can set up Site Configurations for the purposes of 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 that is bound to a template, you can only deploy to the site that the template is located in. Then, instead of creating 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 you can 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.