Hide Property Editors

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.

For example, the screenshot below shows a few properties such as: Color, Text Align, Line Height, Underline, Padding, etc.

As a developer, you have the ability to hide specific property editors 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?

To hide individual property editors, you can configure the properties object for the relevant tool. The following example demonstrates how to hide a specific property editor for the button tool:

unlayer.loadEditor({
  tools: {
    button: {
      properties: {
        textAlign: {
          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
• properties: Represents the different properties within the button tool
• textAlign: Represents the specific property that controls the alignment (as shown in screenshot above)
• editor.enabled: By setting this to false, you are hiding the editor for this particular property from users.

Use Cases

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

Notes

• When an individual property editor is hidden, the end-user will no longer see or modify that specific property.
• This feature is useful for creating a simplified or restricted user experience, especially when certain property settings are not required.