Hide Property Groups

In the builder, when an end-user selects a content item to edit, a panel opens that allows them to modify various properties of the selected content. These properties are organized into Property Groups, making it easier for end-users to navigate and edit specific content properties.

For example, the screenshot below shows two property groups called "Text" and "Links".

As a developer, you have the ability to hide specific property groups from the editing panel. This is useful when you want to simplify the user interface or restrict access to certain configuration options based on your application’s needs.

How to Hide?

You can hide property groups by configuring the tools option when initializing the editor. The following example demonstrates how to hide a property group "Button Options" from the "Button" tool.

unlayer.loadEditor({
  tools: {
    button: {
      sections: {
        buttonOptions: {
          editor: {
            enabled: false,
          },
        },
      },
    },
  },
});

Example Explained:

• tools: The top-level object representing all the tools in the editor (such as images, text, etc.).
• button: Refers to the button tool
• sections: Represents the different sections or groups of properties within the button tool
• buttonOptions: Represents the specific group of properties that control the button options in the screenshot above.
• editor.enabled: By setting this to false, you are hiding the editor for this particular property group from users.

Use Cases

• Simplifying the UI: You can remove unnecessary property groups for a streamlined user experience.
• Role-based Access: Hide advanced property groups for users who do not need access to complex configuration options.

Notes

• When a property group is hidden, the end-user will not be able to view or modify the properties within that group.
• Be cautious when hiding critical property groups, as it may limit the ability of your end-users to fully customize their content.