Level 4

Solved

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

Forum|Forum|3 years ago
October 18, 2022
3 replies
2256 views

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:

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

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

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 arunpatidar

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

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

arunpatidar

Community Advisor

you have to write custom javascript validation for multifield

Arun Patidar

A

arindam6600Author

Level 4

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

Saravanan_Dharmaraj

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

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

A

arindam6600Author

Level 4

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

Saravanan_Dharmaraj

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?

A

arindam6600Author

Level 4

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

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded