Expand my Community achievements bar.

SOLVED

How can add hep text in a component dialog on AEM 6.3?

Avatar

Level 4

How can we add a help text above tabbed nav bar in a component dialog?

Screen Shot 2020-03-10 at 4.39.46 PM.png

 

Something like this.. 

14-705x320.png

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Just before a tabs node in component dialog, create another node says heading with below resource type

https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui...

 

Example of property dialog

/libs/wcm/foundation/components/basicpage/v1/basicpage/cq:design_dialog/content/items/tabs/items/properties



Arun Patidar

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

Just before a tabs node in component dialog, create another node says heading with below resource type

https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui...

 

Example of property dialog

/libs/wcm/foundation/components/basicpage/v1/basicpage/cq:design_dialog/content/items/tabs/items/properties



Arun Patidar

Avatar

Level 4

Thanks @arunpatidar but the heading is coming under each tab.. we wanted to have a common text/heading above the Tab. 

I think this needs a lot fo work to build a page and make Header separate and Nav separate? 

This page has some implementation: http://localhost:4502/editor.html/conf/we-retail/settings/wcm/templates/content-page/structure.html

Screen Shot 2020-03-11 at 2.46.48 PM.png

Avatar

Community Advisor

you can create the structure like below :

 

Arun_Patidar_0-1584005886650.png

 

 

Arun_Patidar_1-1584005921076.png

 



Arun Patidar

Avatar

Level 4

I tried that way, can you send the package of the example you did.

The component-name/_cq_dialog/.content.xml:

 

Screen Shot 2020-03-12 at 3.49.02 PM.png

Avatar

Level 4

With @arunpatidar 's input, was able to solve this.

 

Sample code (component/_cq_dialog/.content.xml):

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured"
          jcr:title="Program Form"
          sling:resourceType="cq/gui/components/authoring/dialog">          
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
      <items jcr:primaryType="nt:unstructured">
        <heading
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/heading"
            level="{Long}2"
            text="Information heading above tabs"/>
        <tabs
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/coral/foundation/tabs"
            maximized="{Boolean}true">
            <items jcr:primaryType="nt:unstructured">
                 <tab1 jcr:primaryType="nt:unstructured"
                          jcr:title="Program Info"
                          sling:resourceType="granite/ui/components/foundation/section" />
                <tab2 jcr:primaryType="nt:unstructured"
                          jcr:title="Program Info"
                          sling:resourceType="granite/ui/components/foundation/section" />
            </items>
        </tabs>
      </items>
    </content>
</jcr:root>