Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Limit a dialog filed in AEM 6.2

cquser1
Level 8
Level 8

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

1 Accepted Solution
nateyolles2
Correct answer by
Level 1
Level 1
6 Replies
Ratna_Kumar
Community Advisor
Community Advisor

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

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

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

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

nateyolles2
Correct answer by
Level 1
Level 1
cquser1
Level 8
Level 8

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.