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 ✓

DEFINITION

formula definition A conditional rendering is a piece of content that is displayed or rendered when a predefined condition is met. You can use conditional renderings to control the way visitors view and interact with your website.

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

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

Conditional Rendering- questions - question blocks 1&2

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.

Conditional Rendering-  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.

Conditional Rendering-  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:

conditional rendering- 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):

conditional rendering- text widget preview on conditional rendering

WARNING   

The Vue.js property does not work for the cover page of the PDF.  If you need to use it on your cover page, it is best to disable the cover page and style a regular page to be your cover page.

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