Expand my Community achievements bar.

SOLVED

Custom validation to add at least 2 items in childreneditor in custom component that extends carousel core component

Avatar

Level 5

Hi,

 

I have created a dialog for a component which extends the carousel core component and I have a condition wherein I have to add minimum 2 items into the childreneditor for the dialog to accept the inputs. The dialog XML is attached.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Carousel"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.carousel.v1.editor,abc.carousel]"
    helpPath="https://www.adobe.com/go/aem_cmp_carousel_v1"
    trackingFeature="core-components:carousel:v1">
    <content
        granite:class="cmp-carousel__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <items
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Items"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <slides
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </items>
                    <styles
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Styles"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <dropdown
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                name="./dropdown">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <light
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Option 1"
                                                        value="light"/>
                                                    <dark
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Option 2"
                                                        value="dark"/>
                                                </items>
                                            </dropdown>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </styles>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

Refer to the screenshot below:

arindam6600_0-1666103263433.png

The Add button is for adding components (same behavior as carousel core component) the resource type being : core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor

arindam6600_1-1666103345787.png

I want to add a custom validation so that author needs to add at least 2 items to mark the dialog done (click on the arindam6600_2-1666103391958.png mark). The architecture is done, wherein I have created a clientlib folder where the JS will reside and I will use extraClientlibs to fetch the same. 

Can someone please help me with the JS code which can do the validations as per above criteria?
 @BrianKasingli  @B_Sravan @Saravanan_Dharmaraj @lukasz-m @Pulkit_Jain_ @Jagadeesh_Prakash @Sachin_Arora_ @SantoshSai @milind_bachani @PratheepArunRaj 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

The multifields are coming from supertype component dialog which is core/wcm/components/panelcontainer/v1/panelcontainer, you don't have to do anything there, just check the multifield in this dialog when it is opened and use that rendered HTML for writing a logic in javascript



Arun Patidar

View solution in original post

9 Replies

Avatar

Community Advisor

you have to write custom javascript validation for multifield 



Arun Patidar

Avatar

Level 5

@arunpatidar Please go through the XML. there's no multifield resourceType in the dialog nodes.

Avatar

Community Advisor

you need to write the custom script to check for min/max in multifield. 

Check out this example. http://experience-aem.blogspot.com/2018/01/aem-6310-touch-ui-add-min-max-limit-to-coral-3-multifield...

Its written for 6.3.1 but you will get the idea on how to write the logic

Avatar

Level 5

Hi @Saravanan_Dharmaraj thanks for the link you shared. I have one query over here -- this is implemented for multifield right? But over here we are using childreneditor as the resource type. So my question is do i add the properties to childreneditor node as shown in the article (for multifield)?

Avatar

Community Advisor

You can have any form elements under the multifield and that script should work at the multifield level. Could you post your dialog xml to help more? 

 

Avatar

Level 5

Hi @Saravanan_Dharmaraj here is the xml.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Carousel"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.carousel.v1.editor,abc.carousel]"
    helpPath="https://www.adobe.com/go/aem_cmp_carousel_v1"
    trackingFeature="core-components:carousel:v1">
    <content
        granite:class="cmp-carousel__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <items
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Items"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <slides
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </items>
                    <styles
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Styles"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <dropdown
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                name="./dropdown">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <light
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Option 1"
                                                        value="light"/>
                                                    <dark
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Option 2"
                                                        value="dark"/>
                                                </items>
                                            </dropdown>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </styles>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

I don't have any multifield in my code. The ADD button that you see comes from the childreneditor (inherited from the core component).

Avatar

Level 5

Hi @Saravanan_Dharmaraj and @arunpatidar  please find the xml below and please guide me as to how and where to add the custom validation.

Avatar

Correct answer by
Community Advisor

The multifields are coming from supertype component dialog which is core/wcm/components/panelcontainer/v1/panelcontainer, you don't have to do anything there, just check the multifield in this dialog when it is opened and use that rendered HTML for writing a logic in javascript



Arun Patidar

Avatar

Level 5

@arunpatidar @Saravanan_Dharmaraj I have pasted the XML. Since there's no multifield, I'm still not having an idea as to how to implement this custom logic. Please advise.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/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="Carousel"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.carousel.v1.editor,abc.carousel]"
    helpPath="https://www.adobe.com/go/aem_cmp_carousel_v1"
    trackingFeature="core-components:carousel:v1">
    <content
        granite:class="cmp-carousel__editor"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <items
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Items"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <slides
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </items>
                    <styles
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Styles"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <dropdown
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                name="./dropdown">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <light
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Option 1"
                                                        value="light"/>
                                                    <dark
                                                        jcr:primaryType="nt:unstructured"
                                                        text="Option 2"
                                                        value="dark"/>
                                                </items>
                                            </dropdown>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </styles>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>



@PratheepArunRaj  @BrianKasingli  @B_Sravan  @lukasz-m @Pulkit_Jain_ @Jagadeesh_Prakash @sachinarora @SantoshSai @milind_bachani If anyone of you could help, please do let me know.