Menu

Dropdown fields in Taxi enable you to give predefined options for editors to choose from, whether it be for colours, fonts, images or font sizes. This means your teams are only able to choose the options shown in the dropdown and nothing else, so you can be sure your emails will always be on brand. 

Another level of control can be added to a dropdown field, by giving the option to hide or show a field in the editor depending on which option is selected in the dropdown.

For example, you have a multi value dropdown to control the text and background colour of a module, but you also want the option to apply custom colours for them all too. You'll therefore have individual fields to control these two colours as well as the dropdown choices. However, by default, they will always appear in the editor even if you are selecting a choice from the dropdown with the colours already defined. If you nest these fields inside the dropdown field, you can make sure they only appear when the appropriate choice is selected.

To do this, start off with a dropdown field with the choices you need.

<field type="dropdown" names="show_custom text_colour bg_colour" label="Choose Image">  
<choice label="Black text and White background" show_custom="" text_colour="#00000" bg_colour="#ffffff"></choice>  
<choice label="White text and Black background" show_custom="" text_colour="#ffffff" bg_colour="#000000"></choice>  
<choice label="Custom Colours" show_custom="true"></choice>  
</field>

Then inside the dropdown field we need to add our text field so that it can be shown or hidden based on what is chosen in the dropdown.

<field type="dropdown" names="show_custom text_colour bg_colour" label="Choose Image">
 <choice label="Black text and White background" show_custom="" text_colour="#00000" bg_colour="#ffffff"></choice>
 <choice label="White text and Black background" show_custom="" text_colour="#ffffff" bg_colour="#000000"></choice>
 <choice label="Custom Colours" show_custom="true"></choice>
<field type="colour" name="cust_text_colour" label="Custom Text Colour"></field>
<field type="colour" name="cust_bg_colour" label="Custom Background Colour"></field>
</field>

In the field tag, instead of just one name, you use three names as this is a multivalue dropdown.

Two of these are text_colour and bg_colour and they will be used in each choice tag to set the colours for that choice. If the first one is selected, the text colour will be #000000 and the background colour will be #ffffff.

The other name is 'show_custom'. This name/attribute is used to determine whether or not the custom colour fields are shown or hidden. In these choice tags, if this attribute has a value, then the colour fields will show, if it is empty then the colour fields will be hidden.

The name 'show_custom' isn't what makes this attribute control the nested field, it is the fact that it is the first name in the names attribute. Also, in the choice tag, the value doesn't have to be 'true' to make the nested fields show, the attribute just needs to have any value.

Now you have a name of  'show_custom', you'll need to reference it in your HTML to avoid any warning messages when uploading your EDS to Taxi.

<table replace-bgcolor="{% if show_custom %}{{cust_bg_colour}}{% else %}{{bg_colour}}{% endif %}">

The 'show_custom' name is doing two things.

  1. When the final choice is selected it is showing the two custom fields in the editor. This is because the show_custom attribute has a value.
  2. When the final choice is selected, the custom background colour/text colour fields are used to control the colour. If any of the other choices are selected, the predefined colours from the text_colour and bg_colour attributes are used.

Using this to show and hide colour fields is just one example, nesting fields inside a dropdown can be done with any field type.

Complete Snippet

HTML

<field type="dropdown" names="show_custom text_colour bg_colour" label="Choose Image">

 <choice label="Black text and White background" show_custom="" text_colour="#00000" bg_colour="#ffffff"></choice>
 <choice label="White text and Black background" show_custom="" text_colour="#ffffff" bg_colour="#000000"></choice>
 <choice label="Custom Colours" show_custom="true"></choice>

<field type="colour" name="cust_text_colour" label="Custom Text Colour"></field>
<field type="colour" name="cust_bg_colour" label="Custom Background Colour"></field>

</field>

<table replace-bgcolor="{% if show_custom %}{{cust_bg_colour}}{% else %}{{bg_colour}}{% endif %}">
<tr>
<td replace-style="color:{% if show_custom %}{{cust_text_colour}}{% else %}{{text_colour}}{% endif %};">

Text

</td>
</tr>
</table>

← Back to /Code