In my previous articles, I have written about fetching access token and users/groups. I have added the links of these previous articles below for your reference. Please go through these before following the below steps.
Retrieve Mail Folders
- EndPoint - https://graph.microsoft.com/v1.0/me/mailFolders
- Usage - It retrieves all your folders from your mailbox
I have tested it in the Graph Explorer. It returns the JSON data like below.
So, let us see how to retrieve it programmatically using JavaScript.
Please follow my previous article How to fetch access token to authenticate your web application to fetch the access token and authenticate.
Step 1 - Fetch Access Token
AuthUrl: https://login.microsoftonline.com/{{tenant}}/oauth2/v2.0/token
Type: POST
- var token;
- functionrequestToken() {
- $.ajax({
- "async": true,
- "crossDomain": true,
- "url": "https://howling-crypt-47129.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie
- "method": "POST",
- "headers": {
- "content-type": "application/x-www-form-urlencoded"
- },
- "data": {
- "grant_type": "client_credentials",
- "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de",
- "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=",
- "scope ": "https://graph.microsoft.com/.default"
- },
- success: function(response) {
- log(response);
- token = response.access_token;
- },
- error: function(error) {
- log(JSON.stringify(error));
- }
- })
- }
The successfull response is shown below.
So now, let us create a function "RetrieveEmailFolder" and pass the access token into the header.
EndPoint
https://graph.microsoft.com/v1.0/me/mailFolders
https://graph.microsoft.com/v1.0/users/{{userid}}/mailFolders
Method
GET
Code
- functionRetrieveEmailFolder() {
- $.ajax({
- method: 'GET',
- url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/mailFolders",
- headers: {
- 'Authorization': 'Bearer ' + token,
- 'Content-Type': 'application/json'
- },
- }).success(function(response) {
- vardata = response.value;
- log(data);
- }).error(function(error) {});
- }
We have got the "HTTP 200 success" message. It returns the JSON data.
Now, I am going to pass the SELECT query to retrieve a particular column from the OData. For example, ?select=displayName. You can add multiple column names in the SELECT query instead of fetching all the properties.
The code for passing the ?select=displayName is shown below. It retrieves only the selected property.
Code
- functionRetrieveEmailFolder() {
- $.ajax({
- method: 'GET',
- url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/mailFolders?select=displayName",
- headers: {
- 'Authorization': 'Bearer ' + token,
- 'Content-Type': 'application/json'
- },
- }).success(function(response) {
- vardata = response.value;
- log(data);
- }).error(function(error) {});
- }
Then, let us apply .map to iterate over the response and display it on the page.
Full Code
- < script src = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js" > < /script> < script type = "text/javascript" > vartoken;
- $(document).ready(function() {
- requestToken();
- });
- functionrequestToken() {
- $.ajax({
- "async": true,
- "crossDomain": true,
- "url": "https://howling-crypt-47129.herokuapp.com/https://login.microsoftonline.com/sharepointtechie.onmicrosoft.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie
- "method": "POST",
- "headers": {
- "content-type": "application/x-www-form-urlencoded"
- },
- "data": {
- "grant_type": "client_credentials",
- "client_id ": "8baf0301-27df-44b1-b4fe-7911b9a918de",
- "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=",
- "scope ": "https://graph.microsoft.com/.default"
- },
- success: function(response) {
- log(response);
- token = response.access_token;
-
- RetrieveEmailFolder();
- },
- error: function(error) {
- log(JSON.stringify(error));
- }
- })
- }
- functionRetrieveEmailFolder() {
- $.ajax({
- method: 'GET',
- url: "https://graph.microsoft.com/v1.0/users/vinodhvignesh@sharepointtechie.onmicrosoft.com/mailFolders?select=displayName",
- headers: {
- 'Authorization': 'Bearer ' + token,
- 'Content-Type': 'application/json'
- },
- }).success(function(response) {
- vardata = response.value;
- log(data);
- map(function(folderinfo) {
- $('#display').append('<li>' + folderinfo.displayName + '</li>');
- })
- }).error(function(error) {});
- } < /script> < ul id = "display" > < /ul>
The final result is shown on the screen below.
So, in this article, I have explained retrieving the mail folders from your Office 365 mailbox. A lot more is to come in my upcoming articles. Stay tuned!!!
Happy coding!....