Retrieve Mailbox Folders Using Microsoft Graph API

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.

• How To Fetch Access Token
• Getting User Properties From Office 365 Using Microsoft Graph API
• Send Email Using Microsoft Graph API From SharePoint Online
• Upload And Set Office 365 Profile Image Using Microsoft Graph API
• Retrieve site collections and subsites using Microsoft Graph API

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; // Initialize Globally
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", //Provide your app id
            "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret
            "scope ": "https://graph.microsoft.com/.default"
        },
        success: function(response) {
            log(response);
            token = response.access_token; //Store the token into global variable
        },
        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/[email protected]/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/[email protected]/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", //Provide your app id
            "client_secret": "tZ76oVPN039WlWPoAp+1aICq66vs7oUtE4lhDQYwxGY=", //Provide your secret
            "scope ": "https://graph.microsoft.com/.default"
        },
        success: function(response) {
            log(response);
            token = response.access_token;
            // console.log(token);
            RetrieveEmailFolder();
        },
        error: function(error) {
            log(JSON.stringify(error));
        }
    })
}
functionRetrieveEmailFolder() {
    $.ajax({
        method: 'GET',
        url: "https://graph.microsoft.com/v1.0/users/[email protected]/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!....