SOLVED
Limit a dialog filed in AEM 6.2
wrote...
Hi All,
https://github.com/nateyolles/aem-touch-ui-validation/blob/master/clientlib-touch-ui-validation/js/m... Following this article by Nate Yolles.
My understanding is that I need to place this file under component clientlibs folder and have the dialog structure. Suppose I want to restrict a textfield say minimum 3 and maximum 5.
Tried various dialog options, but was not able to get this to work.
If someone can please provide me the complete dialog structure to restrict textfield to minimum of 3 and maximum of 5, would be really helpful.
<title
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldDescription=" component title"
fieldLabel="Title "
name="./Title"/>
Try the below code
<cq:dialog xmlns:MP="http://ns.microsoft.com/photo/1.2/" xmlns:pdf="http://ns.adobe.com/pdf/1.3/" xmlns:mix="http://www.jcp.org/jcr/mix/1.0" xmlns:s7userdata="http://www.day.com/s7userdata/1.0/" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:DICOM="http://ns.adobe.com/DICOM/" xmlns:xmpBJ="http://ns.adobe.com/xap/1.0/bj/" xmlns:album="http://ns.adobe.com/album/1.0/" xmlns:prismusagerights="http://prismstandard.org/namespaces/prismusagerights/2.1/" xmlns:prl="http://prismstandard.org/namespaces/prl/2.1/" xmlns:xmpRights="http://ns.adobe.com/xap/1.0/rights/" xmlns:exifEX="http://cipa.jp/exif/1.0/" xmlns:dex="http://ns.optimasc.com/dex/1.0/" xmlns:xmpNote="http://ns.adobe.com/xmp/note/" xmlns:oak="http://jackrabbit.apache.org/oak/ns/1.0" xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:idPriv="http://ns.adobe.com/xmp/InDesign/private" xmlns:slingevent="http://sling.apache.org/jcr/event/1.0" xmlns:scg="http://www.adobe.com/social/scg/1.0" xmlns:lr="http://ns.adobe.com/lightroom/1.0/" xmlns:sv="http://www.jcp.org/jcr/sv/1.0" xmlns:oauth="http://oauth.net/" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:stFNT="http://ns.adobe.com/xap/1.0/sType/Font#" xmlns:tiff="http://ns.adobe.com/tiff/1.0/" xmlns:stMfs="http://ns.adobe.com/xap/1.0/sType/ManifestItem#" xmlns:rep="internal" xmlns:prism="http://prismstandard.org/namespaces/basic/2.1/" xmlns:plus="http://ns.useplus.org/ldf/xmp/1.0/" xmlns:Iptc4xmpExt="http://iptc.org/std/Iptc4xmpExt/2008-02-29/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmlns:psAux="http://ns.adobe.com/exif/1.0/aux/" xmlns:xmpGImg="http://ns.adobe.com/xap/1.0/g/img/" xmlns:social="http://www.adobe.com/social/1.0" xmlns:Iptc4xmpCore="http://iptc.org/std/Iptc4xmpCore/1.0/xmlns/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:xmpG="http://ns.adobe.com/xap/1.0/g/" xmlns:pdfx="http://ns.adobe.com/pdfx/1.3/" xmlns:acdsee="http://ns.acdsee.com/iptc/1.0/" xmlns:s7sitecatalyst="http://www.day.com/s7sitecatalyst/1.0/" xmlns:exif="http://ns.adobe.com/exif/1.0/" xmlns:adobe_dam="http://www.adobe.com/adobe_dam/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:xmpDM="http://ns.adobe.com/xmp/1.0/DynamicMedia/" xmlns:cc="http://creativecommons.org/ns#" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xmpPLUS="http://ns.adobe.com/xap/1.0/PLUS/" xmlns:crs="http://ns.adobe.com/camera-raw-settings/1.0/" xmlns:vlt="http://www.day.com/jcr/vault/1.0" xmlns:MicrosoftPhoto="http://ns.microsoft.com/photo/1.0" xmlns:mediapro="http://ns.iview-multimedia.com/mediapro/1.0/" xmlns:xmpTPg="http://ns.adobe.com/xap/1.0/t/pg/" xmlns:dam="http://www.day.com/dam/1.0" xmlns:viewerpreset="http://www.day.com/viewerpreset/1.0/" xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:photoshop="http://ns.adobe.com/photoshop/1.0/" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:crx="http://www.day.com/crx/1.0" jcr:primaryType="nt:unstructured" jcr:title="textfield validation demonstration" sling:resourceType="cq/gui/components/authoring/dialog"> <script/> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <layout jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <textA jcr:primaryType="nt:unstructured" fieldDescription="No validation" fieldLabel="No validation" name="./textA" sling:resourceType="granite/ui/components/foundation/form/textfield"/> <textB jcr:primaryType="nt:unstructured" fieldDescription="Required, Min & Max length" fieldLabel="Required, Min & Max length" maxlength="5" minlength="3" name="./textB" required="true" sling:resourceType="granite/ui/components/foundation/form/textfield"/> <textC jcr:primaryType="nt:unstructured" fieldDescription="Email" fieldLabel="Email" name="./textC" pattern="email" required="true" sling:resourceType="granite/ui/components/foundation/form/textfield"/> <textD jcr:primaryType="nt:unstructured" fieldDescription="Custom Regex for social security number must match ^\d{3}-\d{2}-\d{4}$" fieldLabel="Custom Regex" name="./textD" pattern="^\d{3}-\d{2}-\d{4}$" required="true" sling:resourceType="granite/ui/components/foundation/form/textfield"/> <textE jcr:primaryType="nt:unstructured" activeValidation="true" fieldDescription="Start typeing "http://www.adobe.com" and notice the validation happens on keypress rather than on blur." fieldLabel="URL with active validation" name="./textE" pattern="url" required="true" sling:resourceType="granite/ui/components/foundation/form/textfield"/> </items> </column> </items> </content> </cq:dialog>Which works fine for me as shown below screenshots.
~VAr
On top of what "VAR" had shared, please have a look at this GEM session:
Link:- https://docs.adobe.com/content/ddc/en/gems/customizing-dialog-fields-in-touch-ui.html
// Customizing Dialog Fields in Touch UI
There are a number of ways to accomplish this, but one of the way to handle this is via clientlibs that are called during AEM dialogs. You will need to do two things:
Create a clientlib that has logic
Add that clientlib to be called when that specific dialog is in use
Please see the gem session for more details.
~kautuk
Kautuk Sahni
