Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM 6.3 - using parsys in htl files

Avatar

Level 4

[Thread Edited By Adobe]

/*Don’t forget to meet and greet your fellow peers virtually by telling them about yourself here

Go ahead and to it now: https://adobe.ly/3eDnB4v */

 

Actual Post:

Hi All,

 

I am working with a HTL template and wanted to add some parsys components so we can make changes from the front end interface. Adding images, specifically.

 

My question is in regards to parsys resources. I have these tags in my html.

   <div class="logo" style="height:100px;">

           <sly data-sly-resource="${ @ resourceType='wcm/foundation/components/parsys'}"></sly>

   </div>

 

The problem is that from the front end editor these show as very tiny lines, and its impossible to click them. And if I click them and add an image to them, I have to refresh my browser because the changes aren't reflected in my current session. I don't see any errors in the console log.

 

1248166_pastedImage_3.png

 

Is there something I need to do to make these bigger? Viewing the source shows them having a class as container is-disabled. Could that be my issue? I can add a new component to the ones I can click, but clicking them is the hard part. If you also have any ideas for why I may have to refresh the browser for any changes to show up. (I.E, I add a new image but the option to configure it does not show up until I refresh the page)

 

 

<div data-type="Editable" data-path="/content/vhhomecare/Home/jcr:content/left-par" tabindex="0" draggable="false" class="cq-Overlay cq-Overlay--component cq-Overlay--container is-disabled" title="Paragraph System - HTL [Root]" style="top: 224px; left: 8px; width: 1887px; height: 37px;"><span title="Paragraph System - HTL [Root]" class="cq-Overlay--component-name">Paragraph System - HTL [Root]</span><div data-type="Editable" data-path="/content/vhhomecare/Home/jcr:content/left-par/*" tabindex="0" draggable="false" data-text="Drag components here" title="Paragraph System - HTL [Root]" class="cq-Overlay cq-Overlay--component cq-droptarget cq-Overlay--placeholder is-selected is-active" style="top: 0px; left: 0px; width: 1887px; height: 0px;"></div>

 

1248170_pastedImage_4.png

 

Let me know what you guys think or if I'm even doing this the right way, thanks for your help.

 

-Brendan

 

 

desktop_exl_promo_600x100_gdrp.png

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi Zeeshank,

Thanks for your responses, I was able to figure out my problem! I needed to add an image as one of the allowed components in the design tab before I could click them in the edit tab. It had no allowed components so it wasn't clickable.

They are still very small and every time I add a component to a parsys, I need to refresh the browser to get it to update. Any ideas why this would be happening?

Not the worst, but at least I can add things again!

Thanks

Brendan

View solution in original post

25 Replies

Avatar

Level 5

hi

use the below syntax to add the parsys

<div data-sly-resource="${'log' @ resourceType='foundation/components/parsys'}"></div>

Avatar

Level 4

Hey zeeshank,

Thanks for the response. I tried your syntax and got the same issue. The parsys itself is just super tiny and unclickable.

1248200_pastedImage_0.png

If I remove the height:0px in the styling by using the f12 developer tools, it looks like this. The problem is I still cant do anything with it once it looks like that.

1248206_pastedImage_3.png

1248202_pastedImage_1.png

Brendan

Avatar

Level 5

can you try without using this div,class and height.

  <div class="logo" style="height:100px;">

         

   </div>

because this problem seems to be css problem that is overriding the height.

Avatar

Level 4

Hi Zeeshank,

I tried your suggestion and made my htl file look like this to make sure that nothing would be overwriting my styles.

<div data-sly-resource="${'log' @ resourceType='foundation/components/parsys'}"></div>

<h1>test</h1>

This rendered this page

1248207_pastedImage_0.png

The design tab can see my parsys, but the edit tab cannot

1248208_pastedImage_1.png

There must be something weird going on in my back end styling. That style where the height was 0 px, was from the html itself. Maybe the styling being off is also the reason that things do not update in real time.

Brendan

Avatar

Correct answer by
Level 4

Hi Zeeshank,

Thanks for your responses, I was able to figure out my problem! I needed to add an image as one of the allowed components in the design tab before I could click them in the edit tab. It had no allowed components so it wasn't clickable.

They are still very small and every time I add a component to a parsys, I need to refresh the browser to get it to update. Any ideas why this would be happening?

Not the worst, but at least I can add things again!

Thanks

Brendan

Avatar

Level 5

Are you dragging and dropping this parsys component in some page or this is included in page.Can you remove all styling tag from page also.And confirm that no clientlib is loaded into your page.

Avatar

Level 4

I created a page rendering template where I have those parsys components.

I have a clientLib rendered, but when I remove all HTML except for the parsys I don't see the clickable part at all. Would a clientLib cause the application to behave differently?

1248221_pastedImage_0.png

body.html is where I have been posting examples of my HTML code.

Avatar

Level 5

can you send the image of the page and are you dragging and dropping some component.

Avatar

Level 4

Hi zeeshank,

Sure thing. It's below. I tried dragging and dropping an "image" component into my page and it did not refresh the screen. Both the dragging the image component and adding it through the plus result in the same thing - having to refresh browser to refresh the page.

1248222_pastedImage_0.png

It looks like I am having the same issue are that other thread without having any JS errors in my console.

1248223_pastedImage_1.png

Here is my component that renders the HTML files below.

1248224_pastedImage_2.png

And here is my page rendering template

1248225_pastedImage_3.png

As well as my clientLibs and my head.html that loads the clientLibs

1248226_pastedImage_4.png

1248230_pastedImage_6.png

Let me know if anything stands out to you from these or if you need more info!

Brendan

Avatar

Level 5

can you share the HomePage.jsp and is HomePage is a page component.Correct the name of HomePage.html and add <div data-sly-include="body.html"></div> in HomePage.html

Avatar

Level 4

Sure - HomePage.jsp

1248231_pastedImage_0.png

And I'll make a HomePage.html

1248232_pastedImage_1.png

This was able to load everything but I got the same issue of the UI not refreshing when I try to add something to the page. :/

Brendan

Avatar

Level 5

can you paste the page screenshot with or wothout component.

Avatar

Employee

Also make sure to install CFP1 / 6.3.0.1

It has this fix for this parsys:

  • The HTL based Paragraph System component (/libs/wcm/foundation/components/parsys) should be adapted to the new component wrapper behavior. NPR-16980; Hotfix for CQ-4206620, CQ-4206621

Avatar

Level 4

Hi Feike,

Thanks for the suggestion, I installed that hotfix and see the same issue (not refreshing when I add/delete/change a component in parsys). My changes update okay but they do not reflect until I refresh the page. Do you have any other ideas for what could be causing this?

Thanks

Brendan

Avatar

Level 4

Hey Zeeshank,

Here is the page with the component. I can add an image

1248898_pastedImage_0.png

After adding the image it looks like this until I refresh my browser

1248899_pastedImage_1.png

Then refreshing it looks like this

1248900_pastedImage_2.png

And with no components added and none allowed  in design mode it looks like this

1248901_pastedImage_3.png

Here is the page screenshot in preview mode

1248902_pastedImage_4.png

Body.html screenshot

1248904_pastedImage_6.png

Let me know what you think and I appreciate the time

Brendan

Avatar

Level 5

Can you remove all ClientLib(css and js) loaded into the page and clear the browser cache and then reload the page.

Avatar

Level 4

Hey Zeeshank,

It's removed. I didn't have any lucky with that, it looks like it is an internal library that is giving me the issue.

If I view the page outside of the editor it's HTML looks like this

1248935_pastedImage_0.png

Inside the editor, specifically where the parsys is, it looks like this. You can see the height:0 px on the sidebar indicating why it is basically hidden, showing in the style=""

1248936_pastedImage_1.png

Avatar

Level 1

I've just had the same problem (0 height parsys) and it was fixed by the inclusion of the line: <div data-sly-include="head.html"></div>

With the following code I had a 0 height parsys:

<h4>Hello world! 3</h4>

<div data-sly-resource="${@path='par', resourceType='foundation/components/parsys'}"></div>

With the following code I had a 46px height parsys:

<h4>Hello world! 3</h4>

<div data-sly-include="head.html"></div>

<div data-sly-resource="${@path='par', resourceType='foundation/components/parsys'}"></div>

Avatar

Level 2

The parsys itself is just super tiny and unclickable. I had also faced the same issue and I figured out that:

we need to initialize the Experience Manager authoring UI by including the following code:

<!--/* Initializes the Experience Manager authoring UI */-->

<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>

Once you do this parsys comes like this:

1340132_pastedImage_2.png