Handlebars - Advanced: How to Add Conditional Formatting

 Note: This feature is a limited release for clients using Version 2 forms. 

This article is about using Handlebars to reference questions in custom PDF, Word, and HTML documents.  We recommend reading about Basic Question References and Advanced Question References before trying this. 

About

Using Handlebars, you can have things in your PDF/Word/HTML documents displayed in different ways depending on a scenario.  For example, you can display the way an answer is shown depending on what its answer is. 

 

Format the Background Color of an Answer

It is a common request to "highlight" questions that have a certain answer, such as highlighting "Fail" answers Red and "Pass" answers Green.  You can accomplish this by testing if the answer equals a certain value, and then using inline CSS formatting to change the background color based on this.

Handlebars and HTML Sample

<p>
Are the carpets clean?
<span style="background-color:{{#ifeq answers.Carpets.values.[0] "Pass"}}#b6e89d{{/ifeq}} {{#ifeq answers.Carpets.values.[0] "Fail"}}#f49089{{/ifeq}};">
{{answers.Carpets.[0]}}
</span>
</p>

 

Example Document Output

How does it work?

 The #ifeq helper references a question and tests if it equals a value.   If it does, the string of text (the color hex code) that comes before the closing /ifeq will be used.   If the question does not equal that value, that string of text will not be used. 

[ top ]

 

Format the Background Color of Answers in a Table

This example re-uses the example from this article on printing out all answers in a section into a table.  We recommend becoming familiar with that example first, as this section focuses only on the formatting.

Handlebars and HTML Sample:

We will "loop" through all the answers in the section, printing each question/answer pair as a table row, and formatting the table cell based on the answer

<table>

<!-- Below are the column headers -->
<thead>
<tr>
<th>Question</th>
<th>Rating</th>
</tr>
</thead>

<tbody>
<!-- This "each" is the beginning of the loop -->
{{#each dataRecord.pages.FacilityInspection.sections.CommonArea.answers}}

<!-- Below is a table row and cells, with the references (starting AFTER the answers container)-->
<tr>
<td>
{{question}} <!--The question text -->
</td>
<!-- The next cell contains conditional formatting -->>
<td style="background-color:{{#ifeq values.[0] "Pass"}}#b6e89d{{/ifeq}} {{#ifeq values.[0] "Fail"}}#f49089{{/ifeq}};>
{{values.[0]}}  <!--The question's answer -->
</td> 
</tr>

<!-- This is the end of the loop-->
{{/each}}

</tbody></table>

 

Example Document Output

[ top ]

 

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments