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.

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.

JSON data

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.

Response

So now, let us create a function "RetrieveEmailFolder" and pass the access token into the header.

EndPoint

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.

HTTP

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.

DisplayName

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.

Final Result

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!