Send Email from PowerApps Portal [PART 1]

Introduction: In this blog, we will understand how to send emails from PowerApps Portal.

Use Case: Whenever a user clicks on a Send Email button, a dialog box should open up where the user can enter Recipients, Subject, Message, and when the user clicks on send button email should be sent.  

Steps to be followed:

  1. Add a custom button for “Send Email” when the user will click this button dialog box will get open.

Code for adding Send Email button:

 $('#UpdateButton').after('<button type="button"  data-toggle="modal" data-target="#emailModal" id="sendmail" class="btn btn-danger">Send Email</button>');
  1. Create Dialog Box where users can enter Recipients, Subject, Message of email.
  • When user will click on “Send Email” button this dialog box will get open.

Code for creating Dialog box for email:


<div id="emailModal" role="dialog" class="modal fade">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header"><button type="button" data-dismiss="modal" class="close">×</button>
                <h4 class="modal-title">Email Message</h4>
            </div>

            <div class="modal-body">
                <form id="customEmail">

                    <div class="form-group">
                        <label for="emailaddress">To<span style="color:blue;font-weight:bold">["Specify email addresses separated by semicolons"]</span></label>
                        <input type="email" id="emailaddress" placeholder="name@example.com" class="form-control">
                    </div>

                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" class="form-control">
                    </div>

                    <div class="form-group">
                        <label for="Email Body">Message</label>
                        <textarea rows="10" id="emailbody" class="form-control"></textarea>
                    </div>


                </form>
            </div>

            <div class="modal-footer">
                <button type="button" data-dismiss="modal" onclick="send()" class="btn btn-primary">Send</button>

                <button type="button" data-dismiss="modal" onclick="reset()"class="btn btn-default">Close</button>
            </div>
        </div>

    </div>
</div>
  1. Create MS Flow which will trigger when the user will click on the send button of dialog box
  1. Go to Power Automate.
  • Create “+New Flow” of type “Instant cloud flow”.
  • Select the “When an HTTP request is received” trigger.
  • Enter a sample JSON payload.
{
    "To": "abc@gmail.com;xyz@gmail.com",
    "Subject": "Sample subject",
    "Body": "This is sample Email"
}
  • Search for “Office 365 Outlook” and select “Send and email(V2)” action.
  • Enter values in To, Subject and Body from the dynamic content.
  • Add Response action to return the response to PowerApps Portal.

Entire Flow:

  1. Now our flow is ready we have to call this flow on click of the “Send” button in PowerApps Portal.

Code for sending email:

function send() {
    var to = $('#emailaddress').val();
    var subject = $('#subject').val();
    var body = $('#emailbody').val();
    body = body.replace(/\r?\n/g, '<br />');

    if (to === "" || to === null || to === undefined || subject === "" || subject === null || subject === undefined || body === "" || body === null || body === undefined) {
        alert("Please Enter All the details");
    }

    else {
        var request = {
            "url": "https://prod-31.centralindia.logic.azure.com:443/workflows/21369741",
            "method": "POST",
            "timeout": 0,
            "headers": {
                "Content-Type": "application/json"
            },
            "data": JSON.stringify({ "To": to, "Subject": subject, "Body": body }),
        };

        $.ajax(request).done(function (response) {
            alert("Email Sent Successfully");
            $('#emailaddress').val('');
            $('#subject').val('');
            $('#emailbody').val('');

        }).fail(function (xhr, status, error) {
            var errorMessage = xhr.status + ': ' + xhr.statusText
            alert('Error - ' + errorMessage);
        });
    }
}

function reset() {
    $('#emailaddress').val('');
    $('#subject').val('');
    $('#emailbody').val('');

}
  1. Add below code on the webpage.

Entire Code:

<div id="emailModal" role="dialog" class="modal fade">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header"><button type="button" data-dismiss="modal" class="close">×</button>
                <h4 class="modal-title">Email Message</h4>
            </div>

            <div class="modal-body">
                <form id="customEmail">

                    <div class="form-group">
                        <label for="emailaddress">To<span style="color:blue;font-weight:bold">["Specify email addresses
                                separated by semicolons"]</span></label>
                        <input type="email" id="emailaddress" placeholder="name@example.com" class="form-control">
                    </div>

                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <input type="text" id="subject" class="form-control">
                    </div>

                    <div class="form-group">
                        <label for="Email Body">Message</label>
                        <textarea rows="10" id="emailbody" class="form-control"></textarea>
                    </div>


                </form>
            </div>

            <div class="modal-footer">
                <button type="button" data-dismiss="modal" onclick="send()" class="btn btn-primary">Send</button>
                <button type="button" data-dismiss="modal" onclick="reset()" class="btn btn-default">Close</button>
            </div>
        </div>

    </div>
</div>

<script>
    $('#UpdateButton').after('<button type="button"  data-toggle="modal" data-target="#emailModal" id="sendmail" class="btn btn-danger">Send Email</button>');
    function send() {
        var to = $('#emailaddress').val();
        var subject = $('#subject').val();
        var body = $('#emailbody').val();
        body = body.replace(/\r?\n/g, '<br />');

        if (to === "" || to === null || to === undefined || subject === "" || subject === null || subject === undefined || body === "" || body === null || body === undefined) {
            alert("Please Enter All the details");
        }

        else {
            var request = {
                "url": "https://prod-31.centralindia.logic.azure.com:443/workflows/21e536",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "Content-Type": "application/json"
                },
                "data": JSON.stringify({ "To": to, "Subject": subject, "Body": body }),
            };

            $.ajax(request).done(function (response) {
                alert("Email Sent Successfully");
                $('#emailaddress').val('');
                $('#subject').val('');
                $('#emailbody').val('');

            }).fail(function (xhr, status, error) {
                var errorMessage = xhr.status + ': ' + xhr.statusText
                alert('Error - ' + errorMessage);
            });
        }
    }

    function reset() {
        $('#emailaddress').val('');
        $('#subject').val('');
        $('#emailbody').val('');

    }

</script>

In Part 2 we will see how we can send emails with attachments from PowerApps Portal.

Leave a Reply

Your email address will not be published. Required fields are marked *