To extend or customize the component action toolbar, at a high level we need to do the following: Create a component for the custom action Overlay the toolbar from WCM Add a custom action item node Implement client library (javascript) to handle the click on the action Step 1 – Create a component for the custom action First of all we need to create a component for the custom action item. This component will be shown or popup when you click on your custom action. For example, let’s create a custom action component here: /apps//components/actions/myaction myaction.html MyAction Header
This is a content.
Notice the above code snippet, we have defined the id for the custom Action item which will be used in the Javascript later to target. Step 2 – Overlay the toolbar from WCM. Use CRXDE to find the below node. /libs/wcm/core/content/editor/jcr:content/content/items/content/content/items Create an overlay using the Overlay Node option. Path: /libs/wcm/core/content/editor/jcr:content/content/items/content/content/items Overlay Location: /apps/ Match Node Types: active (select the checkbox) 1.00 Step 3 – Add a custom action item node For our example, we will create a custom toolbar button MyAction. Create a new node under the overlaid node for example: /apps/wcm/core/content/editor/jcr:content/content/items/content/content/items/myaction and add the below mentioned properties. sling:resourceType = "/apps//components/actions/myaction" type = component Custom Toolbar Action item on the Component toolbar Step 4 – Implement clientlibrary for the custom action
Please use this thread to ask the related questions.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes