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

Component's dialog tabs are broken in AEM 6.3, CoralUi3

Avatar

Level 3

I was migrating the sling:resourceType granite/coralUi3 properties by follwing this helpex article : Migration Guide to CoralUI 3-based — Granite UI 1.0 documentation 

Where i was trying to modify the textImage component. This article says that in AEM 6.3 layouts have been removed. so i modified my component as:

1544547_pastedImage_3.png

1544548_pastedImage_4.png

1544549_pastedImage_5.png

1544550_pastedImage_6.png

I removed the "layout" from starting. But my dialog tabs appears to be broken:

1544551_pastedImage_7.png

I changed all the sling:resourceType properties inside second tab according to that helpex document and after that this dialogs is showing distorted.  Also the margin in the two tabs also not looking good.

Is there problem going on with coralUi3 or something i missed here? Any suggestions would be appreciated.

1 Accepted Solution

Avatar

Correct answer by
Level 10

Here is the link with the package that works.

https://helpx.adobe.com/experience-manager/using/aem64_htl_movie_component.html

Also - here is a video that shows Granite/COral component dialog looks good with tabs.

View solution in original post

32 Replies

Avatar

Level 10

No issue at all with granite coral/granite types - go through this doc -- Building Experience Manager Components using Granite/Coral Resource Types

All of the Touch UI dialogs work perfectly.

Avatar

Level 3

Thank you for your reply Scott!

Yes everything works fine with the coral/granite types, i checked this document and installed the package for the component "Lab2018". I was looking for a component inside it, where we have more than one tabs in the component's dialog but it was not there, so

1. I tried to modify this component named "/apps/Lab2018/components/content/firstcomponent" where the layout is "granite/ui/components/foundation/layouts/tabs" which is fine and inside it we have one section (sling:resourceType : granite/ui/components/foundation/section) named "Hero Text Properties" (second image attached)

2. In my case as i want two tabs in the dialog so i created one more section exactly having same properties as that of "Hero Text properties". I was expecting the structure to be appearing in two tabs, as i have two sections in the layout now. But it did not happen. (Third image attached)

3. It is appearing in a cascaded manner (one section at the top and next just at the bottom of it). First image attched!

firstcomponent.PNG

herotext.PNG

newprops.PNG

I was looking for a scenario with more than one tab in component's dialog specifically the new coral/granite types in 6.3/6.4 versions. Could you please help, how can i address this? It works fine with previous coralui2/granite types, but not here.

Avatar

Level 10

We will be releasing the Movie COmpoennt article for AEM 6.4. This component example uses coral/granite tabs that work fine too - see this illustration.

MovieTab.png

Avatar

Level 10

I will post the link here when its updated to AEM 6.4 in a day or so.

Avatar

Level 3

Thanks Scott!

That will be a great help! I will wait to hear from your side.

Avatar

Level 10

It will be up in a day or so. I am working on it now.

Avatar

Correct answer by
Level 10

Here is the link with the package that works.

https://helpx.adobe.com/experience-manager/using/aem64_htl_movie_component.html

Also - here is a video that shows Granite/COral component dialog looks good with tabs.

Avatar

Level 10

Hi Ashish,

Yes this works. I just now tested the new article which shows coral/granite resource types. See below.

TestedMovie.PNG

TestedMovie1.PNG

Thanks,

Ratna Kumar.

Avatar

Level 10

Thanks Ranta for testing community content - this is awesome!

Avatar

Level 3

Thank you so much Scott! for your quick response This works fine now.

Avatar

Level 10

Excellent - i am glad its working for you!

Avatar

Level 10

Your feedback to about the 1st Granite Type Article should have a link to the movie one. We will put that in.

Avatar

Level 10

We added this to the 1st article listed here to make it clear:

Tabs.png

Avatar

Level 3

Sorry to ask you so late, but is it okay to have this property(granite/ui/components/foundation/container) instead of  (granite/ui/components/coral/foundation/container)  for content node under cq:dialog ?

tab-component.PNG

Avatar

Level 10

I recommend using all granite/coral as shown in the movie component - do not mix them up

Avatar

Level 3

Okay! but the this movie component has the same structure. the tab-component inside the AEM 6.4 package (in that article you shared) is having the content node has (granite/ui/components/foundation/container) instead of  (granite/ui/components/coral/foundation/container)

Avatar

Level 3

and if i changethe content node property to (granite/ui/components/coral/foundation/container) it is again showing the cascaded structure of the tabs

Avatar

Level 10

I am not following you. All nodes under the tab component dialog use coral/granite types - ie:

Tab11.png

Avatar

Level 10

Hi Ashish,

Use coral/granite resource types as shown in the new AEM 6.4 movie component Helpx..

Also, this article uses only coral/granite resource types..pleas don't mix both..

Thanks,

Ratna kumar