Conditional Rendering

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.

---

---

Conditional Rendering is an alternative way of Widget Logic and it is done within the HTML code using Vue.js. 

This guide will teach you:

1. Create your questionnaire
2. Set up your formulas
3. Adjusting the HTML on your widgets

1. Create your questionnaire

Create your questionnaire 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:

That's it! Learn more about how to use Vue.js Conditional Rendering. 

What's next?

• 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.

Don't want to build it yourself? Contact our professional services team