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

SOLVED

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

ashishr1501
Level 3
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
smacdonald2008
Correct answer by
Level 10
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
smacdonald2008
Level 10
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.

ashishr1501
Level 3
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.

smacdonald2008
Level 10
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

smacdonald2008
Level 10
Level 10

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

ashishr1501
Level 3
Level 3

Thanks Scott!

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

smacdonald2008
Level 10
Level 10

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

smacdonald2008
Correct answer by
Level 10
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

Ratna_Kumar
Community Advisor
Community Advisor

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.

smacdonald2008
Level 10
Level 10

Thanks Ranta for testing community content - this is awesome!

ashishr1501
Level 3
Level 3

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

smacdonald2008
Level 10
Level 10

Excellent - i am glad its working for you!

smacdonald2008
Level 10
Level 10

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

smacdonald2008
Level 10
Level 10

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

Tabs.png

ashishr1501
Level 3
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

smacdonald2008
Level 10
Level 10

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

ashishr1501
Level 3
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)

ashishr1501
Level 3
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

smacdonald2008
Level 10
Level 10

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

Tab11.png

Ratna_Kumar
Community Advisor
Community Advisor

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