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

Forum|Forum|7 years ago
August 8, 2018
32 replies
14160 views

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:

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

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.

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

Best answer by smacdonald2008

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.

smacdonald2008

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.

smacdonald2008

Level 10

In addtion - watch this Guided Journey on this subject -- Scott's Digital Community: Guided Journey for Using Granite Resources Types in Experience Manager Components

A

AshishRa17Author

Level 2

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!

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

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.