Tags

, , , , , ,

AEM allows the author to dynamically fetch the content from JCR repository. Dialog box is one of the authoring element for the page. It provides content for each component available in the page. A dialog box is more like a form which receives various values such as text box, text area, radio, drop down etc., This dialog box typically a xml file which defines all the fields as nodes. In this post, we are going to discuss how to dynamically fetch the options for selection xtype. Below mentioned properties are important properties for selection xtype:name

      – name of the node with which it will store in JCR.

type

      – It indicates the appearance type of selection element. Allowed values are : “checkbox”, “radio”, “select” or “combobox”. select – drop down

allowBlank

      – It allows two values. true and false. false indicates It can not be left blank. true is vice versa.

options

      – It will accept string array or json. It should have text and value pair. We can have this options as child node to selection node

defaultValue

    – Default value that should be selected on load of the dialog. value field of the options should be mentioned here.

Dynamically fetching the options: We can fetch the options in many ways. Common ways will be

    1. JSON path in options field 2. Java implementation through a sling URL that returns JSON. We should provide the URL at options field. 3. Adding a Javascript in optionsProvider field. This javascript renders nodes as text and value pairs.

Let us focus how to add Javascript in this post. Remaining methods we will discuss in other posts. In optionsProvider we can directly give the Javascript. This script will retrieve the images from DAM and show as drop down.

function(){ 
	var images = []; 
	var damPath = '/content/dam/images'
	var url = CQ.HTTP.noCaching(damPath+'.infinity.json'); 
	var imagePaths = CQ.HTTP.eval(url); //DAM Url
	
for(var name in imagePaths){ //Looping the node structure
/*
Each image will have the meta data in it's jcr:content. This meta data consists of many values like, its 
type, size, fileFormat etc., We are checking the format is image or not and adding
*/
		if(imagePaths[name]['jcr:content'] && imagePaths[name]['jcr:content'].metadata && imagePaths[name]['jcr:content'].metadata['dc:format'].contains('image')){
			var image = {}; 
                        // each option should contain text and value
                  image['text'] = name; 
			image['value'] = CQ.HTTP.getPath() + '/' + name; images.push(image); 
		} 
	} 
	return images; // returns the JSON
}

The properties for the selection node is as below: selectProp Below is the dialog box which shows the dynamically populated drop down: dropdwn This is all about the options fetching from javascript. If you face any issues, feel free to comment You may also interested in:

What is OSGi?
Class Loading in OSGI (what? and How?)
Introduction to Sling – CQ5 building block
What is a Bundle in OSGi Framework?
Scaffolding in CQ
How does scaffolding work in CQ5 (Adobe AEM)?
SlingPostServlet – AEM building block – Sling Default Servlet

 

 

Advertisement