Templates

Whenever you add a new No-Code Component to Config.components the end-users can start adding its instances to a canvas. It's done via a template picker that is displayed after user clicks on a plus button or a blue placeholder.

The template picker shows a list of templates allowed in this particular slot (defined by a schema property of type component or component-collection). Under the hood each template is represented by a very simple object:

{
    id: "template_1", // unique id
    label: "My Super Template", // label displayed in UI (optional)
    thumbnail: thumbnail_url // URL to the thumbnail image (optional)
    entry: { ... } // no-code entry
}

All the available templates are stored in a Config.templates array.

When you add a new component to Config.components and don't specify any templates for this component, Easyblocks will create a single default template and set all the values to the default ones. Whenever you specify at least a one template in Config.templates for your component, the default template will be gone.

The template picker always displays only the templates for components that allowed by accepts field of the parent component (in parent component's component or component-collection schema property).

Working with templates

The best way to work with templates is as follows:

1. Add a default template of your component to the canvas. Beware, it usually looks very bad.

2. Use Easyblocks Editor to make it look good.

3. Click 5 times on a header bar (it unlocks "developer mode").

4. Select your component instance, click "Copy entry" at the bottom of the sidebar. You just copied the No-Code Entry of your new component.

5. Add a new template to the Config.templates and paste the entry to the entry property of your template.

The best way to understand how it all works is too see the video:

Template picker types

There are 3 built-in template picker widgets available in Easyblocks:

• large - 2 cards in a row, good for sections

• large-3 - 3 cards in a row, good for cards

• compact (default) - good for smaller items like stack elements, buttons, etc.

The picker widget can be set as a part of component or component-collection schema property:

const componentDefinition = {
  // ...
  schema: [
    // ...
    {
      prop: "Card1",
      type: "component",
      required: false,
      picker: "large-3", // picker property allows for changing picker widget
    },
  ],
};