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.


Essential 
Professional 
Enterprise ✓
ReportR ✓

Conditional Rendering is an alternative way of Widget Logic and it is done within the HTML code using Vue.js. Now, let's see how to do this! In this guide we'll discuss the following:

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


1 Create your questionnaire

Log in and make sure you have added all of your questions.


questions - qb1 qb2


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.


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


add text widget html


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>


conditional rendering example vue.js


After you have added all of your conditions, your text widget should look like this:


text widget conditional rendering vuejs


And this is how your widget will look like on your PDF (in this example both Part 1 and Part 2 was scored high):


text widget preview on conditional rendering


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

V
Vincent is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.