With Smart Builder, you can create pre-built templates (or layouts) and save time when ordering layout controls on the canvas.

This allows us to easily create as many layouts as we need by supporting reusability.

Here is how these layouts appear in Smart Builder:

Each layout has a different appearance, and depending on which one you select, it will appear within Smart Builder.

Each layout entails a different configuration set up - once you’ve set up the configuration, other steps will follow:

Configuration

Here is the configuration structure model:

type ContainerTemplate<R extends string = string, L extends Layout<{}, {}> = Layout<{}, {}>> = {
  id: string;
  name: string;
  slots: { [slotKey: string]: Slot };
  breakpoints: Breakpoints;
  renderer: R;
  defaultLayoutId: string;
  layouts: { [layoutId: string]: L };
  options: { [optionId: string]: Option };
};

Let’s take a look at the configuration object, in a high-level overview:

{
  componentTypeId: "<<your component id>>",
  displayName: "<<self-descriptive name>>",
  templates: {
    children: {
      id: "<<children id>>",// It's commonly used the word "children".
      name: "<<Name that would be appearing on the tab names>>",// See the image above.
      defaultLayoutId: "<<layout default id that would be selected at the beginning>>",
      renderer: "",
      layouts: {...},// Breakpoint layouts specification in here.
      slots: {...},
      options: {...},
      breakpoints: {...}
    }
  }
}

Layouts

Now that we’ve created our configuration structure, let's look into the property layout in the configuration.