New Participant

Solved

adding classes to dialog box elements

Forum|Forum|8 years ago
October 2, 2017
1 reply
7745 views

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">

<Contact

jcr:primaryType="nt:unstructured"

jcr:title="Contact Block"

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

margin="{Boolean}false">

<column

jcr:primaryType="nt:unstructured"

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

<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">

<column

jcr:primaryType="nt:unstructured"

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

<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>

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 Techaspect_Solu

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"/>

<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"/>

<column

jcr:primaryType="nt:unstructured"

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

<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

Techaspect_SoluAccepted solution

New Participant

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"/>

<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"/>

<column

jcr:primaryType="nt:unstructured"

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

<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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded