Video Outline

In the previous video you already had some introduction on how to work with translation tags in Liquid. In particular, what is the purpose of a translation tag and how it can be set up. Today we will take one step further and explore how to set translations for the drop down options.

Imagine you have a General Settings template in your Annual Accounts workflow, with a list of questions. Each question has a drop down input field that contains a number of options that a user can choose from.

It is often the case that the Annual Accounts have to be prepared in two languages, so that the file can be shown to the client in one language and submitted to the governing authorities in an official language.

Like in this example, we have the same line with the same drop down that should be displayed either in English or in Dutch, depending on the language that is selected in the Silverfin environment.

To make sure that all fields of the template are translated, we should foresee this in the code. So let’s have a look at how this can be done.

We should first create an input field with a select, options and option values attributes:

{% t "annual_accounts_presentation" %}:
{% input custom.annual_layout.dropdown as:select options:"Micro|Small|Medium|Big" option_values:"micro|small|medium|big" %}

With the current code, our options will be always displayed in English. To make sure that the text is displayed in the language that is selected in the Silverfin environment, we need to tweak this code a little bit.

This can be done in two ways:

• You can either set a separate translation for each option, e.g. micro_company, medium_company, etc. and then add all the options to one capture statement (layout_values), separated with a pipe ( | ); or

{% t="micro_company" en:"Micro" nl:"Micro" %}
{% t="small_company" en:"Small" nl:"Klein" %}
{% t="medium_company" en:"Medium" nl:"Middelgroot" %}
{% t="big_company" en:"Big" nl:"Groot" %}

{% capture layout_values %}{% t "micro_company" %}|{% t "small_company" %}|{% t "medium_company" %}|{% t "big_company" %}{% endcapture %}

• You can set one translation tag (layout_values) that will include all options in it and then capture this translation tag.

{% t= "layout_values" nl:"Micro|Klein|Middelgroot|Groot" en:"Micro|Small|Medium|Big" %}
{% capture layout_values %}{% t "layout_values" %}{% endcapture %}

The main difference here is that in case of the first approach, you can still reuse the individual translations in your template. While in case of the second approach, you will need to define the translation tags again.

However, no matter which option you choose, to create a translation tag, you need to:

1. Give a name to your translation tag. In our case it’s called layout_values
2. Add text in the language that you want to apply, using the abbreviations for languages, consisting of two lowercase letters. In this example we will use English and Dutch, thus, we will type en: and nl:. It is also possible to select a default language that will be activated in case you don’t have a defined translation.

Make sure that you always have a = sign when you define a translation tag, otherwise your code will not work.

Now our layout_values variable can be added to the options attribute of our input field. Please note that the variable shouldn’t be printed between the double quotation marks, as it’s not a string anymore.

|{% t "annual_accounts_presentation" %}:
|{% input custom.annual_layout.dropdown as:select options:layout_values option_values:"micro|small|medium|big" %}

With the current code, options will be translated depending on the language selected in the Silverfin environment, which means that we have achieved our goal!

You have probably noticed that our input statement also includes an option_values attribute. Since our options change depending on the language selected, the value of our custom variable will also be different depending on the language settings.

In particular, when the company size is set to “Big”, the value of the custom.annual_layout.dropdown will be “Big” if English language is selected or “Groot” if the Dutch language is selected.

Without the option_values attribute it may be tricky to build an if statement and check on specific options, since you would have to check for the options in all the defined languages, which is not the most efficient way.

{% if custom.annual_layout.dropdown == "Big" or custom.annual_layout.dropdown == "Groot" %}
  The size of the company is Big
{% endif %}

In contrast, by applying the option_values attribute, you can assign a value for each selected option and it will not depend on the language you’re in:

{% t "annual_accounts_presentation" %}:
{% input custom.annual_layout.dropdown as:select options:layout_values option_values:"micro|small|medium|big" %}

We recommend using a descriptive name for the option values and avoid capital letters. For more information on the best practices, please check our Liquid Guidelines!

Once the option values are added, they can be used in an if statement:

{% if custom.annual_layout.dropdown == "big" %}
  The size of the company is Big
{% endif %}

As you can see instead of checking on the actual text, you can check on the option value that doesn’t depend on the language settings.

So now, we have a drop down that contains a few options that are translated based on the language selected in Silverfin and have a specific option value that can be used to build further logic in the code.

Conclusion

To add translations to dropdowns, you need to:

• Set up a translation tag
• Capture the translation tag into a new variable
• Add the new variable to an input field together with the options attribute
• Add option values attribute.