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

Use granite:data on textfield

MaynorSong
Level 2
Level 2

I am trying to create a validation function for a textfield depending on the content of other textfield in a cq dialog in AEM 6.5.

I am trying to send within the cq:data the textfield name but I can get AEM to render these data attributes on DOM.

 

This is a piece of the cq dialog

<creditsTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits Title"
  name="./creditsTitle_t"/>
<creditsValue
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits"
  validation="custo-validation"
  name="./creditsValue_t">
  <granite:data jcr:primaryType="nt:unstructured"
   dependent-name="creditsTitle_t"/> </creditsValue>

And here is a ss of what gets rendered:

 
 

Capture.PNG

 

I want to be able to send to the "custo-validation" a parameter with the name of the field that it needs to check,in this case is the one above (creditsTitle_t), but it can be anywhere.

So far the only way I have found is with the granite:data but i can't get it working

cq:dialog granite
1 Accepted Solution
Manjunath_K
Correct answer by
Community Advisor
Community Advisor

Hi @MaynorSong ,

Create dialog validation js with below code & category name "cq.authoring.dialog", then add your custom input validation logic based on these two input field values.

 

(function(ns, $, $document){
$(window).adaptTo("foundation-registry").register("foundation.validation.validator",{
selector: "[data-validation='custo-validation']",
validate: function(el){
var creditsValue = el.value;
var creditsTitleValue = $('[name="./creditsTitle_t"]').val();

if(creditsValue && !creditsTitleValue){//add custom input validation code here based on two input field values.
return "Please Configure Credits Title";
}
}
});
})(Granite.author, Granite.$, Granite.$(document));

 

<creditsTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits Title"
  name="./creditsTitle_t"/>
<creditsValue
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits"
  validation="custo-validation"
  name="./creditsValue_t">

 

Hope this helps!

View solution in original post

10 Replies
Vijayalakshmi_S
Community Advisor
Community Advisor

Hi @MaynorSong,

Could you please elaborate on exact validation/logic you are trying to achieve with two text fields. 

In particular, significance of term "can be anywhere" from your query in original post.

MaynorSong
Level 2
Level 2

validation="custo-validation" name="./creditsValue_t">

<granite:data jcr:primaryType="nt:unstructured" dependent-name="creditsTitle_t"/>

</creditsValue>

 

Mostly that part i want to send the dependent name as a data html attribute but is not being shown. that's my main problem. Can I use granite:data on textfields?

Manjunath_K
Correct answer by
Community Advisor
Community Advisor

Hi @MaynorSong ,

Create dialog validation js with below code & category name "cq.authoring.dialog", then add your custom input validation logic based on these two input field values.

 

(function(ns, $, $document){
$(window).adaptTo("foundation-registry").register("foundation.validation.validator",{
selector: "[data-validation='custo-validation']",
validate: function(el){
var creditsValue = el.value;
var creditsTitleValue = $('[name="./creditsTitle_t"]').val();

if(creditsValue && !creditsTitleValue){//add custom input validation code here based on two input field values.
return "Please Configure Credits Title";
}
}
});
})(Granite.author, Granite.$, Granite.$(document));

 

<creditsTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits Title"
  name="./creditsTitle_t"/>
<creditsValue
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits"
  validation="custo-validation"
  name="./creditsValue_t">

 

Hope this helps!

View solution in original post

MaynorSong
Level 2
Level 2

I was trying to avoid hardwiring the r creditsTitleValue = $('[name="./creditsTitle_t"]').val(); . I want the name to be dynamic. That is why I am trying to send it with granite:data so i can grab it from the DOM, but i cant render it.

 

Is it possible to add granite data to textfield? That's my main problem

Manjunath_K
Community Advisor
Community Advisor

@MaynorSong 

Yes its possible add granite:data to textfield(refer below screenshot same data attribute rendered from granite:data) & you can access dependent input as mentioned below.

 

validate: function(el){
var creditsValue = el.value;
var dependentName = $(el).data('dependent-name');
var dependentValue = $('[name="./'+dependentName+'"]');

if(creditsValue && !dependentValue ){//add custom input validation code here based on two input field values.
return "Please Configure Dependent Input";
}
}

 

 

dependent.png

MaynorSong
Level 2
Level 2

I wonder what am I doing wrong on the cq dialog xml, I cant get it to display the data attribute, can you please share the xml file where you took the screenshot from? I mean the whole file, I know you shared the piece of code previously 

Manjunath_K
Community Advisor
Community Advisor

@MaynorSong 

Please find below dialog.xml & FYI its the same 2 fields which you have posted above.

 

<?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="Configuration"
sling:resourceType="cq/gui/components/authoring/dialog"
width="{Long}700">
<content
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">
<tab1
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
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">
<creditsTitle
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Credits Title"
name="./creditsTitle_t"/>
<creditsValue
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Credits"
validation="custo-validation"
name="./creditsValue_t">
<granite:data
jcr:primaryType="nt:unstructured"
dependent-name="creditsTitle_t"/>
</creditsValue>
</items>
</column>
</items>
</tab1>
</items>
</tabs>
</items>
</content>
</jcr:root>

 

dependent1.png

MaynorSong
Level 2
Level 2
I don't know exactly whay I was unable to show that data attribute on the HTML, but I rebuild the entire cq dialog around this two properties and it worked