Limit a dialog filed in AEM 6.2

[cquser1]

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

[Ratna_Kumar]

Hi,

You can do something like dialog field validation for your use case in the below article.

//http://adobeaemclub.com/aem-touch-ui-dialog-validation/

Anyhow I will look into it!!

~Ratna.

[cquser1]

Hi Ratna,

Thank you for your reply.

From what I understand this code snippet, can be used as-is, but the dialog structure has got to be correct. Somehow, I am not able t get this to work.

If you can provide me the dialog structure to be made use of here, would be really helpful.

[Var]

cquser1 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

[kautuk_sahni]

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

[cquser1]

Hi Nate/Var/Kautuk,

Thanks a ton for your reply.

This really helped.

Nate : Thank you for the detailed description. My sincere thanks to you.

Var : Thank you for sharing the snippet. 

Once again, thank you all.