Overview

Kajoo’s Content Type Builder lets you separate the visual design of your component from its content. You can define editable fields such as text, images, links, rich text, lists, toggles, and numbers, so that content authors can easily update content in a headless CMS like Sitecore, Optimizely, or Contentstack without touching the code.

Kajoo supports two primary workflows:

Kajoo-First Approach: You design your component on the Kajoo canvas and create a new content model directly in Kajoo. This lets you control how data is structured, and when you deploy the component, Kajoo automatically generates and creates the corresponding data template in your CMS.
Platform-First Approach: You integrate with an existing content model from your headless CMS. In this case, you bind your component to an already defined content model.

Why Use the Content Type Builder?

Separate Design and Content: Design your component layout (like a hero banner with title, description, CTA button, and image) and then define which parts should be editable in the CMS.
Easy Content Updates: Content authors can update text, images, links, and more directly through the CMS without involving developers.
Automated Field Creation: When you deploy your component, Kajoo automatically creates the defined fields in your headless CMS, ensuring consistency between your design and content.
Flexible Workflow: Choose between creating a new content model in Kajoo (Kajoo-first) or binding to an existing one in your CMS (Platform-first).

Bound vs. Standard Components

Kajoo provides two types of components for integrating content models:

Bound Components

What It Is: Bound components integrate with a content model that already exists in your headless CMS or allow you to create a new content model. They are also called Dynamic components.
How They Work:
1. Go to the Data Tab: Click on the Bound component option to make your component dynamic. This means it will receive data directly from Sitecore.
2. Choose Your Component Datasource Option:
  - New Content Model: If you choose "New Content Model" option, you can use Kajoo’s Content Type Builder to create a new model that will then be deployed to your CMS. This follows the Kajoo-first approach.
  - Existing Content Model: If you select "Existing Content Model," you will bind your component to a pre-defined model in your CMS. In this case, the Content Type Builder is not available in Kajoo. This follows the Platform-first approach.
    - For example, if you have already created and configured a rendering item in Sitecore (with its linked data template), you can bind your component to it. In this case, pick the rendering item from your Sitecore content tree. (after selecting the site and instance).
Best For: When you either want to leverage an existing content model in your CMS or, if needed, start a new model within Kajoo that integrates with your platform.

Standard Components

What It Is: Standard components are standalone, reusable UI elements (e.g., buttons, cards) used for modular design. They are ideal for nesting within bound components.
How They Work: Developers create standard components to be used across multiple places. When nested within a bound component, they become part of the Sitecore deployment, but on their own, they are not created as components in Sitecore.
Best For: Creating modular components that can be reused across different components, especially for composable, reusable UI elements in React.

How to Create a Content Type in Kajoo

Follow these simple steps to create and bind a content type to your component:

1. Design Your Component

Create the Layout: Use the Kajoo canvas to design your component (for example, a hero banner with a title, description, CTA button, and image).

2. Open the Content Type Builder

Access the Builder:
- To access the Content Type Builder, go to the data tab on the right side.
- Under the Component Properties and Component Datasource, if you are using a Bound component with the New Content Model option or a Standard component, click on the Content Model Builder button to open the content type builder.
  Remember: If you select the "Existing Content Model" option for a Bound component, the Content Type Builder will not be visible.

3. Define Editable Fields

Kajoo supports several field types in the content type builder which the content authors can edit. Here’s what each does:

Text: A simple, single-line field for short strings like titles or labels.
Image: A field to add or manage images. Use this for product images or banners.
Link: A field for URLs or link texts, ideal for buttons or navigational elements.
Rich Text: A field that supports formatted text with styling options, perfect for descriptions or detailed content.
List: A field to hold multiple items (e.g., a list of features or bullet points). It allows for creating ordered or unordered lists.
Toggle: A simple on/off switch, useful for Boolean values such as enabling/disabling a feature.
Number: A field to accept numeric input, such as prices, quantities, or ratings.

For each field, enter the field name and a default value.

Tip: Think about the data your component needs. For a hero banner, you might need a Text field for the title, a Rich Text field for the description, and a Link field for the CTA button.

4. Bind Fields to Component Elements

After you add the necessary fields in the Content type builder, follow these steps.

Select Element: Click on the element (for example, the Title) from the component to open its settings.
Bind Data: Click on the data binding icon on the corresponding element in your component design.
Make the Field Dynamic: In the settings, click on the drop-down menu (which initially shows as static) and switch it to Dynamic. This action binds the element to the field you defined.
Save the Binding: Once you bind the field (for example, binding the Title field will make the default value appear), save your changes.
Bind Additional Elements: Repeat this process for each field you have added (e.g., bind a repeater element with a List field if your design calls for multiple items).

Note: Once everything is bound and saved, every field you have built in the Content Type Builder will be available for editing in your CMS (after you deploy the component).

5. Deploy Your Component

Deploy to CMS: Once you’ve set up your content type and bound all the necessary fields, deploy your component.
One-Way Communication: Updates made in the CMS (e.g., Sitecore) will reflect on your deployed component. However, if you need to change the content type or any field settings, update them in Kajoo and redeploy the component. (You can also update in the CMS, but those changes won’t sync back to Kajoo.)

Summary

Kajoo’s Content Type Builder helps you build dynamic, editable components by clearly separating design from content. Whether you choose the Kajoo-first approach (creating a new content model directly in Kajoo) or the Platform-first approach (binding to an existing model in your CMS), you gain these benefits:

Simplified Content Updates: Content authors can edit data (text, images, etc.) directly in the CMS without involving developers.
Automated Data Template Creation: When you deploy, Kajoo automatically generates the data templates and binds fields to your component elements.
Flexible Integration Options: Choose between creating a new model with Kajoo’s Content Type Builder or binding to an existing rendering item and data template in Sitecore.