Highlighted

AEM6.4 - Multifield with Show checkbox in javascript

Avatar

Avatar

sunitac70336244

Avatar

sunitac70336244

sunitac70336244

07-01-2019

Dear All, I am using the multi field in AEM 6.4 and I have done the below cq_dialog.

<?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="Hero Poster Marquee"

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

    extraClientlibs="[custom.dialog-tab-width,trowecorp.landing.poster]"

    width="900px">

    <content

        jcr:primaryType="nt:unstructured"

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

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

            <column

                jcr:primaryType="nt:unstructured"

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

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

                    <carousel

                        jcr:primaryType="nt:unstructured"

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

                        composite="{Boolean}true"

                        fieldLabel="Carousel Slides">

                        <field

                            jcr:primaryType="nt:unstructured"

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

                            name="./NestedSlides">

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

                                <column

                                    jcr:primaryType="nt:unstructured"

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

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

                                        <headerSize

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Header Size"

                                            name="./headerSize">

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

                                                <font32

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Font Size-32,Line-height-46"

                                                    value="hero-title32"/>

                                                <font45

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-45,Line-height-46"

                                                    value="hero-title45"/>

                                                <font50

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-50,Line-height-60"

                                                    value="hero-title50"/>

                                            </items>

                                        </headerSize>

                                        <header

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Section Header"

                                            name="./title"

                                            useFixedInlineToolbar="{Boolean}true">

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

                                                <format

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <justify

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <lists

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <paraformat

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <links

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <image

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <findreplace

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <subsuperscript

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <spellcheck

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <misctools

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

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

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

                                                            <trademark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8482; &amp;nbsp;"/>

                                                            <copyright

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#169; &amp;nbsp;"/>

                                                            <registered

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#174; &amp;nbsp;"/>

                                                            <mdash

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#151; &amp;nbsp;"/>

                                                            <leftdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8220; &amp;nbsp;"/>

                                                            <rightdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8221; &amp;nbsp;"/>

                                                            <servicemark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8480; &amp;nbsp;"/>

                                                        </chars>

                                                    </specialCharsConfig>

                                                </misctools>

                                                <styles

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

                                                    <styles jcr:primaryType="cq:WidgetCollection">

                                                        <NimusSansRegular/>

                                                        <NimusSansBold/>

                                                        <NimusSansLight/>

                                                        <NimusSansItalic/>

                                                        <NimusSansBoldItalic/>

                                                        <NimusSansCon/>

                                                        <NimusSansBoldCon/>

                                                    </styles>

                                                </styles>

                                            </rtePlugins>

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

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

                                                    <inline

                                                        jcr:primaryType="nt:unstructured"

                                                        toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">

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

                                                            <justify

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

                                                                ref="justify"/>

                                                            <lists

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

                                                                ref="lists"/>

                                                            <paraformat

                                                                jcr:primaryType="nt:unstructured"

                                                                items="paraformat:getFormats:paraformat-pulldown"

                                                                ref="paraformat"/>

                                                            <styles

                                                                jcr:primaryType="nt:unstructured"

                                                                items="styles:getStyles:styles-pulldown"

                                                                ref="styles"/>

                                                        </popovers>

                                                    </inline>

                                                </cui>

                                            </uiSettings>

                                        </header>

                                        <paragraphSize

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Paragraph size"

                                            name="./paragraphSize">

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

                                                <font32

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Font Size-32,Line-height-46"

                                                    value="hero-title32"/>

                                                <font45

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-45,Line-height-46"

                                                    value="hero-title45"/>

                                                <font50

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Font Size-50,Line-height-60"

                                                    value="hero-title50"/>

                                            </items>

                                        </paragraphSize>

                                        <title

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Section Paragraph"

                                            name="./heading"

                                            useFixedInlineToolbar="{Boolean}true">

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

                                                <format

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <justify

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <lists

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <paraformat

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <links

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <image

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <findreplace

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <subsuperscript

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <spellcheck

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*"/>

                                                <misctools

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

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

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

                                                            <trademark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8482; &amp;nbsp;"/>

                                                            <copyright

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#169; &amp;nbsp;"/>

                                                            <registered

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#174; &amp;nbsp;"/>

                                                            <mdash

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#151; &amp;nbsp;"/>

                                                            <leftdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8220; &amp;nbsp;"/>

                                                            <rightdoublequote

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8221; &amp;nbsp;"/>

                                                            <servicemark

                                                                jcr:primaryType="nt:unstructured"

                                                                entity="&amp;#8480; &amp;nbsp;"/>

                                                        </chars>

                                                    </specialCharsConfig>

                                                </misctools>

                                                <styles

                                                    jcr:primaryType="nt:unstructured"

                                                    features="*">

                                                    <styles jcr:primaryType="cq:WidgetCollection">

                                                        <NimusSansRegular/>

                                                        <NimusSansBold/>

                                                        <NimusSansLight/>

                                                        <NimusSansItalic/>

                                                        <NimusSansBoldItalic/>

                                                        <NimusSansCon/>

                                                        <NimusSansBoldCon/>

                                                    </styles>

                                                </styles>

                                            </rtePlugins>

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

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

                                                    <inline

                                                        jcr:primaryType="nt:unstructured"

                                                        toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat]">

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

                                                            <justify

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

                                                                ref="justify"/>

                                                            <lists

                                                                jcr:primaryType="nt:unstructured"

                                                                items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

                                                                ref="lists"/>

                                                            <paraformat

                                                                jcr:primaryType="nt:unstructured"

                                                                items="paraformat:getFormats:paraformat-pulldown"

                                                                ref="paraformat"/>

                                                            <styles

                                                                jcr:primaryType="nt:unstructured"

                                                                items="styles:getStyles:styles-pulldown"

                                                                ref="styles"/>

                                                        </popovers>

                                                    </inline>

                                                </cui>

                                            </uiSettings>

                                        </title>

                                        <backgroundimage

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Background Image"

                                            name="./bgImage"

                                            rootPath="/content/dam/trowecorp"/>

                                        <addbutton

                                            jcr:primaryType="nt:unstructured"

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

                                            name="./includebutton"

                                            text="Add button (bottom)"

                                            value="{Boolean}true"/>

                                        <buttonstyle

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Button style"

                                            name="./btnstyle">

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

                                                <orange

                                                    jcr:primaryType="nt:unstructured"

                                                    text="Orange"

                                                    value="btn-trp-callout-org"/>

                                                <trpblue

                                                    jcr:primaryType="nt:unstructured"

                                                    defaultValue="true"

                                                    text="Primary - TRP Dark Blue"

                                                    value="btn-trp-primary"/>

                                            </items>

                                        </buttonstyle>

                                        <buttontext

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Button Text"

                                            name="./btntext"/>

                                        <link

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Button Link"

                                            name="./link"

                                            rootPath="/content/trowecorp"/>

                                        <newwindow

                                            jcr:primaryType="nt:unstructured"

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

                                            name="./newWindow"

                                            text="Open new window"

                                            value="{Boolean}true"/>

                                        <sloganImage

                                            jcr:primaryType="nt:unstructured"

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

                                            fieldLabel="Invest With Confidence Slogan"

                                            name="./sloganImage"

                                            rootPath="/content/dam/trowecorp/slogans"/>

                                        <investcopyrightimage

                                            jcr:primaryType="nt:unstructured"

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

                                            name="./investimage"

                                            text="Invest With Confidence Image">

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

                                                <none

                                                    jcr:primaryType="nt:unstructured"

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

                                                    defaultValue="true"

                                                    text="None"

                                                    value="1"/>

                                                <top

                                                    jcr:primaryType="nt:unstructured"

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

                                                    text="Top"

                                                    value="2"/>

                                                <bottom

                                                    jcr:primaryType="nt:unstructured"

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

                                                    text="Bottom"

                                                    value="3"/>

                                            </items>

                                        </investcopyrightimage>

                                        <includeChooseSite

                                            jcr:primaryType="nt:unstructured"

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

                                            name="./chooseSite"

                                            text="Include Choose Site?"

                                            value="{Boolean}true"/>

                                    </items>

                                </column>

                            </items>

                        </field>

                    </carousel>

                </items>

            </column>

        </items>

    </content>

</jcr:root>

Before it was not multi field. But after  changing to multi field , when I check the the Add button checkbox then button style and button text should come.

But either checked "or" unchecked the checkbox , the button style and button text is always displaying.

1662414_pastedImage_1.png

The JavaScript file name is script.js with below contents.

(function ($, $document) {

    $document.ready(function () {

        $document.on("dialog-ready", function() {

            if($("coral-checkbox[name='./includebutton'] :checked").length === 1)

            {

            $("input[name='./btntext']").parent().show();

                $("input[name='./link']").parent().show();

                $("coral-select[name='./btnstyle']").parent().show();

             }

            else

            {

            $("input[name='./btntext']").parent().hide();

                $("input[name='./link']").parent().hide();

                $("coral-select[name='./btnstyle']").parent().hide();

             }

            $("coral-checkbox[name='./includebutton']").on("click", function() {

            if($("coral-checkbox[name='./includebutton'] :checked").length === 1){

            $("input[name='./btntext']").parent().show();

                    $("input[name='./link']").parent().show();

                    $("coral-select[name='./btnstyle']").parent().show();

                 } else {

                $("input[name='./btntext']").parent().hide();

                    $("input[name='./link']").parent().hide();

                    $("coral-select[name='./btnstyle']").parent().hide();

                 }

            });

        });

});

}(jQuery, jQuery(document)));

Can anybody please help me on why I am facing this issue after changing to MultiField.

Replies

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

07-01-2019

Looks like your JavaScript is not correct to work within a MultiField. I will look for examples.

Highlighted

Avatar

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281

Avatar

Gaurav-Behl

MVP

Total Posts

1.1K

Likes

226

Correct Answer

281
Gaurav-Behl
MVP

07-01-2019

($("coral-checkbox[name='./includebutton'] :checked")  will evaluate to a boolean value either true or false

After that,  (boolean value).length ===1 doesn't make sense hence its breaking and going inside if block

Try this

if($("coral-checkbox[name='./includebutton'] :checked")) {..... }

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

08-01-2019

Also - check this article - as suggested by our AEM team member -- http://experience-aem.blogspot.com/2017/06/aem-63-touch-ui-nested-coral2-composite-multifield.html

Highlighted

Avatar

Avatar

sunitac70336244

Avatar

sunitac70336244

sunitac70336244

08-01-2019

Dear All, Actually wrongly I have changed sling:resourcetype to granite/ui/components/foundation/form/select . That is why it was not working. Now I have changed to granite/ui/components/coral/foundation/form/select and it is working fine now. Thanks a lot all of your help.

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

08-01-2019

I am very happy to hear you have it working.