Advanced Permissions

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

Overview

With Advanced permissions, you can tailor permissions for users of your Beefree application by hiding or locking UI elements related to:

• content tiles

• content settings

• layout settings

• row & content actions (clone, delete, drag, save)

• basically anything in the editor!

These advanced permissions grant total customization of the experience you want to present. Since you set them in the configuration parameters passed to your Beefree app after you’ve initialized it, they could be different each time the editor starts, and have different setups for different users.

Use cases

The absolute flexibility of these permissions makes it easy to address specific needs, not achievable with the Roles and Permissions feature that is available in the Beefree SDK Console.

Create skill-based roles

You can create roles that can act only on a content type. For example, you may want a “copywriter” role for people in an organization that only need to touch copy for editing or translation purposes. To do so, you can:

• hide any action that doesn’t involve working on the copy of an email or page.

• limit style options for the text itself, by

  • locking/hiding the side tab;

  • hiding specific settings in the text toolbar.

Customize image & file management workflows

You can limit how users upload and manage images and files inside Beefree SDK; for example, you want some users – e.g., external collaborators – to select pre-approved images and files uploaded by “admin” users. You can do so by:

• disabling drag-and-drop of images onto the stage;

• limit actions in the file manager (either the built-in one or your custom file picker) by disabling actions like upload, import, and create a folder.

Another interesting case for using advanced permissions is the possibility to set a maximum size for uploads, per user. The maximum size set per user must not exceed the custom limitation size set on the Activate Custom Limitation on File Manager. The default limit is 20 Mb unless otherwise stated. When this permission is configured, the system will check if a file exceeds the set size before uploading it; if so, Beefree SDK will return an error message, which you may customize using Custom languages.

Create custom, secondary roles

When customers of your applications are structured businesses, typically with a headquarter and a locally-deployed organization (e.g., Real Estate, Travel, Retail), their administrators can create custom, secondary roles to match any internal policy they might have. In this scenario, admins typically want to reduce disruptions of centrally-deployed templates for external communication, while allowing a specific degree of freedom.

Initialize different versions of the editor

By combining multiple permissions, you can load Beefree SDK with radically different experiences, based on the user that starts it. For example:

• a “stripped-down” version of the content builder for lower-level subscribers;

• a “simplified” version of the builder for new users of an account.

How it works

To set up the advanced permissions, you will need to add the advancedPermissions object to beeConfig.

Note: Click on the arrow next to the section title in the following section to expand the following sections and reference its corresponding content.

Steps to set up advanced permissions in your beeConfig

Take the following steps to set up advanced permissions in your beeConfig for Beefree SDK:

1. Locate your beeConfig object: This is where you configure the Beefree SDK with its basic settings, such as the user ID and container.

2. Add the advancedPermissions object: You will need to insert the advancedPermissions object within your beeConfig to specify which content types and settings can be customized with specific permissions.

3. Define content permissions: Inside advancedPermissions, you can specify what content blocks (e.g., image, button, text) are visible and what actions are allowed.

4. Configure settings permissions: This controls settings like content area width, background color, or fonts for different blocks.

5. Control tabs visibility: You can manage which tabs (such as rows or settings) are visible and editable in the editor interface.

6. Set rows behaviors: You can control row-specific permissions, such as adding or hiding rows, background colors, and mobile visibility.

7. Test the configuration: After adding the advancedPermissions object to your beeConfig, test your configuration by launching the editor and checking if the permissions are applied correctly (e.g., specific settings are visible or locked as intended).

Sample code

Reference the following sample code to understand the structure of advancedPermissions.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    content: {
      button: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          link: { locked: false, show: true },
          buttonWidth: { locked: false, show: true },
          padding: { locked: false, show: true },
          backgroundColor: { locked: false, show: true },
          textColor: { locked: false, show: true },
          textAlign: { locked: false, show: true },
          buttonLineHeight: { locked: false, show: true },
          borderRadius: { locked: false, show: true },
          contentPadding: { locked: false, show: true },
          border: { locked: false, show: true },
          hideOnMobile: { locked: false, show: true },
          hideOnAmp: { locked: false, show: false }
        },
        textEditor: { toolbar: "bold italic underline" }
      },
      image: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          imageWidth: { locked: false, show: true },
          textAlign: { locked: false, show: true },
          dynamicImage: { locked: false, show: true },
          imageSelector: { locked: false, show: true },
          inputText: { locked: false, show: true },
          link: { locked: false, show: true },
          padding: { locked: false, show: true },
          hideOnMobile: { locked: false, show: true },
          hideOnAmp: { locked: false, show: false },
          borderRadius: { locked: false, show: true },
          id: { locked: false, show: true },
          customAttributes: { locked: false, show: true }
        }
      },
      // Repeat structure for other elements: form, text, title, etc.
    },
    settings: {
      contentAreaWidth: { locked: false, show: true },
      contentAreaAlign: { locked: false, show: true },
      containerBackgroundColor: { locked: false, show: true },
      contentBackgroundColor: { locked: false, show: true },
      defaultFontFamily: { locked: false, show: true },
      linkColor: { locked: false, show: true }
    },
    tabs: {
      rows: { locked: false, show: true },
      settings: { locked: false, show: true },
      content: { locked: false, show: true }
    },
    rows: {
      behaviors: {
        canSelect: true,
        canAdd: true,
        canViewSidebar: true,
        hiddenOnAmp: false,
        hiddenOnHtml: false,
        hiddenOnMobile: false,
        hiddenOnDesktop: false,
        canResize: true,
        canResetMobile: true
      },
      backgroundColorRow: { locked: false, show: true },
      backgroundVideo: { locked: false, show: true },
      backgroundColorContent: { locked: false, show: true },
      doNotStackOnMobile: { locked: false, show: true },
      hideOnMobile: { locked: false, show: true },
      backgroundImage: { locked: false, show: true },
      displayConditions: { locked: false, show: true },
      rowLayout: { locked: false, show: true },
      columnTabs: { locked: false, show: true },
      contentBorder: { locked: false, show: true },
      roundedCorners: { locked: false, show: true },
      verticalAlign: { locked: false, show: true },
      columnsSpacing: { show: true, locked: false },
      columnsBorderRadius: { show: true, locked: false }
    }
  },
  components: {
    filePicker: {
      canApplyEffects: true,
      canChangeImage: true,
      canChangeVideo: true,
      canCreateFolder: true,
      canDeleteFile: true,
      canDeleteFolder: true,
      canImportFile: true,
      canSearchFreePhotos: true,
      canSearchFreeVideos: true,
      canUpload: true,
      maxUploadFileSize: 20971520
    },
    linkTypes: {
      webAddress: { show: true },
      emailAddress: { show: true },
      telephone: { show: true },
      text: { show: true },
      anchor: { show: true }
    }
  },
  rowAddon: {
    customRowAddonHandle: {
      behaviors: {
        canSelect: true,
        canAdd: true,
        canViewSidebar: true,
        hiddenOnAmp: false,
        hiddenOnHtml: false,
        hiddenOnMobile: false,
        hiddenOnDesktop: false,
        canResize: true,
        canResetMobile: true
      }
    }
  },
  workspace: {
    stageToggle: { locked: false, show: true },
    historyButtons: { show: true }
  }
}

First-level fields

The following table provides the name, data type, description, and an example value for the first-level fields for advancedPermissions.

Name	Data Type	Description	Example Value
uid	string	Unique identifier for the CMS user (mandatory).	'CmsUserName'
container	string	HTML container element ID for embedding Beefree SDK (mandatory).	'bee-plugin-container'
advanced permissions	object	Contains settings for content elements, rows, settings, and tabs configurations.	See configuration object for details.
components	object	Specifies available components like file picker and link types.	{ filePicker: {...}, linkTypes: {...} }
rowAddOn	object	Settings for custom row add-ons, such as custom behaviors.	{ customRowAddonHandle: {...} }
workspace	object	Defines workspace settings, such as stage toggle and history buttons visibility.	{ stageToggle: {...}, historyButtons: true }

Available permissions and behaviors

You can add all the permissions, some of them, or just one. It is up to your application to create them for all users or a segment, as there are no related server-side settings. You may have a different setup each time the editor starts.

All the permissions use a similar pattern, but the object must match the content schema for the type of content (described in the following section).

Defaults

Each content type below contains a parameter for “behaviors” and “properties”. The behaviors control what someone can, or can’t, do. The properties parameter is an array of sidebar property widgets (e.g., the width slider), and each widget has its default permissions.

Sidebar property widget permissions

All sidebar property widgets (e.g. width slider, alignment, color, etc.) accept the following basic permissions:

Name	Type	Value
locked	boolean	true or false
show	boolean	true or false

Let’s look at an example of these permissions applied to an image module. The following example will hide the image width property widget and lock the text alignment widget. We’ll cover more of the available settings below.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    content: {
      image: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          imageWidth: {
            locked: false,
            show: false
          },
          textAlign: {
            locked: true,
            show: true
          },
          dynamicImage: {
            locked: false,
            show: true
          },
          imageSelector: {
            locked: false,
            show: true
          },
          inputText: {
            locked: false,
            show: true
          },
          link: {
            locked: false,
            show: true
          },
          padding: {
            locked: false,
            show: true
          },
          hideOnMobile: {
            locked: false,
            show: true
          },
          hideOnAmp: {
            locked: false,
            show: false
          },
          borderRadius: {
            locked: false,
            show: true
          },
          id: {
            locked: false,
            show: true
          },
          customAttributes: {
            locked: false,
            show: true
          }
        }
      }
    }
  }
}
 

Default behaviors

All contents and rows (e.g. image module, video module, stage row, etc.) accept the following basic behaviors:

Name	Type	Value	Description
canSelect	boolean	true or false	Can select a row or module to edit its properties
canAdd	boolean	true or false	Can drag and drop the content tile or row onto the stage
canViewSidebar	boolean	true or false	Can view the content in the sidebar
canClone	boolean	true or false	Can clone a content or row on the stage
canMove	boolean	true or false	Can drag content to another location on the stage
canDelete	boolean	true or false	Can remove the content or row from the stage
canResetMobile	boolean	true or false	Can reset mobile style for content properties that make use of it

Components

The components object lets you control the behavior and permissions for tools like file pickers and link types within the editor. You can define what actions users can take, such as uploading or deleting files, and specify which link types (e.g., web addresses, emails) are available. This section provides more information on the component object within advanced permissions.

filePicker

The following code provides an example of the filePicker object.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    components: {
      filePicker: {
        canApplyEffects: true,
        canChangeImage: true,
        canChangeVideo: true,
        canCreateFolder: true,
        canDeleteFile: true,
        canDeleteFolder: true,
        canImportFile: true,
        canSearchFreePhotos: true,
        canSearchFreeVideos: true,
        canUpload: true,
        maxUploadFileSize: 20971520 // 20 MB
      }
    }
  }
}

linktypes

The following code provides an example of the linkTypes object.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    components: {
      linkTypes: {
        webAddress: {
          show: true
        },
        emailAddress: {
          show: true
        },
        telephone: {
          show: true
        },
        text: {
          show: true
        },
        anchor: {
          show: true
        }
      }
    }
  }
}

Rows

The rows object in Beefree SDK allows you to manage the behavior and appearance of rows in the editor. You can control what users can do with rows, such as adding, deleting, or moving them. Additionally, you can set permissions for properties like background color, stacking behavior on mobile, and visibility settings. Configuring the rows object ensures users can work with rows in a controlled way, customizing their content without altering crucial layout elements.

Hosted Saved Rows

Hosted Saved Rows includes advanced permissions to control how rows and categories are accessed and managed. These permissions allow you to define user capabilities, such as editing or deleting rows.

Available Permissions

• canDeleteHostedRow: Allows or prevents deleting hosted rows.

• canEditHostedRow: Enables or disables editing of hosted rows.

• canManageHostedRowCategory: Controls whether end users can manage row categories.

• canAddHostedRowCategory: Determines if end users can add new categories.

Permission Behavior

• If both canDeleteHostedRow and canEditHostedRow are set to false, the row menu will be hidden.

• If both canManageHostedRowCategory and canAddHostedRowCategory are set to false, the category management menu will be hidden.

Example Configuration

The following configuration displays an example of the rows object inside of advancedPermissions:

{
...
advancedPermissions:{
  ...
  rows:{
    behaviors: {
        canDeleteHostedRow: false,
        canEditHostedRow: false,
        canManageHostedRowCategory: false,
        canAddHostedRowCategory: false,
      },
    ...
  },
  ...
  }
...
}

Rows Addon

The following code demonstrates how to specify behavior settings for individual row addons. A custom row addon can have its behaviors set independently from the global row settings.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    rows: {
      behaviors: {
        canSelect: true,
        canAdd: true,
        canViewSidebar: true,
        hiddenOnAmp: false,
        hiddenOnHtml: false,
        hiddenOnMobile: false,
        hiddenOnDesktop: false,
        canResize: true,
        canResetMobile: true
      },
      backgroundColorRow: {
        locked: false,
        show: true
      },
      backgroundVideo: {
        locked: false,
        show: true
      },
      backgroundColorContent: {
        locked: false,
        show: true
      },
      doNotStackOnMobile: {
        locked: false,
        show: true
      },
      hideOnMobile: {
        locked: false,
        show: true
      },
      backgroundImage: {
        locked: false,
        show: true
      },
      displayConditions: {
        locked: false,
        show: true
      },
      rowLayout: {
        locked: false,
        show: true
      },
      columnTabs: {
        locked: false,
        show: true
      },
      contentBorder: {
        locked: false,
        show: true
      },
      roundedCorners: {
        locked: false,
        show: true
      },
      verticalAlign: {
        locked: false,
        show: true
      },
      columnsSpacing: {
        show: true,
        locked: false
      },
      columnsBorderRadius: {
        show: true,
        locked: false
      }
    },
    rowAddon: {
      customRowAddonHandle: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        }
      }
    }
  }
}

Columns

The columns object in the Beefree SDK lets you control the behavior and permissions for columns within the editor. You can define what users can do with columns, such as adding, selecting, moving, or deleting them. You can also set properties like column spacing and border radius. Configuring the columns object ensures that users can manage column layouts effectively, while maintaining control over the design and structure of the content.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    columns: {
      behaviors: {
        canSelect: true,
        canAdd: true,
        canViewSidebar: true,
        canDelete: true,
        hiddenOnAmp: false,
        hiddenOnHtml: false,
        hiddenOnMobile: false,
        hiddenOnDesktop: false,
        canResize: true,
        canResetMobile: true
      },
      padding: {
        locked: false,
        show: true
      },
      backgroundColor: {
        locked: false,
        show: true
      },
      backgroundImage: {
        locked: false,
        show: true
      },
      verticalAlign: {
        locked: false,
        show: true
      },
      borderRadius: {
        locked: false,
        show: true
      },
      contentAlign: {
        locked: false,
        show: true
      }
    }
  }
}

Tabs

The tabs object in the Beefree SDK allows you to manage the visibility and permissions of different tabs within the editor, such as the Rows, Content, and Settings tabs. You can control which tabs users can access and whether they can interact with them. By configuring the tabs object, you streamline the editor’s interface, ensuring users have access to only the relevant tabs they need for editing while maintaining control over what they can modify.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    tabs: {
      rows: {
        locked: false,
        show: true
      },
      settings: {
        locked: false,
        show: true
      },
      content: {
        locked: false,
        show: true
      }
    }
  }
}

Settings

The settings object in the Beefree SDK allows you to control various design-related settings within the editor, such as content area width, background colors, and default font styles. You can define which settings users can view or modify, such as enabling or locking background images or link colors. By configuring the settings object, you ensure that users can customize specific design elements while maintaining overall control over the layout and style of the content.

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    settings: {
      contentAreaWidth: {
        locked: false,
        show: true
      },
      contentAreaAlign: {
        locked: false,
        show: true
      },
      containerBackgroundColor: {
        locked: false,
        show: true
      },
      contentBackgroundColor: {
        locked: false,
        show: true
      },
      containerBackgroundImage: {
        locked: false,
        show: true
      },
      defaultFontFamily: {
        locked: false,
        show: true
      },
      linkColor: {
        locked: false,
        show: true
      },
      title: {
        locked: false,
        show: true
      },
      description: {
        locked: false,
        show: true
      },
      language: {
        locked: false,
        show: true
      },
      favicon: {
        locked: false,
        show: true
      }
    }
  }
}

Content

The content object in the Beefree SDK controls the behavior and permissions for different types of content blocks, such as text, images, buttons, and more. You can specify what users can do with each content type, such as adding, editing, or selecting them, and set properties like alignment, padding, and visibility. By configuring the content object, you allow users to interact with content blocks while maintaining control over how each element can be modified within the design.

Title

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    content: {
      title: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          direction: {
            locked: false,
            show: true
          },
          heading: {
            locked: false,
            show: true
          },
          title: {
            locked: false,
            show: true
          },
          textAlign: {
            locked: false,
            show: true
          },
          fontSize: {
            locked: false,
            show: true
          },
          fontWeight: {
            locked: false,
            show: true
          },
          fontFamily: {
            locked: false,
            show: true
          },
          letterSpacing: {
            locked: false,
            show: true
          },
          textColor: {
            locked: false,
            show: true
          },
          linkColor: {
            locked: false,
            show: true
          },
          lineHeight: {
            locked: false,
            show: true
          },
          padding: {
            locked: false,
            show: true
          },
          hideOnMobile: {
            locked: false,
            show: true
          },
          hideOnAmp: {
            locked: false,
            show: false
          },
          id: {
            locked: false,
            show: true
          },
          aiIntegration: {
            locked: false,
            show: true
          }
        },
        textEditor: {
          toolbar: "bold italic underline"
        }
      }
    }
  }
}

Text

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    content: {
      text: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          textColor: {
            locked: false,
            show: true
          },
          linkColor: {
            locked: false,
            show: true
          },
          lineHeight: {
            locked: false,
            show: true
          },
          padding: {
            locked: false,
            show: true
          },
          hideOnMobile: {
            locked: false,
            show: true
          },
          hideOnAmp: {
            locked: false,
            show: false
          },
          id: {
            locked: false,
            show: true
          },
          letterSpacing: {
            locked: false,
            show: true
          }
        },
        textEditor: {
          toolbar: "bold italic underline"
        }
      }
    }
  }
}

Image

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    content: {
      image: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          imageWidth: {
            locked: false,
            show: true
          },
          textAlign: {
            locked: false,
            show: true
          },
          dynamicImage: {
            locked: false,
            show: true
          },
          imageSelector: {
            locked: false,
            show: true
          },
          inputText: {
            locked: false,
            show: true
          },
          link: {
            locked: false,
            show: true
          },
          padding: {
            locked: false,
            show: true
          },
          hideOnMobile: {
            locked: false,
            show: true
          },
          hideOnAmp: {
            locked: false,
            show: false
          },
          borderRadius: {
            locked: false,
            show: true
          },
          id: {
            locked: false,
            show: true
          },
          customAttributes: {
            locked: false,
            show: true
          }
        }
      }
    }
  }
}

Button

beeConfig: {
  uid: 'CmsUserName', // [mandatory]
  container: 'bee-plugin-container', // [mandatory]
  advancedPermissions: {
    content: {
      button: {
        behaviors: {
          canSelect: true,
          canAdd: true,
          canViewSidebar: true,
          hiddenOnAmp: false,
          hiddenOnHtml: false,
          hiddenOnMobile: false,
          hiddenOnDesktop: false,
          canResize: true,
          canResetMobile: true
        },
        properties: {
          link: {
            locked: false,
            show: true
          },
          buttonWidth: {
            locked: false,
            show: true
          },
          padding: {
            locked: false,
            show: true
          },
          backgroundColor: {
            locked: false,
            show: true
          },
          textColor: {
            locked: false,
            show: true
          },
          textAlign: {
            locked: false,
            show: true
          },
          buttonLineHeight: {
            locked: false,
            show: true
          },