In earlier post, we have seen dynamically populating the drop down in the dialog using Javascript [POST]. If we see the drop down, there will be no default value available before we select.
To set the default value, we have a property called defaultValue. There are two things with respect to an option. text and value. We need to give value of the option to the defaultValue property.
So how do we set the defaultValue for the dynamically populated drop down. To achieve this, we can not follow the approach used in that post. We should have a listener while loading of the dialog which populates the values dynamically and that should set the defaultValue also. In this case, optionsProvider property is not required as this listener itself can set the options while loading itself.
The reason for setting the default value using listener is, defaultValue property does not accept the script or a JSON. It accepts only the String value. So the listener namely loadcontent (called when the dialog loads) should be used to set the default.
Below code will set the first element of JSON as the defaultValue.
function(dialog){
var selection = dialog.getField("./image"); // Getting the drop down by it's name
/*
Dynamically render the values as in previous post ("https://myprogressivelearning.wordpress.com/2015/01/13/dynamic-options-using-javascript-in-adobe-aem-dialog/")
*/
selection.setOptions(images); // Setting the options to the drop down
selection.setValue(images[0].value); // setting the defaultValue of drop down
}
name of the listener has to be listeners. Since we are doing this operation while loading of the dialog content the listeners node should be the direct child node of the dialog.
Properties of drop down:
Properties of listeners:
This will show the first value of the options as the default value while opening the dialog itself.
Note:
1. listener is the node of nt:unstructured type which typically have the events as properties. Example for events are,
loadcontent – while loading the content the script of that property will be called.
beforesubmit – before pressing the OK button
for drop down we have few listener event like selectionchanged, etc.,
2. defaultValue should be the value of the option provided. If we give text, it will not work.
3. defaultValue and allowBlank will not go together sometimes. When allowBlank is false, what ever value be the defaultValue, it will take the first value as
defaultValue. So when ever defaultValue is provided, we don’t have to provide allowBlank property as false. It is meaningless!
This post covers few ideas about the drop down values populating and default value setting. If you have any queries or ideas, let us discuss through comments
You may also interested in:
|
Dynamic options using Javascript in Adobe AEM Dialog
Class Loading in OSGI (what? and How?) Introduction to Sling – CQ5 building block |
Santhosh's Professional Learning 