[TIP] Clearing Field Values in Power Apps Portal Using JavaScript

 

Clearing Field Values in Power Apps Portal Using JavaScript

Introduction

In Power Apps Portal, it's common to require field changes based on user interactions. For read-only fields, traditional change events might not be effective. However, we can leverage JavaScript to capture button clicks and execute actions accordingly. In this article, we'll show you how to create a JavaScript template to clear field values when specific buttons are clicked.

JavaScript Template

Here is a simple JavaScript template that can be used to clear a field when a button is clicked:

$(document).ready(function()

{

  // Function to clear a specific field

  function clearField(fieldName)

  {

    $(fieldName).val("");

  }

  // Attach event to the button using its identifier (ID or class)

  $('#buttonIdentifier').on('click', function()

  {

    clearField('#fieldToBeCleared');

  });

});

Understanding the Template

Let's dissect the template:

• $(document).ready(): Ensures that the script runs after the page is fully loaded.
• clearField(fieldName): A function that clears the field specified by fieldName.
• $('#buttonIdentifier').on('click', function()): Adds a click event listener to a button, identified by its ID or class.

How to Customize the Template

Identifying Buttons

To modify this template, you'll want to examine your button's HTML attributes like id and class.

• ID: If the button's HTML has an id attribute, use # followed by the ID name to target it.

<button id="myButton">Click Me</button>

• JavaScript Selector: $('#myButton')

• 


• Class: If the button has a class attribute, use . followed by the class name.

• <button class="myButton">Click Me</button>

• JavaScript Selector: $('.myButton')

Identifying Fields from HTML

You can identify the field name from the id attribute in the HTML element.

Example HTML:

<input id="hellosmart_academicsubject_name" ... />

JavaScript Selector:

$('#hellosmart_academicsubject_name')

Example: Clearing a Field in Power Apps Portal

In this example, we will clear a read-only field (hellosmart_course_name) when either of the following buttons is clicked:

HTML for the buttons

1. 1. "Select" button
2. <button aria-label="Select" class="primary btn btn-primary" id="btnModalSelect" tabindex="0" title="Select" type="button">Select</button>
3. 2. "Clear Lookup Field" icon
4. <button type="button" class="btn btn-default clearlookupfield" title="Clear Lookup Field" aria-label="Clear Lookup Field"><span class="sr-only">Clear Lookup Field</span><span class="fa fa-times" aria-hidden="true"></span></button>

   JavaScript code

$(document).ready(function()

{

  // Clear the course field

  function clearCourseField()

  {

    $('#hellosmart_course_name').val("");

  }

  // Attach the event to the "Select" button

  $('#btnModalSelect').on('click', function()

  {

    clearCourseField();

  });

  // Attach the event to the "Clear Lookup Field" button

  $('.clearlookupfield').on('click', function()

  {

    clearCourseField();

  });

});

Key Points to Remember

• Make sure to replace the button and field identifiers with the ones that match your HTML structure.
• This code assumes jQuery is available, as it's commonly loaded on Power Apps Portal pages.
• Always test your scripts thoroughly to ensure that they behave as expected.

By leveraging JavaScript and understanding how to properly identify buttons in your Power Apps Portal, you can build more dynamic and responsive forms.