AEM 6.5 : Touch UI : Custom components missing edit bar | Community
Skip to main content
A
aem1234567
Level 2
April 5, 2023

AEM 6.5 : Touch UI : Custom components missing edit bar

  • April 5, 2023
  • 1 reply
  • 964 views

All - We are having an issue in AEM 6.5 where when a custom component is added on a page, edit option goes missing, we have to use left side panel to find the component for making any edits. I realized this could be because of css of the component as this issue is happening for few components and not all of them. As we are migrating website from a different CMS to AEM without any redesign effort, we need to reuse CSS as is. Is there a way we can make minor change to have edit option available for components? See screenshot for more details. If you notice placeholder bar (to add more components) is also appearing before the component instead of appearing below it.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Sady_Rifat
Community Advisor
Sady_RifatCommunity Advisor
Community Advisor
April 6, 2023

Hello @aem1234567 ,
Since you realized this is a CSS issue, you can do one thing load CSS file differently. One set of for the author and other set for publish.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"> <sly data-sly-test="${wcmmode.preview || wcmmode.edit}" data-sly-call="${clientlib.css @ categories='my-project.author.header'}" /> <sly data-sly-test="${!wcmmode.preview && !wcmmode.edit}" data-sly-call="${clientlib.css @ categories='my-project.publish.header'}" /> </sly>

Embed all the component clientlib differently:

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" allowProxy="{Boolean}true" categories="[my-project.author.header]" embed="[component-one-clientlib,component-two-clientlib]" jsProcessor="[min:gcc]"/>


 

    A
    aem1234567Author
    Level 2
    April 6, 2023

    Thank you for your suggestion. I am not sure which css is causing this behavior, Are there any css styles which can cause this behavior which i can look for in the css file and then overwrite those styles in author.css file? I do not want to remove complete component css file as it will not be correct experience for authors while authoring content.

      Sady_Rifat
      Community Advisor
      Sady_RifatCommunity Advisor
      Community Advisor
      April 10, 2023

      Actually, it's very difficult without investigating the issue. I thought you already identified it.

      Still, you can follow some steps to find out the problem's root cause:

      1. Use a new page template that is directly inherited from page v3.
      2. Create new template types and template
      3. Add the custom components

      If it's ok then the problem is with your template

      Again,

      1. Allow your components on the we-retail site.
      2. Check your components are behavior correctly, for now, add the clientlib with component HTML

       

      <sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories=['my-project.component.mycustomcomponent.category'], defer=true}"> ${clientlibs.jsAndCssIncludes @ context="unsafe"} </sly>​

       

      After this, I hope you will find out the actual root cause of your problem.

        Terms & ConditionsAccessibility statement

        Loading footer...