Color-Coding Conditional Fields in the PDF Designer

Quickly determine the results of an inspection, analysis, quiz, etc. with color-coded conditional fields in the PDF.

Color-Coded Conditional Fields

Conditional fields have to be made in the form, so there are a few setup steps before we can format anything in the PDF Designer.

Configure Conditional Fields

For this example, we will use a condition on a Single Choice field in the style of Drop Down. First, add the field and add a few choices. This can be written directly in Choices or uploaded as Reference Data. For this example, we will use a three choices: "Pass," "Needs Attention," and "Fail."

Those three choices also need to be added as Static Text. These fields can also be made mobile invisible by selecting the gear to open Field Settings, toggling to the More tab, and flipping Mobile Visible off.

Next, we will configure Conditions for all three static text fields.

1. Toggle to the Conditions tab in the Field Settings.
2. Select + Add Condition, expand the Field drop, select the screen where the trigger field is located. In our example, this is "Conditional Formatting."
3. Then in the same drop down, select the trigger field. In our example, this is "Inspection Result."
4. Next, expand Condition and select "= (Equal)."
5. Click into Value and type the choice from the drop down that will trigger this particular field. In our example, this will be "Pass," "Needs Attention," or "Fail," depending on which static text field you are currently editing. In order to guarantee this works and there are no rogue characters or misspellings, copy the choice from the "Inspection Result" drop down and paste it into the value.
6. Select the checkmark to lock in the condition and Done to close the modal.
7. Repeat these steps for as many results as are needed for your use case.

Format Fields in the PDF Designer

Next, we will toggle to the PDF Designer to format the conditional fields with color. You can do as much formatting or as little as you want. The only thing that is necessary to make even the smallest impact is to change the Background Color of the fields. Changing Text Size or Color, Alignment, adding Borders, etc. are all optional.

Since all we want is the color-coded conditional result, we don't need to add the "Inspection Result" drop down field to the PDF Designer. This will reduce redundancies and confusion. If you used Auto-Layout, simply hover over the field and select the trashcan icon to remove it.

Here is what the fields look like before formatting:

Next, select one of the fields to manipulate the Field Settings. In the example below, each field has been moved to it's own Section in order to add unique borders. To learn more about PDF Field and Column Settings, visit the Help Center article, "How to Change the PDF Format with Settings in the PDF Designer."

Take a moment to Save and Preview these changes to get a sense for how it will look, but remember that this will only have demo data populated if at least one submission has been made with the new PDF Design. 

Now your PDF will have a colorful conditional field to quickly identify results to whoever is viewing the PDF.