Handlebars - Advanced: How to Add Conditional Formatting

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.

Available on the Advanced and Enterprise tiers:

About

Using Handlebars, you can have things in your PDF/Word/HTML documents displayed in different ways depending on a set of conditions. For example, you can display the way an answer is shown depending on what the 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 CSS formatting to change the background color based on this.

Handlebars and HTML Example

Use CSS and HTML to make the formatting conditional.

CSS

.Pass
{
  background-color:#b6e89d;
}
.Fail
{
  background-color:#f49089;
}
.Recheck
{
  background-color:#ffff99;
}

HTML

<p>
  Are the carpets clean?
  <span class="{{#pf:if answers.Carpets.[0] "is" "Pass"}}Pass{{/pf:if}}
  {{#pf:if answers.Carpets.[0] "is" "Fail"}}Fail{{/pf:if}}
  {{#pf:if answers.Carpets.[0] "is" "Recheck"}}Recheck{{/pf:if}}">{{answers.Carpets.[0]}}
  </span>
</p>

Example Document Output

Answer	Output
Pass
Fail
Recheck

How does it work?

The #pf:if helper references a question and tests if it equals a value. If it does, the string of text (the class) that comes before the closing /pf:if will be used.

Format the background color of answers in a table

This example shows you how to use CSS and HTML to print answers from a repeatable section A Repeatable Section is a subform that contains a set of related questions. The data captured is “repeating”, because the field user can complete the same subform more than once, which creates multiple entries. in a table. Use CSS and HTML to format the table cells based on the answer to each entry.

Handlebars and HTML Example

CSS

.Pass
{
  background-color:#b6e89d;
}

.Fail
{
  background-color:#f49089;
}

.Recheck
{
  background-color:#ffff99;
}

table
{
  width: 50%
 
}

td
{
  text-align:left;
  border: solid 1px #000000;
  border-collapse: collapse;
  padding-left: 1em;
}

HTML

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.

<!-- Two-Column Table for Repeatable Sections --> 
<table>
	<thead>
		
		<tr>
			<th class ="tableColumn" >Room</th>
			<th class ="tableColumn" >Result</th>
			</tr>
	</thead>
	<tbody>
		<!-- Print out a table row for each repeatable section row --> 
		{{#each dataRecord.pages.SiteInformation.sections.RSSectionName.rows}}
			{{#with pages.RSPageName.sections.RoomInfo.answers}}
				<tr>
					<td>{{Room.values.[0]}}</td>
					<!--Conditional formatting for table cell-->
					<td class="{{#pf:if Result.values.[0] "is" "Pass"}}Pass{{/pf:if}}
                                       {{#pf:if Result.values.[0] "is" "Fail"}}Fail{{/pf:if}}">{{Result.values.[0]}}</td>

				</tr>
			{{/with}}
		{{/each}}
	</tbody>
</table>

Example Document Output