Conditional Rendering is a way of displaying elements based on a condition. It allows you to create simple conditions inside a widget and reduce the number of widgets and rules. With Conditional Rendering, you can render different UI markups based on certain conditions.
1 Create your questionnaire
Log in and make sure you have added all of your questions.
In this example, we divided our questionnaire into two parts and created two Question Blocks for it (to use it in our Formulas).
2 Set up your formulas
After you have created your questionnaire, go to the Extra options tab and add all of your Formulas.
In our example, the two formulas count the custom score of each Question Block. We are going to use our formulas later on in our PDF report.
3 Adjusting the HTML on your widget
After you are done building your questionnaire, head to your PDF report, and start adding widgets.
Add your text widget and click on the < > HTML view.
Now, you can start configuring Conditional Rendering. In this example we will use the Formulas showed above. Start by adding the directive v-if to conditionally render your block.
Now, you can add your condition; 'If *|f1_results|* is lower than 7, then 'Low score text.'
<div v-if="*|f1_result|* < 7"> <p>Low score text</p></div>
After you have added all of your conditions, your text widget should look like this:
And this is how your widget will look like on your PDF (in this example both Part 1 and Part 2 was scored high):
That's it! Learn more about how to use Vue.js Conditional Rendering.