How to Hide and Unhide Fields in Power Apps Portals

How to Hide and Unhide Fields in Power Apps Portals

Power Apps Portals (Power Pages) provide organizations with the ability to create external-facing websites that interact with Dataverse data. In many scenarios, fields should be displayed only when certain conditions are met.

Using JavaScript, you can dynamically hide or unhide fields on portal forms to improve user experience and enforce business rules.

Why Hide or Unhide Fields?

• Improve user experience
• Reduce form complexity
• Display only relevant information
• Enforce business logic
• Improve data quality

Hide a Field

Use jQuery to hide a field on a portal form.

$(document).ready(function () {

   $("#new_comments")
      .closest("tr")
      .hide();

});

The field will be hidden when the form loads.

Unhide a Field

Use the show() method to display the field again.

$("#new_comments")
   .closest("tr")
   .show();

Show or Hide Based on Another Field

You can dynamically control visibility based on user selections.

$(document).ready(function () {

   $("#new_category").change(function () {

      if ($(this).val() == "100000001") {

         $("#new_comments")
            .closest("tr")
            .show();

      }
      else {

         $("#new_comments")
            .closest("tr")
            .hide();

      }

   });

});

How to Add JavaScript to a Portal Form

1. Open Power Pages Management App.
2. Navigate to Basic Forms or Entity Forms.
3. Open the target form.
4. Add JavaScript in the Custom JavaScript section.
5. Save changes.
6. Clear portal cache.
7. Test the functionality.

Common Use Cases

• Conditional data entry fields
• Customer-specific forms
• Approval-related fields
• Role-based portal experiences
• Dynamic registration forms
• Business process forms

Best Practices

• Use clear field schema names.
• Keep visibility logic simple.
• Validate required fields carefully.
• Test on mobile and desktop devices.
• Document customization logic.

Key Takeaways

• JavaScript can dynamically hide and show portal fields.
• Field visibility improves user experience.
• jQuery show() and hide() methods are commonly used.
• Visibility can be controlled based on field values.
• Works with Power Pages Basic Forms and Entity Forms.