Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Modifying Toolbars with Sightly


Level 4


In 5.6.1, we have a custom edit-bar component that is written in JSP.  The edit-bar will obtain the corresponding title from the request object and set it as the first label of the edit bar.  In JSP, the code looks like this

<%@page import="com.day.cq.wcm.api.components.Toolbar.Label"%> <%@page import="com.day.cq.wcm.api.components.Toolbar"%> <%@page import="com.day.cq.wcm.api.components.EditConfig"%> <%@page import="com.day.cq.wcm.api.components.EditLayout"%> <%@page session="false" %> <% if(editContext != null) { EditConfig editConfig = editContext.getEditConfig(); editConfig.setLayout(EditLayout.EDITBAR); Toolbar editToolbar = editConfig.getToolbar(); String editBarTitle = "" + request.getAttribute("edit-bar-title"); Label label = new Label("WARNING: Set requestAttribute edit-bar-title if you want to change this title"); if(!editBarTitle.equals("")) { label = new Label(editBarTitle); } editToolbar.add(0, label); } %>

We would like to rewrite this with Sightly.  We wrote a use-class for the EditBar with the following contents

import com.adobe.cq.sightly.WCMUse; import com.day.cq.wcm.api.components.Toolbar.Label; import com.day.cq.wcm.api.components.Toolbar; import com.day.cq.wcm.api.components.EditConfig; import com.day.cq.wcm.api.components.EditLayout; public class EditBar extends WCMUse { private EditConfig editConfig; private Toolbar editToolbar; private String title; private Label label; @Override public void activate() throws Exception { editConfig = get("editConfig", EditConfig.class); editConfig.setLayout(EditLayout.EDITBAR); editToolbar = editConfig.getToolbar(); title = get("title", String.class); if (title.indexOf("END:") >= 0) { label = new Label(title); } editToolbar.add(0, label); editConfig.editTool } public Toolbar getEditToolbar() { return editToolbar; } }

On the actual content page or other components that we would like to include the sightly edit-bar, we used 

<div data-sly-use.editBar="${'mycomponents.developer.sightly_edit_bar.EditBar' @ title = 'Sightly Feedback', editConfig = editContext.editConfig}"> <div>${editBar.editToolbar}</div> </div>


1. If the use-class requires the editConfig from the editContext, can we pass it to the use-class via editConfig=editContext.editConfig?

2. Is it possible to have sightly return the rendered markup to the browser via ${editBar.editToolbar}?  At the moment, we get ",,,," as the output.

Thank you.

0 Replies