How to populate the dropdown in component editing screen using anguilla framework?

Question

Am trying to retrieve the drop down object using the below code onWindowLoad event in component editing screen. But failed as i am unable to get the id for the OOB dropdown control. How to find the id of OOB dropdown control(added in schema design phase) and populate the values. The dropdown is within a multivalued embedded schema which would be repeated.

$controls.getControl($(".keywordselect"), "Tridion.Controls.Dropdown");

Requirement: Location selection Author should able to select the state based on the selected country. Selected Country and State should be visible in component editing screen. N.B: Tree view cant be used.

Pseudocode: I have two dummy dropdowns in component editing screen. I need to populate the first dropdown(Country) onWindowLoad event using anguilla framework by retrieving all abstract keywords within the 'Location' category. onChange event of first dropdown I need to populate the second drop down(State) by populating all Normal Keywords within the selected Country abstract keyword. Am not able to retrieve the OOB drop down object in js file as these drop downs doesn't have an unique identifiers. Please suggest me a valid solution to achieve this requirement.

Answer 1

you might wanna take a look on how to access every field in the component view here:

https://code.google.com/p/tridion-field-behavior-injection/

Basically you can use the Tridion.Controls.FieldBuilder available in the Component view and then call the getField method of such object. You'll need the XML name of the field in that method.

Once you have the field object is a matter of finding the drop down element. In a regular text field you'd get it by calling field.control.input or something similar. Do check the link above. The file you want to check in the Google code project is FBIHandler.js. It contains a bunch of methods to play with the field builder.

As a matter of fact, I am not entirely sure what the use case for you to populate the drop down is, but you might wanna consider to implement your own "behavior" using the FBI framework above.

There's not much documentation as of now, but I will be updating the wiki next week.

Update:

Here an example on how to access "Test6" (xml name) field on my component which is based on a keyword list:

1. Get the View
2. Get the Field Builder
3. Get the Field
4. Get the Keyword Select control
5. Get its control (dropdown)
6. Manipulate the options

$view = $display.getView();
$fb = $view.properties.controls.fieldBuilder;
$field = $fb.getField("Test6");
$dropdownKeyword = $field.properties.input;
$dropdown = $dropdownKeyword.properties.input

console.debug($dropdown.options)
//[option, option, option, option, option, option, selectedIndex: 0, namedItem:     function, add: function, remove: function, item: function…]

Answer 2

Try this way:

$controls.getControl($('.input-with-bar .field .input'), 'Tridion.Controls.Dropdown')