AEM6.4 - Multifield with Show checkbox in javascript

[sunitac70336244]

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.

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.

[smacdonald2008]

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

[Gaurav-Behl]

($("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")) {..... }

[smacdonald2008]

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

[sunitac70336244]

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.

[smacdonald2008]

I am very happy to hear you have it working.