Enhancing User Experience in Power Apps Portals with Conditional Button Visibility

In the world of web development, especially within the context of Power Apps Portals, creating an intuitive and dynamic user interface is crucial for an engaging user experience. A common requirement is to alter the visibility of elements based on certain conditions to make interfaces cleaner and more user-friendly. This article demonstrates how to control the visibility of a "Full Page View" button in a Power Apps Portal form, based on the value of a "Last Release Date" field.

Scenario Overview

Our objective is tailored specifically for implementation in a basic form within Power Apps Portals. We focus on dynamically controlling the "Full Page View" button's visibility based on the "Last Release Date" field within this form context.

HTML Setup

First, let's look at the HTML structure of the button and the date field within our Power Apps Portal:

• Button HTML:

  <input id="viewDetails" style="margin-top: 10px;" class="btn btn-primary button" type="button" value="Full Page View">

• Date Field HTML:

  <input type="text" data-date-format="M/D/YYYY HH:mm" aria-describedby="tri_lastreleasedate_description" id="tri_lastreleasedate_datepicker_description" aria-labelledby="tri_lastreleasedate_label" onchange="setIsDirty(this.id);" class="form-control input-text-box readonly" readonly="readonly" aria-required="true">

JavaScript Logic

To achieve our objective, we employ jQuery, a fast, small, and feature-rich JavaScript library. The following script checks the value of the "Last Release Date" field upon document readiness. Depending on whether the date field is empty or not, it toggles the visibility of the "Full Page View" button accordingly.

$(document).ready(function ()

{

    toggleButtonVisibility(); // Perform an initial check

    $('#tri_lastreleasedate_datepicker_description').change(toggleButtonVisibility); // Re-evaluate when the date

});

function toggleButtonVisibility()

{

    var lastReleaseDate = $('#tri_lastreleasedate_datepicker_description').val();

    var viewDetailsButton = $('#viewDetails');

    if(lastReleaseDate === '')

    {

        viewDetailsButton.hide();

    }

    else 

    {

        viewDetailsButton.show(); }

    }

}

Implementation Steps

1. Incorporate JavaScript in Basic Form: In the context of a basic form within Power Apps Portals, add the JavaScript code through the Custom JavaScript section available in the form settings. Navigate to your form in the Power Apps Portal management area, locate the "Custom JavaScript" option, and insert the provided script.

2. Testing in Form Context: After embedding the JavaScript, test the form directly in the Power Apps Portal. Enter and remove a date in the "Last Release Date" field to verify that the "Full Page View" button visibility changes as expected. This direct integration and testing within the form ensure the script operates seamlessly within the basic form's environment.