Whenever you create an AEM component that can be authored, it will normally display an edit toolbar that allows an author to configure it. The toolbar typically consists of edit actions such as Edit, Cut, Copy, Paste, and Delete. However, there may be times when you want to limit those options. What if you only want to display certain edit actions based on custom conditions such as who the user is or what group the user belongs to? What if you want to restrict certain users or groups from even authoring a component while other types of users are allowed to? How do you dynamically control that based on run-time conditions?
Access control lists are only effective for the Edit action but are not applicable for the others like Cut, Copy, Paste, or Delete. Render conditions are not even applicable for the component’s toolbar.
One solution is through usage of the ComponentContext and EditContext objects within the Sling model of your component. This allows you to include the required logic needed for a specific component. In this blog, I will explain how to enhance your component based on certain criteria to:
- Dynamically manipulate the edit actions of the edit toolbar for a targeted component
- Dynamically disable the edit toolbar for a targeted component
How to display appropriate edit actions based on author’s user group
Dynamically manipulate the component’s edit actions by first defining the cq:editConfig node with the default actions desired for the component when it’s not necessary to be changed. For example, you can define typical edit actions for Edit, Copy, Cut, Delete as such:
Next, you will need to update your component’s Sling model init() method to include:
- The custom logic that specifies the conditions that requires changing the component’s edit actions
- The edit actions that need to be added/removed when the above conditions are met
To get a reference of the edit toolbar, you will use the ComponentContext to get a handle of the Toolbar of the EditConfig object. Once you have that, you can add or remove any edit actions on that toolbar.
In the example below, the condition to check for is whether the logged in author should have access to all the edit actions allowed for a component or just a subset of the default actions. Specifically, if the author is not in the desired user group, they will not be able to see the Delete or Insert buttons in the edit toolbar. Likewise, only authors within the administrators groups are allowed to see all the edit options.
Finally, ensure that your Sightly component is using your Sling model. Since you’ve added all the necessary logic in your init() method, there’s no need for any other invocations of the Sling model. Simply using the model will do the trick as shown below.
Completely remove edit toolbar based on author’s user group
Completely remove a component’s edit toolbar from view based on specific conditions by setting the Decoration tag (AKA cq:noDecoration property) accordingly. The Decoration tag will wrap a generated HTML element around a component that is used for:
- Editing the component
- Applying CSS classes that provide layout information and styling information
The Decoration tag is enabled for all components by default. More details on this tag can be found in the Adobe documentation.
Now for this use case, it is not necessary to define the cq:editConfig node for your component. It is very similar to the previous example but you simply need to retrieve the ComponentContext and then set the decoration property whenever your custom conditions are met. Once again, you can add this logic in your component’s Sling model’s init() method. Better yet, add it to a utility class that can be referenced by any component. Below is an example based off of a detailed blog written by Arun Patidar with some minor tweaks.
As in the previous use case, simply using the Sling model in your Sightly component is all that is needed to hide the edit toolbar from authors who are not in the desired user groups.
We’re Your Go-to AEM Partner
I hope the above examples help you dynamically modify your component’s edit actions and toolbar based on your desired conditions. If you need support for your AEM project, connect with us! We’re certified by Adobe for our proven capabilities, and we hold an Adobe Experience Manager specialization (among others).
