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.
This guide will teach you:
1. Create your questionnaire
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.
- Use Widget Logic: Widgets are different formats of content that you can include in your PDF report. They are the building blocks of your report. Widgets are a way of displaying data, for example, in graphs or tables, based on the respondent's answer.
- Add Custom Results By Respondent table: The custom results by respondent table widget is a dynamic type of widget that will add records automatically to the table once you have set it up. You can set the maximum number of records to show and set the table to sort records from low to high or high to low.
- Add a Custom Chart: Custom chart is a special type of chart that allows the user to customize the data he wants to include in the graph completely. The user can include formulas and variables or hardcoded data as values that will be graphically represented in the chart.