Templating within an app/extension can help you create “pre-built” views that you can later select for use on canvas.

In other words, you can define as many pre-built views as possible instead of building them individually from scratch, therefore, saving you some time.

This article will go through an example, from the start ( of configuration) to finish.

Preparing our Configuration

We first need to define our configuration draft that we’ll continue filling out as we continue building this example:

const GmapsSection = {
  templates: {
    children: {
      id: "children",
      name: "myExtensionName",
      defaultLayoutId: "",
      renderer: "grid",
      layouts: {},
      slots: {},
      options: {},
      breakpoints: {},
    },
  },
};

These sample scripts will highlight how to input each property, so it will all come together by the end of this documentation.

Slots

Starting with the slots property, we can begin to define the components.

For a refresher on components, see Native Components & Examples

So, let’s use heading, paragraph, and map components as examples:

{
  heading: {
    placeholder: {
      contentTypeId: "heading1",
      data: {
        value: "About Us"
      }
    }
  },
  paragraph: {
    placeholder: {
      contentTypeId: "text",
      data: {
        value: [
          {
            text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
          }
        ]
      }
    }
  },
  map: {
    placeholder: {
      contentTypeId: "map",
      data: {}
    }
  }
}

Remember, the contentTypeId property must contain the id of the component. See Native Components & Examples for a refresher.

Breakpoints

Breakpoints are points where the extension’s content responds according to the device width. We’ll need to set up our breakpoints here:

{
  sm: {
    maxWidth: "768px"
  },
  lg: {
    minWidth: "769px"
  }
}