General Discussion

I'm making custom documents with Handlebars, and I need dynamic checkboxes on my PDF output. 

I know I can't use <input> fields, and I've tried using unicode via css, with the hope of using conditional formatting to toggle checked vs unchecked states, but that is not working properly (not populating at all). 

For example, I have a "Pass" or "Fail" question, and I need checkboxes on the PDF that are checked depending on the answer to that question.

Some of our documents are submitted to the county, and need to be styled very specifically, so this is kind of vital. 

I have attached a picture of the section in question, I currently have ☐ in my text as placeholders while I try to figure something out.

Please advise, thanks!

Hi Orin,

One approach would be to use the IF helper available in handlebars to conditionally render an image of a checked or unchecked box. The handlebars IF helper is described here in our documentation:

For your template, the code might look something like the following:

{{#pf:if answers.Result.values.[0] "is" "Pass"}} <img src="https://cdn.icon-icons.com/icons2/2249/PNG/512/checkbox_marked_outline_icon_139811.png" width="10;" height="10;">{{/pf:if}}{{#pf:if answers.Result.values.[0] "!is" "Pass"}}<img src="https://cdn.icon-icons.com/icons2/3249/PNG/512/checkbox_unchecked_filled_icon_200788.png" width="10;" height="10;">{{/pf:if}} Pass (No Issues) <br/>                     {{#pf:if answers.Result.values.[0] "is" "Pass_w_recommendations"}} <img src="https://cdn.icon-icons.com/icons2/2249/PNG/512/checkbox_marked_outline_icon_139811.png" width="10;" height="10;">{{/pf:if}}{{#pf:if answers.Result.values.[0] "!is" "Pass_w_recommendations"}}<img src="https://cdn.icon-icons.com/icons2/3249/PNG/512/checkbox_unchecked_filled_icon_200788.png" width="10;" height="10;">{{/pf:if}} Pass (w/ Strong Recommendations) <br/>            {{#pf:if answers.Result.values.[0] "is" "Fail"}} <img src="https://cdn.icon-icons.com/icons2/2249/PNG/512/checkbox_marked_outline_icon_139811.png" width="10;" height="10;">{{/pf:if}}{{#pf:if answers.Result.values.[0] "!is" "Fail"}}<img src="https://cdn.icon-icons.com/icons2/3249/PNG/512/checkbox_unchecked_filled_icon_200788.png" width="10;" height="10;">{{/pf:if}}  Fail (Correction Required)</td>

Hope this helps!

I'm making custom documents with Handlebars, and I need dynamic checkboxes on my PDF output. 

I know I can't use <input> fields, and I've tried using unicode via css, with the hope of using conditional formatting to toggle checked vs unchecked states, but that is not working properly (not populating at all). 

For example, I have a "Pass" or "Fail" question, and I need checkboxes on the PDF that are checked depending on the answer to that question.

Some of our documents are submitted to the county, and need to be styled very specifically, so this is kind of vital. 

I have attached a picture of the section in question, I currently have ☐ in my text as placeholders while I try to figure something out.

Please advise, thanks!

This is exactly what I needed, thank you!! 

Hi Orin,

One approach would be to use the IF helper available in handlebars to conditionally render an image of a checked or unchecked box. The handlebars IF helper is described here in our documentation:

For your template, the code might look something like the following:

{{#pf:if answers.Result.values.[0] "is" "Pass"}} <img src="https://cdn.icon-icons.com/icons2/2249/PNG/512/checkbox_marked_outline_icon_139811.png" width="10;" height="10;">{{/pf:if}}{{#pf:if answers.Result.values.[0] "!is" "Pass"}}<img src="https://cdn.icon-icons.com/icons2/3249/PNG/512/checkbox_unchecked_filled_icon_200788.png" width="10;" height="10;">{{/pf:if}} Pass (No Issues) <br/>                     {{#pf:if answers.Result.values.[0] "is" "Pass_w_recommendations"}} <img src="https://cdn.icon-icons.com/icons2/2249/PNG/512/checkbox_marked_outline_icon_139811.png" width="10;" height="10;">{{/pf:if}}{{#pf:if answers.Result.values.[0] "!is" "Pass_w_recommendations"}}<img src="https://cdn.icon-icons.com/icons2/3249/PNG/512/checkbox_unchecked_filled_icon_200788.png" width="10;" height="10;">{{/pf:if}} Pass (w/ Strong Recommendations) <br/>            {{#pf:if answers.Result.values.[0] "is" "Fail"}} <img src="https://cdn.icon-icons.com/icons2/2249/PNG/512/checkbox_marked_outline_icon_139811.png" width="10;" height="10;">{{/pf:if}}{{#pf:if answers.Result.values.[0] "!is" "Fail"}}<img src="https://cdn.icon-icons.com/icons2/3249/PNG/512/checkbox_unchecked_filled_icon_200788.png" width="10;" height="10;">{{/pf:if}}  Fail (Correction Required)</td>

Hope this helps!

I'm making custom documents with Handlebars, and I need dynamic checkboxes on my PDF output. 

I know I can't use <input> fields, and I've tried using unicode via css, with the hope of using conditional formatting to toggle checked vs unchecked states, but that is not working properly (not populating at all). 

For example, I have a "Pass" or "Fail" question, and I need checkboxes on the PDF that are checked depending on the answer to that question.

Some of our documents are submitted to the county, and need to be styled very specifically, so this is kind of vital. 

I have attached a picture of the section in question, I currently have ☐ in my text as placeholders while I try to figure something out.

Please advise, thanks!