Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Hide global-bar in editor.html

Avatar

Level 3

I create a custom page that opens through "editor.html". I want to hide the panelheader (global-bar). Are there any ways to do this?

1836773_pastedImage_0.png

7 Replies

Avatar

Employee Advisor

If you would like to remove the complete pane, Just remove the editor.html from the URL and it should do it.

But if you want to customize the panel, you need to overlay one of the files under "/libs/cq/gui/components/authoring/editorpanel" and customize as per you business requirement.

Avatar

Level 10

Hi, can I just ask why you would want to do this?

In any case, here is the answer:

Removing all editor headers

JaideepBrar​'s answer could work but if overlay these files you will be affecting all editors (for AEM Sites pages, but also in the template editor for example). If this is your aim, then the simplest way is to overlay /libs/cq/gui/components/authoring/editorpanel/editorpanel.jsp and remove the following line (line 37 on AEM 6.5.1, but it may be different for you on an older version):

<sling:include replaceSelectors="panelcontent"/>

Removing one specific editor header

If however you want to make make the header disappear for the AEM Sites editor only, then you will have to go a little further.

  1. Copy /libs/cq/gui/components/authoring/editorpanel,  /libs/cq/gui/components/authoring/editorpanel/editorpanel.jsp and /libs/cq/gui/components/authoring/editorpanel/editorcontent.jsp to a custom location under /apps (I put it under /apps/customization). Do NOT copy /libs/cq/gui/components/authoring/editorpanel/panelheader.jsp.
  2. Remove the line from your new editorpanel.jsp file as described above.
  3. Overlay /libs/wcm/core/content/editor/jcr:content/content/items/content. This is the specific node for the AEM Sites page editor.
  4. Now make your overlaid .../content node point to the customizer editor panel by adding the following property to it:
    sling:resourceType---String---/apps/customization/editorpanel

Hope this helps Here is the result when I follow those steps and refresh my editor page:

Peek 2019-09-23 20-15.gif

Avatar

Level 3

Hey.

I'm trying to remove this panel due to the fact that we have a requirement to configure nodes through a page that will be located in the content. Therefore, when editing the panel appears, the end user should not see this panel. So there was an option to use the JavaScript or redirect (url without editor.html) or just remove the panel. I found the files "editorpanel.jsp" in which the panel is added, but when "<sling:include replaceSelectors="panelcontent"/>" is deleted, it also affects other parts of the program which isn't permissible. At the moment, I settled on this option:

<%@ page session="false" import="com.adobe.granite.ui.components.AttrBuilder, com.adobe.granite.ui.components.Config" %>

<%@ page import="com.adobe.granite.ui.components.rendercondition.RenderCondition,

                com.adobe.granite.ui.components.rendercondition.SimpleRenderCondition,

                com.day.cq.wcm.api.NameConstants,

                org.apache.sling.api.resource.Resource,

                org.apache.commons.lang.StringUtils,

org.apache.sling.api.resource.ValueMap,

org.apache.sling.api.resource.Resource,

com.adobe.granite.ui.components.ComponentHelper" %>

<%@ include file="/libs/granite/ui/global.jsp" %>

<%

    Config cfg = new Config(resource);

    AttrBuilder attrs = new AttrBuilder(request, xssAPI);

    attrs.add("id", cfg.get("id", String.class));

    attrs.addClass("editor-panel");

    if (cfg.get("default", Boolean.FALSE)) {

        attrs.addClass("editor-panel-active");

    }

    attrs.addClass(cfg.get("class", String.class));

    attrs.addOthers(cfg.getProperties(), "class", "id", "default");

String suffix = slingRequest.getRequestPathInfo().getSuffix();

    if (!StringUtils.isEmpty(suffix)) {

        Resource contentResource = resourceResolver.resolve(suffix);

        if (contentResource != null) {

if (NameConstants.NT_PAGE.equals(contentResource.getResourceType())) {

            Resource pageResource = resource.getResourceResolver().getResource(contentResource.getPath() + "/jcr:content");

            if (pageResource != null) {

                String pageType = pageResource.getValueMap().get("pageType", String.class);

                if (StringUtils.isNotEmpty(pageType) && pageType.equals("configuration")) {

                %>

                    <div <%= attrs.build() %>>

                        <sling:include replaceSelectors="panelcontent"/>

                    </div>

                <%

                } else {

                %>

                    <div <%= attrs.build() %>>

                        <sling:include replaceSelectors="panelheader"/>

                        <sling:include replaceSelectors="panelcontent"/>

                    </div>

                <%

            }

            }

            } else {

                %>

                  <div <%= attrs.build() %>>

                        <sling:include replaceSelectors="panelheader"/>

                        <sling:include replaceSelectors="panelcontent"/>

                  </div>

                <%

            }

        }

    }

%>

But I'm not sure it's correct.

Avatar

Level 10

Oops! It's a copy-paste error on my part!

The line to delete is:

<sling:include replaceSelectors="panelheader"/>

Avatar

Level 3

Yes, sorry. I deleted <sling:include replaceSelectors="panelheader"/>

Avatar

Community Advisor

You may write CSS to hide the global header and adjust the content panel.

Add in your author site CSS file, to not impact other sites.

.editor-GlobalBar.js-editor-PanelHeader.editor-panel-header{

  display:none;

}

.editor-panel-content.editor-panel-content-with-header{

  top:0px;

}

Use important if CSS is overridden by another CSS rule.



Arun Patidar