Alerts in PowerApps Portal

In this blog, we will look at how to show alerts in the PowerApps portal.

Use Case 1: Show alert whenever amount field has value less than 300.

Code:

$(document).ready(function () {
    $("#vv_amount").change(function () {
        var amount = $('#vv_amount').val();
        if (amount <= 300 && amount!==null && amount!=='') {
            $('[data-name="{250a3d9f-e03e-4efa-9f6c-5c45c472ba12}"]').prev().before('<div class="alert alert-danger"><strong>Amount should be greater than ' + amount + '</strong></div>');
        }
        else {
            $('.alert.alert-danger').hide();
        }
    });
 });

• Add above code on the webpage where you want to show the alert

Result

Use Case 2: Show alert whenever button is clicked.

Code:

$(document).ready(function () {
    $('#InsertButton').after('<button type="button" id="cloneRecord" class="btn btn-warning">Clone Record</button>');
    $("#cloneRecord").click(function () {
        window.scrollTo(0, 0);
        $('[data-name="{250a3d9f-e03e-4efa-9f6c-5c45c472ba12}"]').prev().before('<div class="alert alert-success"><strong>Record is successfully Cloned.</strong></div>');
        $('.alert.alert-success').fadeOut(3000);
    })
});

• Add above code on the webpage where you want to show the alert

Result

Explanation:

I am showing alerts before the General section. You can inspect that element and get the attribute value.

You can use below classes to show alerts based on your requirement

• Alert for Success:

<div class="alert alert-success">
  <strong> This is success message</strong>
</div>

• Alert for Warning:

<div class="alert alert-warning">
  <strong> This is warning message</strong>
</div>

• Alert for Danger:

<div class="alert alert-danger">
   <strong> This is danger message</strong>
</div>

• Alert for Info:

<div class="alert alert-info">
   <strong> This is Information.</strong>
</div>