Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Modifying Toolbars with Sightly

Voon_Siong
Level 4
Level 4

Hi,

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>

Questions:

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