Pre-build Reusable Content

This feature is available on Beefree SDK Core plan and above. If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.

There are three types of pre-built reusable content you can provide your application's end users with. These are the following:

• Custom Rows

• Default Rows

• Empty Rows

In this page, we will look at a sample rowsConfiguration that incorporates defaultRows, emptyRows, selectedRowType, and externalContentURLs. The Implement Custom Rows page will discuss the steps to integrate Custom Rows.

Rows Configuration

The following code snippet provides a sample rowsConfiguration.

rowsConfiguration: {
  emptyRows: true,
  defaultRows: true,
  selectedRowType: 'my_saved_rows', // pre-select this item in the Rows select
  externalContentURLs: [
    {
      name: "Rows list 01",
      value: "https://URL-01"
    },
    {
      name: "Rows list 02",
      value: "https://URL-02"
    }
  ]
}

Rows Configuration Parameters

This section explains each of the properties listed in the rowConfiguration code snippet.

These properties are the following:

• emptyRows: Set of empty rows. The same rows available when rowsConfiguration is not included. End users can use these empty rows to structure and customize their own content within.

• defaultRows: A set of rows that contain sample content. End users can use the sample content as inspiration for customizing them with their own look and feel.

• selectedRowType: Specify which type of row should be pre-selected when the end user opens the Rows selection in the visual builder.

• externalContentURLs: Each item in this list defines an option available in the Rows tab drop-down.

Default Rows

You can add pre-built default rows to your builder by setting the defaultRows property to true in your beeConfig.

Default rows are a set of rows that contain sample content. That’s why we also call them sample rows. They may be used as a supporting feature for starting templates, or to speed up the process of building a message from scratch.

Allowed values: boolean, can be set to true or false.

Default value: false

They are presented as follows in the builder’s default theme (the screenshot shows the first 2 default rows):

Empty Rows

You can add pre-built empty rows to your builder by setting the emptyRows property to true in your beeConfig. Empty rows are a set of rows that aren't prefilled with content. However, they offer a general structure for content to be placed within them. These are the same rows available to end users when the rowsConfiguration parameter is not included in the beeConfig.

Allowed values: boolean, can be set to true or false.

Default value: true

Will always be included as the last element if omitted in the configuration.

They are presented as follows in the builder’s default theme (the screenshot shows the first 4 empty rows with unique structures):

Set a Pre-selected Row Type

This property is used to specify which type of row should be pre-selected when the end user opens the Rows selection in the visual builder. You have several options for what value to assign to this property, and its role is to simplify the end user's interaction with the builder by focusing their attention on a specific type of row by default.

Possible values for selectedRowType:

1. 'defaultRows': This value will automatically select the default rows that come with the builder, which usually contain pre-designed content that users can easily modify and adapt. It helps users start with a pre-configured structure and quickly adjust it to meet their needs.

2. 'emptyRows': This value pre-selects an option for the user to start with empty rows. This is useful for users who prefer to build their layouts entirely from scratch, without any predefined content or structure.

3. The handle of a row in externalContentURLs:

   • You can also pass the handle of a row that is listed in externalContentURLs to pre-select a row from an external source. A handle in this context refers to the unique identifier or name used to reference a specific row from an external list. Think of it as a unique key that allows the system to identify which external row to load or pre-select.

   • For example, if you have external content rows listed in externalContentURLs, such as "Rows list 01" or "Rows list 02," you can pass their respective handle (typically a string like "Rows list 01") as the value for selectedRowType. This will automatically load and pre-select that specific external row, saving the user the step of manually selecting it from the list.

External Content URLs

The externalContentURLs property accepts a row's name and url. You can add multiple items to the property. Each item in the list defines an option available in the Rows drop-down.

name: the text displayed in the Rows drop-down

value: URL that will be called by the builder when the user selects the corresponding name in the drop-down. The URL must return a set of rows as a JSON object.

externalContentURLs: [
  {
    name: "Rows list 01",
    value: "https://URL-01"
  }

The following image displays an example of how the name value appears in the drop-down menu.

In the drop-down menu, you can see a visual example of each pre-built content type mentioned in this article and in Implement Custom Rows:

• Empty rows: When the end user clicks the Empty option in the drop-down menu, they will be redirected to a list of row structures to choose from.

• Default rows: When the end user clicks the Default option in the drop-down menu, they will be redirected to a list of default rows to choose from.

• My Saved Rows: When the end user clicks the My Saved Rows option in the drop-down menu, they will be redirected to a list of rows they created and saved to reuse at a later time.

• Custom rows: The MailChimp Footers, HubSpot Footers, and Sendgrid footers are additional options added to the drop-down through the Custom Rows feature. When an end user clicks on any of these three options, they will be redirected to the lists of rows available in that external resource.

How a Handle Works

A handle acts like a reference key to point to a specific row in an external list. Handles are typically unique names or identifiers that can be used to quickly access specific rows from an external content source, ensuring that the correct row is fetched and displayed to the user. For instance, in the following configuration:

externalContentURLs: [
  {
    name: "Rows list 01",
    value: "https://URL-01"
  },
  {
    name: "Rows list 02",
    value: "https://URL-02"
  }
]

If you want to pre-select "Rows list 01" from the external content list, you would set selectedRowType: 'Rows list 01', where 'Rows list 01' is the handle of that specific external content row. The handle here refers to the name or a unique identifier that the system recognizes and uses to select the correct row from the external content list.

Visit Manage Reusable Content to learn more about editing, deleting, categorizing, and managing rows within the builder.