Conditional visibility in forms

Conditional visibility is a powerful feature in Power Pages (formerly Power Apps Portals) that allows you to control the visibility of form elements (fields, sections, and buttons) based on certain conditions. This makes forms dynamic and responsive to user input, providing a personalized and intuitive user experience.

In this guide, we’ll walk through how to set up conditional visibility on form elements in Power Pages, leveraging Liquid templates, JavaScript, and Dataverse logic.

Why Use Conditional Visibility?

Conditional visibility enhances the user experience by:

Hiding irrelevant fields: Only show the necessary fields based on user input.
Guiding the user journey: Dynamically display fields and buttons based on choices.
Reducing errors: Only prompt users to fill in relevant information.
Improving form usability: Avoid overwhelming users with unnecessary options.

Methods to Implement Conditional Visibility

There are different approaches for enabling conditional visibility in Power Pages:

Using Liquid Templates: With Liquid, we can control the visibility of sections and fields based on conditions like user roles or data.
Using JavaScript: You can manipulate the DOM to hide or show form elements when the page loads or when a user interacts with the form.
Dataverse Business Rules: These can be used to apply conditions on field visibility directly in the Dataverse form.

Method 1: Using Liquid Templates for Conditional Visibility

Liquid allows for advanced dynamic content rendering, making it ideal for controlling visibility in Power Pages forms.

Example: Hiding a Field Based on User Role

Identify the form and the field you want to control the visibility of.
Use Liquid syntax to check for a specific condition, such as a user’s role.

Here’s an example where we hide the “Phone Number” field if the user does not have the “Admin” role:

{% if user.roles contains "Admin" %}
  <div class="form-group">
    <label for="telephone">Phone Number</label>
    <input type="text" id="telephone" name="telephone" />
  </div>
{% else %}
  <div class="form-group">
    <p>You do not have access to this field.</p>
  </div>
{% endif %}

In this example:

The Phone Number field is only visible to users with the “Admin” role.
If the user does not have the “Admin” role, a message is displayed instead.

Method 2: Using JavaScript for Dynamic Visibility

JavaScript can be used to hide or show form elements dynamically, either on form load or based on user interaction.

Example: Hide/Show Fields Based on a Dropdown Selection

Let’s say we have a dropdown (select field) for “Product Type”, and based on the selection, we want to show a “Warranty” field.

Add the Dropdown Field to the Form.
Add the JavaScript to control the visibility of the “Warranty” field.

Here’s an example using jQuery:

$(document).ready(function () {
  // Hide the Warranty field by default
  $("#warrantyField").hide();

  // Watch for changes in the Product Type dropdown
  $("#productType").change(function () {
    var selectedProduct = $(this).val();
    
    if (selectedProduct === "Laptop") {
      $("#warrantyField").show();  // Show Warranty field for Laptop
    } else {
      $("#warrantyField").hide();  // Hide Warranty field for other products
    }
  });
});

In this example:

The Warranty field is hidden when the form loads.
When the user selects “Laptop” from the Product Type dropdown, the Warranty field becomes visible.

How to Integrate the Script:

Add this script into your Web Page’s Custom JavaScript section or include it as part of a Web File.
The script assumes jQuery is available (which is included by default in Power Pages).

Method 3: Using Dataverse Business Rules

Business Rules in Dataverse can also be used to implement conditional visibility directly within the form. Business rules are server-side logic and are triggered when the form is opened or a field value changes.

Example: Show/Hide a Field Based on a Checkbox Value

Go to the Power Platform Admin Center → Dataverse → Tables → Select your table.
Create a New Business Rule:
- Set the Condition: If a checkbox (e.g., “Is Warranty Required”) is checked, show the “Warranty Type” field.
- Set the Action: Show or hide the “Warranty Type” field based on the checkbox value.

Example Business Rule Logic:

Condition: Is Warranty Required is checked.
Action: Set the visibility of Warranty Type to true.

Business rules offer a no-code solution for basic field visibility requirements.

Best Practices for Conditional Visibility

Practice	Reason
Use Liquid for user-specific visibility	Dynamically customize content for different users
Prefer JavaScript for complex scenarios	More flexibility when interacting with the DOM
Use Business Rules for simple field logic	Ideal for server-side logic without coding
Minimize multiple scripts for performance	Keep scripts modular and efficient
Test responsiveness	Ensure fields behave correctly on mobile devices
Hide, don’t delete fields	Keep fields in the form to avoid confusion

Troubleshooting Tips

Clear Caching Issues: If visibility changes aren’t reflecting, clear browser cache or force refresh the page.
Check Field IDs: Ensure field IDs in your JavaScript or Liquid code match those in the HTML markup.
Test Business Rules: Verify that your business rules are properly triggered based on field changes.
Debug JavaScript: Use browser developer tools to check for JavaScript errors and ensure that your code is working as expected.

Summary

Conditional visibility in Power Pages forms can be implemented using Liquid templates, JavaScript, and Dataverse Business Rules, each serving specific use cases:

Liquid templates allow for user-role-based content rendering.
JavaScript enables dynamic form behavior, reacting to user input in real-time.
Business Rules provide a low-code solution for conditional field display directly in Dataverse.

By using these methods, you can create highly interactive, user-specific forms that improve the experience and reduce unnecessary complexity.