[TIP] Automating Data Transfer from Subgrid Rows to a Power Apps Portal Form

Automating Data Transfer from Subgrid Rows to a Power Apps Portal Form

Introduction

In this article, we'll explore a scenario where we need to extract data from a subgrid within a Power Apps Portal and populate it into a field on a form. To accomplish this, we'll create a JavaScript function triggered by a custom button within the subgrid. This functionality can be particularly useful when you want to streamline data entry or improve user experience on your portal.

Scenario

Imagine you have a Power Apps Portal with a form for managing warranties. Within this form, there's a subgrid displaying a list of warranties. You want to enable users to easily select a warranty from the subgrid by clicking a "Select" button next to each row. When a user clicks this button, the name of the selected warranty should be automatically populated into a designated field on the form.

* if you want to know how to adjust the popup window width, click here.

Implementation

To achieve this, we'll use JavaScript code to capture the click event on the "Select" button within the subgrid and extract the name value from the corresponding row. Below is the code that accomplishes this task:

$(document).ready(function () {

  // Attach click event listener to all existing and future elements with the "workflow-link" class

  $(document).on('click', '.workflow-link', function(event) {

    event.preventDefault();

    console.log('Select button clicked in Warrant subgrid');

    // Find the corresponding Warrant Number cell in the same row

    var warrantNumber = $(this).closest('tr').find('td[data-attribute="tri_name"]').data('value');

    if (warrantNumber) {

      console.log('Warrant Number:', warrantNumber);

     

      // Reference to the "Warrant #" field

      var warrantField = $('#dxc_warrantnbr');

      // Populate the "Warrant #" field with the selected Warrant Number

      warrantField.val(warrantNumber);

      // Change the background color of the field to green

      warrantField.css('background-color', 'lightgreen');

    } else {

      console.log('Warrant Number not found');

    }

  });

});

Explanation

• We start by attaching a click event listener to elements with the "workflow-link" class. This class is associated with the custom "Select" button in the subgrid.
• When a user clicks the "Select" button, the JavaScript code identifies the corresponding row in the subgrid.
• It then extracts the "Warrant Number" (name) from the selected row using the attribute "tri_name."
• If a warrant number is found, it populates the designated "Warrant #" field on the form and changes its background color to green.
• If no warrant number is found, it logs a message to indicate this.

Note: The "Select" button was created by adding an action "workflow" within Power Apps. The associated workflow doesn't perform any actions other than facilitating this button's functionality.

By implementing this code, you can enhance the usability of your Power Apps Portal by allowing users to easily select and transfer data from a subgrid to a form. This automation simplifies data entry and improves the overall user experience.