An Introduction to Microsoft Graph SDK and How to Create a To-Do List Using JavaScript

kevin_comba · ‎Mar 29 2023

What is Microsoft Graph SDK

Overview - Microsoft Graph SDK is a software development kit (SDK) provided by Microsoft that enables developers to easily integrate with the Microsoft Graph API. The Microsoft Graph SDK makes it easier for developers to build applications that leverage the capabilities of Microsoft 365 services by providing a set of libraries, tools, and services. It abstracts away the complexity of working with the underlying HTTP requests and responses required to interact with the Graph API and provides a more intuitive programming model.
Supported Languages

C#
PowerShell
TypeScript | JavaScript
Java
Go
PHP
Python (preview)

How To Create A Microsoft To Do List Using Microsoft Graph SDK And JavaScript

In order to create a Microsoft To Do App we need to:

VSCode installed.
Nodejs installed on your machine.
Git installed.
An Azure subscription: if you’re a student you can access Azure for free for students (use your school email to verify your student), else create a free account if you’re not a student.
Template to get started - Run `` git clone https://github.com/kelcho-spense/javascript-Microsoft-Graph-SDk-example.git ``
Register our app on Azure App Registrations
Connect our JavaScript app with Microsoft Graph via Microsoft Graph JavaScript Client Library and authenticate our app via Microsoft Authentication Library (MSAL).

Register our app on Azure App Registrations

Go to azure portal https://portal.azure.com/#home

Search for App registration

Click on New registration.

Register your application:

Give your application a name.
Select the supported account types – choose Accounts in any organizational directory and personal accounts (This will support all Microsoft accounts to interact with your application).
Select your application type – choose single-page application.
Redirect URI – http://localhost:8080
Click register.

Clone Our Template

Create a folder on your desktop and name it Todo

Right click on the folder and open with VSCode (or drag the folder and drop it to VSCode)

Open your terminal (on Windows use CTR + J) and type `` git clone https://github.com/kelcho-spense/javascript-Microsoft-Graph-SDk-example.git . ``

After cloning, we have several files. The index.html file contains login, logout, execute buttons and a div to display the username of the current logged in user.

The UI.js file contains simple logic to hid and unhide html elements like the sign in button.

The auth.js file contains Microsoft Authentication Library for JavaScript (MSAL.js) code to authenticate users using Azure AD and also enables your app to get tokens to access Microsoft Cloud services such as Microsoft Graph.

The graph.js contains an instance of graph client which will enable us to connect with Microsoft graph.

Let’s set up and interact with the Microsoft Graph SDK.

Copy the client Id from your Azure portal.

Paste it on auth.js. Edit the authority value to contain common, Common will be our tenant ID which will allow all types of Microsoft accounts to be authenticated by MSAL.

Save your work and open your terminal and type `` npm start ``

A new tab will be opened and require you to accept. This will grant your app the rights to interact with Microsoft Graph and login.

The app will display your name registered to the Microsoft account you used to login on the above step.

Open your browser console ( CTRL + Shift + I), and press run code to execute our app. The console will display user’s displayName and the Id fetched from Microsoft Graph SDK using the `` await graphClient.api('/me').select('id,displayName').get(); `` method in graph.js file.

Let’s build the To Do List

Below is the structure of Microsoft To Do List.

Task List CRUD Operation

To get all the task lists on my account add the following code to our run function (to be executed by the code run button on our interface.

Save your code, refresh your browser and click run code. The pop below will appear and accept.

On the console, an object with an array of task lists will be displayed.

To create a new task list and the below code. Save your code, and refresh your browser.

Click Run code and click on the object on the console to view all the values in the array object. Notice the is a new task list "New Task List" added to the object.

Copy the task list id below. We will need it to update our task List

Add the code below to update the task list we created above. Add the id we copied to the variable updateTaskId on our code.

Save your code and refresh the browser, run code and check the object on the console. Our display name for our task List got updated with "Updated Task List".

To delete the task List we only need the Id. Copy the code below and add to the app.

Save your code and refresh the browser, run code and check the object on the console. We have two items because one has been deleted.

Task Crud Operations

The code below will add a new task “Task 1” and get all the tasks in the task list associated with the taskListId we got from the last list of task lists.

After executing the code, we get the new task added to the tasks in the task list.

To delete a task use this code below.

The results will show one task have been deleted.

To update a task add the below code and save.

Below is the task we want to update.

After update

Products (49)

Special Topics (26)

Video Hub (462)

Most Active Hubs