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

[surenk]

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

Something like this.. 

[arunpatidar · Accepted solution]

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

[surenk]

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

[arunpatidar]

you can create the structure like below :

[surenk]

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

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

[surenk]

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>