We’ve introduced a new type of input field to Silverfin templates.
You can now use radio buttons, which are typically used in questionnaires.
Radio buttons offer multiple choices to the user, while only allowing them to select 1.
Example 1: Yes or No
While yes or no questions can be presented with a boolean (true/false) or a dropdown (options: yes|no),
it’s quite common to present radio buttons.
For the question:“Are these expenses deductible?” We want to only accept either yes or no as an answer.
Let’s build a simple HTML table with the question.
<table class="usr-width-100">
<tbody>
<tr>
<td class="">Are these expenses deductible?</td>
<td class="">{% comment %}Radio buttons placeholder{% endcomment %}</td>
</tr>
</tbody>
</table>
Now we add a group of radio buttons.
Radio buttons are always treated as a group, storing the value in 1 custom variable per group.
Within the group, each of the individual buttons are defined as radioinputs, with their own unique value.
<table class="usr-width-100">
<tbody>
<tr>
<td class="">Are these expenses deductible?</td>
<td class="">
{% radiogroup custom.expenses.deductible %}
{% radioinput value:"yes" %}
{% radioinput value:"no" %}
{% endradiogroup %}
</td>
</tr>
</tbody>
</table>
Make your question more effective by making it required, and add labels to make it prettier.
TIP: You can also use translation tags inside labels.
{% t= "Yes" default:"Yes" fr:"Oui" %}
{% t= "No" default:"No" fr:"Non" %}
<table class="usr-width-100">
<tbody>
<tr>
<td class="">Are these expenses deductible?</td>
<td class="">
{% radiogroup custom.expenses.deductible required:true %}
{% radioinput label:"Yes" value:"yes" %}
{% radioinput label:"No" value:"no" %}
{% endradiogroup %}
</td>
</tr>
</tbody>
</table>
Example 2: Multiple choice question
For the question “What type of expenses do you wish to detail?” you want users to choose between the following options:
Operating expenses, administrative expenses and other.
For this case I don’t want the radio buttons to be displayed next to each other, but rather below each other.
Within the radiogroup, I can start new table rows.
Alternatively you could also separate the radio buttons with <br> tags instead of using new table rows.
<table class="usr-width-100">
<tbody>
<tr>
<td class="usr-width-30">What type of expenses do you wish to detail?</td>
{% comment %}Empty cell - options will be displayed in this column{% endcomment %}
<td class=""></td>
</tr>
{% comment %}Radio buttons - 1 per row{% endcomment %}
{% radiogroup custom.expenses.to_detail %}
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Operating expenses" value:"operating_expenses" %}</td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Administrative expenses" value:"administrative_expenses" %}</td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Other expenses" value:"other_expenses" %}</td>
</tr>
{% endradiogroup %}
</tbody>
</table>
The radiogroup tag is actually quite flexible and allows the following:
- opening the radiogroup in a cell on one row and adding 1 radio button
- then closing that row
- then opening new rows with each 1 radio button
- then closing the radiogroup
Let’s also add employee expenses as the default.
<table class="usr-width-100">
<tbody>
<tr>
<td class="usr-width-30">What type of expenses do you wish to detail?</td>
<td class="">
{% radiogroup custom.expenses.to_detail default:"operating_expenses" assign:expenses_type %}
{% radioinput label:"Operating expenses" value:"operating_expenses" %}
</td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Administrative expenses" value:"administrative_expenses" %}</td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Other expenses" value:"other_expenses" %}</td>
</tr>
{% endradiogroup %}
</tbody>
</table>
Like with any other input with a default value, you’ll need to create a variable to access the correct value further on in your code.
You can either add assign in the radiogroup tag, or create a variable separately.
{% radiogroup custom.expenses.to_detail default:"operating_expenses" assign:expenses_type %}
or
{% assign expenses_type = custom.expenses.to_detail | default:"operating_expenses" %}
Now you can use the outcome of the multiple choice question further down in your code.
For example in a case or an if-statement, to dictate whether a piece of code is applicable.
{% case expenses_type %}
{% when "operating_expenses" %}
....
{% case expenses_type %}
{% when "operating_expenses" %}
....
{% else %}
...
{% endcase %}
{% if expenses_type == "other" %}
{% include "parts/table_other_expenses" %}
{% endif %}
BONUS
Add a free input field next to the “other” option when chosen.
<table class="usr-width-100">
<tbody>
<tr>
<td class="usr-width-30">What type of expenses do you wish to detail?</td>
<td class="usr-width-30">
{% radiogroup custom.expenses.to_detail default:"operating_expenses" assign:expenses_type %}
{% radioinput label:"Operating expenses" value:"operating_expenses" %}
</td>
{% comment %}Column to define other expenses{% endcomment %}
<td class=""></td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Administrative expenses" value:"administrative_expenses" %}</td>
<td class=""></td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Other expenses" value:"other_expenses" %}</td>
<td class="">
{% if expenses_type == "other_expenses" %}
{% input custom.expenses.other_to_define placeholder:"Define other expenses" %}
{% endif %}</td>
</tr>
{% endradiogroup %}
</tbody>
</table>
BONUS 2: nest a radiogroup inside another radiogroup
Let’s take the previous example, where someone chooses “operating expenses”, at which point we want to offer the choice between deductible and non-deductible.
The radiogroup tag allows you to open up another radiogroup within.
<table class="usr-width-100">
<tbody>
<tr>
<td class="usr-width-30">What type of expenses do you wish to detail?</td>
<td class="usr-width-30">
{% radiogroup custom.expenses.to_detail default:"operating_expenses" assign:expenses_type %}
{% radioinput label:"Operating expenses" value:"operating_expenses" %}
</td>
<td class="">
{% comment %}When operating expenses are selected - offer new choice on the same row{% endcomment %}
{% if expenses_type == "operating_expenses" %}
{% radiogroup custom.expenses.operating_deductible required:true %}
{% radioinput label:"Deductible" value:"deductible" %}
{% radioinput label:"Non-Deductible" value:"non_deductible" %}
{% endradiogroup %}
{% endif %}
</td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Administrative expenses" value:"administrative_expenses" %}</td>
<td class=""></td>
</tr>
<tr>
<td class=""></td>{% comment %}Empty cell below question{% endcomment %}
<td class="">{% radioinput label:"Other expenses" value:"other_expenses" %}</td>
<td class="">
{% if expenses_type == "other_expenses" %}
{% input custom.expenses.other_to_define placeholder:"Define other expenses" %}
{% endif %}</td>
</tr>
{% endradiogroup %}
</tbody>
</table>
