SOLVED
Custom validation to add at least 2 items in childreneditor in custom component that extends carousel core component
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 
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
Correct answer by
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
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
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?
Correct answer by
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
