How to Dynamically Hide Buttons in Power Apps Portal Using JavaScript and MutationObserver

Introduction

Creating a dynamic user interface is a critical aspect of application development in Power Apps Portal. One common use case involves conditionally showing or hiding UI elements like buttons based on certain criteria. This article will guide you through the steps to dynamically hide a "Create New" button in a subgrid when certain conditions are met, using JavaScript and the MutationObserver API.

What is MutationObserver?

MutationObserver is an API that provides the ability to watch for changes in the DOM tree. Here are some of the key advantages:

• Efficiency: Observers are more resource-efficient compared to intervals or other polling methods.
• Precision: You can specify which types of changes you want to observe.
• Asynchrony: MutationObserver works asynchronously, making it flexible in handling dynamically-loaded data.

Practical Example: Conditionally Hiding the "Create New Warrant" Button

Imagine a legal system application where you have a subgrid listing various "Warrants" tied to a "Booking" entity. For this example, the business rule specifies that if there is already a warrant listed for a particular booking, users should not be able to create a new one. Therefore, the "Create New Warrant" button should be hidden when a warrant is already listed.

Here's how you can accomplish this:

javascript
$(document).on('ready', function() {  
  var observer = new MutationObserver(function(mutations) {
    checkSubgridAndHideButton();
  });
  var config = { attributes: true, childList: true, characterData: true, subtree: true };
  var checkSubgrid = setInterval(function() {
    var subgridElement = document.getElementById('Subgrid_Warrants');
    if (subgridElement) {
      clearInterval(checkSubgrid);
      observer.observe(subgridElement, config);
    }
  }, 500);  
});

function checkSubgridAndHideButton() {
  var rowCount = $('#Subgrid_Warrants .entity-grid.subgrid tbody tr').length;
  if (rowCount > 0) {
    $('a.btn.btn-primary.pull-right.action.create-action:contains("New Warrant")').hide();
  }
}

Tips for Reusability

1. Subgrid ID: Simply replace 'Subgrid_Warrants' with the ID of your specific subgrid.
2. Button Text: Adjust the text "New Warrant" to match the text of the button you want to hide.
3. Observer Configuration: The MutationObserver configuration can be adapted based on what specific changes you want to observe.

Conclusion

Using JavaScript and the MutationObserver API provides a robust solution for dynamically hiding buttons in Power Apps Portal based on specific conditions. This technique can be adapted to a wide range of scenarios, making your Power Apps Portal more dynamic and user-friendly.