adding classes to dialog box elements

[amyspod]

Hi,

I'm trying to add classes to dialog box elements in AEM and for some reason my classes are not appearing.  I'm trying to add the class to the pathfield <sloganimage> with a class name of 'sloganimage' but it is not working:

<sloganimage

   class="sloganimage"

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

   fieldLabel="Slogan Image"

   name="./sloganimage"

   rootPath="/content/dam/bank"

  />

Does the file have to be structured in a certain way in order for classes to work or is it something else?  Here is my _cq_dialog .content.xml code:  Any input is much appreciated!!

<?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="Footer" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[cq.common.wcm,cq.siteadmin.admin.properties]" mode="edit">

  <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container" class="cq-dialog-content-page">

  <items jcr:primaryType="nt:unstructured">

  <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container" rel="cq-siteadmin-admin-properties-tabs">

  <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/tabs" type="nav" />

  <items jcr:primaryType="nt:unstructured">

  <Contact

   jcr:primaryType="nt:unstructured"

   jcr:title="Contact Block"

   sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

   margin="{Boolean}false">

  <items jcr:primaryType="nt:unstructured">

  <column

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/container">

  <items jcr:primaryType="nt:unstructured">

  <heading1

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Contact block 1"

   level="3"/>

  <icon-label1

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Icon"

   level="4" />

  <icon1

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/foundation/form/select"

   bns-icon-select=""

   required="false"

   cq:showOnCreate="{Boolean}true"

   name="./icon5">

  <datasource

   jcr:primaryType="nt:unstructured"

   sling:resourceType="/apps/bns/components/datasource"

   dataPath="/apps/bank/dialogs/options/icons/modern"

   addNone="{Boolean}true"

   sortItems="{Boolean}true" />

  </icon1>

  <label11 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="true"

   fieldLabel="Title" name="./title"/>

  <label12 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="{Boolean}true"

   fieldLabel="Subtitle" name="./subtitle"/>

  <label13 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="{Boolean}true"

   fieldLabel="CTA Text" name="./ctatext"/>

  <ctalink1

   class="ctalink"

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

   required="{Boolean}true"

   fieldLabel="CTA URL"

   name="./ctalink"

   rootPath="/content/bank"

  />

  <heading2

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Contact block 2"

   level="3"/>

  <icon-label2

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Icon"

   level="4" />

  <icon2

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/foundation/form/select"

   bns-icon-select=""

   required="false"

   cq:showOnCreate="{Boolean}true"

   name="./icon2">

  <datasource2

   jcr:primaryType="nt:unstructured"

   sling:resourceType="/apps/bns/components/datasource"

   dataPath="/apps/bank/dialogs/options/icons/modern"

   addNone="{Boolean}true"

   sortItems="{Boolean}true" />

  </icon2>

  <label21 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="true"

   fieldLabel="Title" name="./title2"/>

  <label22 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="{Boolean}true"

   fieldLabel="Subtitle" name="./subtitle2"/>

  <label23 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="{Boolean}true"

   fieldLabel="CTA Text" name="./ctatext2"/>

  <ctalink2

   class="ctalink"

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

   required="{Boolean}true"

   fieldLabel="CTA URL"

   name="./ctalink2"

   rootPath="/content/bank"

  />

  <heading3

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Contact block 3"

   level="3"/>

  <icon-label3

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Icon"

   level="4" />

  <icon3

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/foundation/form/select"

   bns-icon-select=""

   required="false"

   cq:showOnCreate="{Boolean}true"

   name="./icon3">

  <datasource3

   jcr:primaryType="nt:unstructured"

   sling:resourceType="/apps/bns/components/datasource"

   dataPath="/apps/bank/dialogs/options/icons/modern"

   addNone="{Boolean}true"

   sortItems="{Boolean}true" />

  </icon3>

  <label31 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="true"

   fieldLabel="Title" name="./title3"/>

  <label32 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="{Boolean}true"

   fieldLabel="Subtitle" name="./subtitle3"/>

  <label33 jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   required="{Boolean}true"

   fieldLabel="CTA Text" name="./ctatext3"/>

  <ctalink3

   class="ctalink"

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

   required="{Boolean}true"

   fieldLabel="CTA URL"

   name="./ctalink3"

   rootPath="/content/bank"

  />

  </items>

  </column> 

  </items>

  </Contact>

  <Social

   jcr:primaryType="nt:unstructured"

   jcr:title="Social Media"

   sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

   margin="{Boolean}false">

  <items jcr:primaryType="nt:unstructured">

  <column

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/container">

  <items jcr:primaryType="nt:unstructured">

  <slogan-label1

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Title"

   level="4" />

  <sloganimage

   class="sloganimage"

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

   fieldLabel="Slogan Image"

   name="./sloganimage"

   rootPath="/content/dam/bank"

  />

  <slogan-label2

   class="sloganlabel2"

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Or"

   level="4" />

  <slogantext

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/foundation/form/textfield"

   fieldLabel="Slogan Text"

   name="./slogantext"/>

  <social-label1

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="Social Media Links"

   level="4" />

  <social-label2

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/heading"

   text="NOTE: Empty text fields will hide the link"

   level="5" />

  <facebook jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   fieldLabel="Facebook" name="./fblink"/>

  <twitter jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   fieldLabel="Twitter" name="./twlink"/>

  <instagram jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   fieldLabel="Instagram" name="./instlink"/>

  <youtube jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   fieldLabel="YouTube" name="./utubelink"/>

  <linkedin jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   fieldLabel="Linkedin" name="./lnlink"/>

  <google jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

   fieldLabel="Google+" name="./googlelink"/>

  </items>

  </column>

  </items>

  </Social>

  </items>

  </tabs>

  </items>

  </content>

</jcr:root>

[Techaspect_Solu · Accepted solution]

Hi,

We were able to add class attribute to the pathfield in dialog successfully. Please find the sample dialog xml and screenshot of sample output below which might help you diagnose the issue with your current implementation.

Dialog 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="Forum Test Component"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[cq.test]">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/foundation/container">

        <layout

            jcr:primaryType="nt:unstructured"

            sling:resourceType="granite/ui/components/foundation/layouts/tabs"

            type="nav"/>

        <items jcr:primaryType="nt:unstructured">

            <image-details-tab

                jcr:primaryType="nt:unstructured"

                jcr:title="Image Details"

                sling:resourceType="granite/ui/components/foundation/section">

                <layout

                    jcr:primaryType="nt:unstructured"

                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"

                    margin="{Boolean}false"/>

                <items jcr:primaryType="nt:unstructured">

                    <column

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/foundation/container">

                        <items jcr:primaryType="nt:unstructured">

                            <desktop-image

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"

                                class="coral-Textfield coral-InputGroup-input"

                                fieldLabel="Desktop Image"

                                name="./desktopImagePath"

                                rootPath="/content"/>

                            <mobile-image

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/foundation/form/textfield"

                                fieldLabel="Mobile Image"

                                name="./mobileImagePath"

                                rootPath="/content"/>

                        </items>

                    </column>

                </items>

            </image-details-tab>

        </items>

    </content>

</jcr:root>

Sample output:

As per your code snippet we could see that you've included extraClientlibs="[cq.common.wcm,cq.siteadmin.admin.properties]". Could you verify the below points which could be the reason behind your issue.

1. Please make sure you've created your custom clientLib and check if your categories property is matching with what you've mentioned in extraClientlibs property.

For example -

2. Please check if you've registered your .css file in css.txt.

For example -

Register custom css file (test.css) in css.txt as shown below:

test.css:

.coral-Textfield.coral-InputGroup-input {

    position: relative;

    float: left;

    width: 90% !important;

    margin-bottom: 0;

}

css.txt:

#base=css

test.css

We hope this information helps! Let us know in case you still have this issue.

Regards,

TechAspect Solutions