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:
- 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>');- 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>- Create MS Flow which will trigger when the user will click on the send button of dialog box
- 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:
- 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('');
}
- 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.