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
Solved! Go to Solution.
Views
Replies
Total Likes
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
you have to write custom javascript validation for multifield
@arunpatidar Please go through the XML. there's no multifield resourceType in the dialog nodes.
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
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)?
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?
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).
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 @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.
Views
Likes
Replies