Hiding a Button Based on Row Count in Subgrid for Power Apps Portal

Introduction

The ability to display or hide buttons based on the number of rows in a subgrid can be quite a useful feature in Power Apps Portal. This article will elaborate on two scenarios:

• When the button redirects to a webpage
• When the button targets a basic form

We will also introduce a reusable function checkSubgridAndHideButton that can be used for any subgrid and button.

Scenario 1: Button Redirects to a Webpage

HTML Structure for the Button

html
<a href="/newbooking/?refentity=account&refid=fb4b3670-1159-ed11-9561-001dd8072455&refrel=tri_offender_tri_booking" role="link" class="btn btn-primary pull-right action create-action" title="Create" tabindex="0" target="_top">New Pre-Booking</a>

Code Explanation

Here is a simple function that hides the button based on its href attribute:

javascript
function fnHideNewBkg() {    
    $('a[href^="/newbooking"]').hide();
}

Scenario 2: Button Targets a Basic Form

HTML Structure for the Button

html
<a href="#" class="btn btn-primary pull-right action create-action" title="Create" tabindex="0" role="button">New Warrant</a>

Code Explanation

We use MutationObserver to monitor changes in the subgrid:

javascript
 $(document).on('ready', function(){
  // Initialize MutationObserver
  var observer = new MutationObserver(function(mutations) {
      checkSubgridAndHideButton();
  });
  // Configuration of the observer
  var config = { attributes: true, childList: true, characterData: true, subtree: true };
  // Wait for subgrid to be available
  var checkSubgrid = setInterval(function() {
      var subgridElement = document.getElementById('Subgrid_Warrants');
      if (subgridElement) {
          clearInterval(checkSubgrid);
          observer.observe(subgridElement, config);
      }
  }, 500);
 });

Function: checkSubgridAndHideButton

Here is the function that hides the 'New Warrant' button based on the number of rows in the 'Warrant' subgrid.

javascript

function checkSubgridAndHideButton() {
  // Check if any rows exist in the Warrant subgrid
  var rowCount = $('#Subgrid_Warrants .entity-grid.subgrid tbody tr').length;
  
  if (rowCount > 0) 
  {
      // Hide New Warrant button if at least one record found
      $('a.btn.btn-primary.pull-right.action.create-action:contains("New Warrant")').hide();
  }
}

How to Reuse

1. Replace #Subgrid_Warrants with the ID of the subgrid you are working with.
2. Replace the text "New Warrant" with the text on the button you want to hide.

Final Words

By the end of this extended guide, you should be able to hide buttons based on the row count in a subgrid for Power Apps Portal. We covered two scenarios, and introduced a reusable function that can be adapted for different subgrids and buttons. The use of MutationObserver allows us to make these UI changes dynamically, offering a robust solution for varied requirements.