Post
Ask Question

View Received Mails In PowerApp

Introduction

 
In this article, I am going to give you a walkthrough of the O365 Outlook connection to view the mails directly in power apps.
 
Basically, we use this connection very frequently to handle mail functionality, like to view mail or send mail on click events with list item details. We can even create a user interface to collect input for To, CC, BCC, Subject line, Body, and add a button to send it to various recipients. Even Users can add an attachment to outgoing mail.
 
About the O365 Outlook Connections. 
 
Here I will be talking in detail about the O365 outlook connections with its implementation screen in Power Apps.
 
GetEmails and its Various Attributes
 
Office365Outlook.GetEmails()
 
It is used to get emails for the respective logged-in user with valid outlook connections. Users can pass below specified parameters for different business scenarios.
  • fetchOnlyUnread: Possible values (true/false) . Users can control what emails they want to load in Galler. Value true- All the unread mails, false- All the read/unread emails.
  • folderPath: User can target a specific folder like Deleted Items, Send Items, or any specific folder, in my case I am targeting the service folder.
  • searchQuery: Users can pass specific search query and only those emails will appear in a gallery that meets the specified search query.
  • top: <Number> Only a specified number of emails will appear in the gallery.
  • skip: <Number> Users can skip a specified number of emails.
Let's start...
 
Create a canvas power app and add a screen to contact me. Add a blank gallery control to show all the received emails. I have created a power app screen layout like shown in the below image.
 
 
In Gallery, set up the connection to Office 365 Outlook connections. Click on Data and add search for Office 365 Outlook and add it to your Power App application. When prompted, provide O365 credentials to connect.
 
 
Now let's return to the app, click on Gallery, and use the Office 365 Outlook connection as a data connection.
On top the gallery, you can labels and text to achive a tabular look and feel, like one shown in image. These labels looks like header of the table.
 
Next on Items of Gallery, add below formula to get all the emails from the inbox.
  1. Office365Outlook.GetEmails({fetchOnlyUnread:false}) 
Now insert labels and input boxes into the gallery and map the different data as per design layout. Here I am trying to place as per the header I have added at the top of gallery.
  • From: First Label:  ThisItem.From
  • Recieved : Second Label : ThisItem.DateTimeReceived
  • Subject: Third Label: ThisItem.Subject
  • Bode Preview : Text Input :  ThisItem.BodyPreview 
  1.  ThisItem.From
  2.  ThisItem.DateTimeReceived
  3.  ThisItem.Subject
  4. ThisItem.BodyPreview 
 
Click on View mail will navigate to view mail screen. So I am going to add 1 more screen to view the selected mail.Let's look into its design part.
 
 Design View Mail Screen
  • Add new blank screen and call it screenViewMail.
  • Add a label name it  "From" and Label in front of it on its default property add galleryInbox.Selected.From
  • Similarly do for received Date and Subject and add default property to galleryInbox.Selected.DateTimeReceived and galleryInbox.Selected.Subject respectively.
  • Next add a label and call it Mail and add a htmlText input box and set its text property to galleryInbox.Selected.Body.
Once you are done with the design, go to preview mode of the app and on the first screen click the view icon, it will Navigate to screenViewMail.
  1. Navigate(screenViewMail)   
On a click, I can view the selected mail.
 
 
On a click at Back, it will return to the main screen.
  1. back() 
Next Getting Mails from specified folder i.e. service folder. Currently, I have 3 emails in my service folder. I have an image of my mails in my service folder.
 
 
Now the power app screen image where we have fetched the emails from the service folder.
 
So the code used for Items for the gallery is:
  1. Office365Outlook.GetEmails({folderPath:"Services", fetchOnlyUnread:false}) 
With this, I completed the basics of fetching mail on the power apps.
 
Next to Mark mail as Read, let's insert a:
  • Button in the gallery and call it as Mark as Read
  • A Label and make its visibility false and name it lblcurrentItemID
Next, to check the impact to mark it as Read, change the formula for Items and pass a true value to fetchOnlyUnread. Now, our formula is:
  1. Office365Outlook.GetEmails({folderPath:"Services", fetchOnlyUnread:true}) 
 
On button select, add the below formula to mark the email as read.
  1. Select(Parent);Office365Outlook.MarkAsRead(lblcurrentItemID.Text); 
Once the user clicks on Mark As Read, then the mail will be marked as read.
 
 

Conclusion

 
In this article, I have talked about viewing Outlook emails directly in Power Apps. Next, I will show how to reply/send a new mail directly from Power Apps using Office365 Outlook connections.


Similar Articles