Refresh Granite Data Source when another Granite Field Changes Value

[#1]

Hello,

I am trying to figure out how to refresh a granite data source for a select field from a pathfield that I will like to also pass into the data source.

Basically:

1. Set a path (pathToOptions) that will look at a content fragment model

2. Datasource is called, each time the path value has changed in the dialog, to Sling Servlet to retrieve all fields of content fragment

3. Author dialog generates options, for granite select drop down (cfOptions), with the fields from the data source.

 <pathToOptions jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
     fieldLabel="CF Path"
     rootPath="/content"
     name="./pathToOptions"/>
 <cfOptions jcr:primaryType="nt:unstructured"
     sling:resourceType="granite/ui/components/coral/foundation/form/select"
     fieldLabel="CF Options"
     name="./cfOptions">
     <datasource jcr:primaryType="nt:unstructured"
         sling:resourceType="/bin/path/to/servlet"/>
 </resProperties>

(Variable names and paths are just generic)

Without so much knowledge of AEM Granite data sources and Apache Sling API; is there a viable method with the data source?

[jeremy_trpka-pe · Accepted solution]

Hi,

This is not possible without javascript.

You need to write javascript to update dropdown on value change and dialog load.

In the below example I am choosing articles from pathbrowser field and updating dropdown with child pages.

example - https://github.com/arunpatidar02/aem63app-repo/blob/master/js/dynamic-dropdown.js

[jeremy_trpka-pe · Accepted solution]

Yeah, I came to the conclusion it just did not look like I would be able to do this with just a data source. Thanks for the reply.

[Raushan · Accepted solution]

Hi @Arun_Patidar . i want to use your js but i have some doubt:

var article = document.querySelector('#articleRootId'); ->  this will be selected value
var defaultSelect = document.querySelector('#defaultArticleId'); why we are using this ?

and in last
var varHiddenSel = $('input[name="./selectionHidden"]'); why we are using this ?
var varSel = $('input[name="./defaultArticle"]'); why we are using this ?


what will come varHiddenSel and varSel , and why we are using this. could you please help