Retrieve Mailbox Folders Using Microsoft Graph API

In my previous articles, I have written about fetching access tokens and users/groups. I have added the links to 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
function requestToken() {
    $.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 successful 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

function RetrieveEmailFolder() {
    $.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) {
        var data = response.value;
        console.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

function RetrieveEmailFolder() {
    $.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) {
        var data = response.value;
        console.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">
    var token;
    $(document).ready(function() {
        requestToken();
    });
    function requestToken() {
        $.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));
            }
        })
    }
    function RetrieveEmailFolder() {
        $.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) {
            var data = response.value;
            log(data);
            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 how to retrieve the mail folders from your Office 365 mailbox. A lot more is to come in my upcoming articles. Stay tuned!!!

Happy coding!