Configuration 'depends' with front and backend model

Question

I'm having difficulties with the 'depends' functionality in the configuration.

Normally, adding <depends> to some configuration option, it's hidden unless the given option's value matches.

For example:

<option_one>
 <label>Option 1</label>
 ...
</option_one>
<option_two>
 <label>Option 2</label>
 ...
 <depends><option_one>1</option_one></depends>
</option_two

Obviously I'm missing some fields, but you get the point. Option 2 only appears when Option 1 has the value '1'.

Now my problem is, when I try to apply this to an option with a backend and frontend model, this depending doesn't work:

<option_three>
 ...
 <frontend_model>module/adminhtml_form_field_test</frontend_model>
 <backend_model>adminhtml/system_config_backend_serialized_array</backend_model>
 ...
 <depends><option_one>1</option_one></depends>
</option_three>

This option won't take Option 1 in account, it's just always visible.

Am I doing something wrong, or is this a bug, or 'works as designed'?

Answer 1

If you do not use frontend_model your html for two fields will look like this

<tr id="row_you_dependency_field_id">
 <td class="label"><label for="you_dependency_field_id">Dependency Field</label></td>
 <td class="value">
 <select id="you_dependency_field_id" name="groups[general][fields][you_dependency_field_id][value]" class=" select">
 <option value="1">Yes</option>
 <option value="0" selected="selected">No</option>
 </select>
 </td>
</tr>
<tr id="row_your_dependent_field_id">
 <td class="label">
 <label for="your_dependent_field_id">Dependent Field</label>
 </td>
 <td class="value">
 <select id="your_dependent_field_id" name="groups[general][fields][your_dependent_field_id][value]" class=" select">
 <option value="1">Yes</option>
 <option value="0" selected="selected">No</option>
 </select>
 </td>
</tr>

The javascript to show/hide dependent field will look like this

new FormElementDependenceController({"your_dependent_field_id":{"you_dependency_field id":"1"}});

And show/hide will work fine because both ids are present in html.

But if you use frontend_model the value for the second field is rendered by your custom block module/adminhtml_form_field_test and does not contain id of the dependent field and javascript just does not know what to hide.

<tr id="row_you_dependency_field_id">
 <td class="label"><label for="you_dependency_field_id">Dependency Field</label></td>
 <td class="value">
 <select id="you_dependency_field_id" name="groups[general][fields][you_dependency_field_id][value]" class=" select">
 <option value="1">Yes</option>
 <option value="0" selected="selected">No</option>
 </select>
 </td>
</tr>
<tr id="row_your_dependent_field_id">
 <td class="label">
 <label for="your_dependent_field_id">Dependent Field</label>
 </td>
 <td class="value">
 ...
 //The output of your frontend_model
 ...
 </td>
</tr>

So go to _toHtml() method of module/adminhtml_form_field_test and wrap the output into div and specify id for it

$fieldId = $this->getElement()->getId();
//your html 
<div id="field id here">
 //your frontend_model html
</div>

• Maikel Koek: Didn't test this yet, but it sounds legit. Seems like a bug to me. I didn't overwrite _toHtml in my custom model, but I think I'm going to rewrite this method to prevent this from happening in the future!
• Luke A. Leber: You sir, are a gentleman and a scholar. Wrapping the output of the frontend_model with '<div id="' . $this->getElement()->getId() . '">' absolutely works.