An Introduction to Microsoft Graph SDK and How to Create a To-Do List Using JavaScript
Published Mar 29 2023 12:00 AM 4,767 Views
Brass Contributor

What is Microsoft Graph SDK

kevin_comba_0-1679875780560.png

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

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:

Register our app on Azure App Registrations

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

kevin_comba_46-1679876321517.png

 

  1. Search for App registration

kevin_comba_47-1679876321530.png

 

  1. Click on New registration.

kevin_comba_48-1679876321538.png

 

  1. 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.

kevin_comba_49-1679876321546.png

 

 

 

Clone Our Template

 

  • Create a folder on your desktop and name it Todo

 

kevin_comba_50-1679876394014.png

 

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

kevin_comba_51-1679876394093.png

 

 

kevin_comba_52-1679876394099.png

 

 

  • 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.

kevin_comba_53-1679876394108.png

 

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

kevin_comba_54-1679876394116.png

 

 

kevin_comba_55-1679876394128.png

 

 

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

kevin_comba_56-1679876394137.png

 

 

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

 

  • Copy the client Id from your Azure portal.

kevin_comba_57-1679876482695.png

 

 

  • 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.

kevin_comba_58-1679876482704.png

 

 

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

kevin_comba_59-1679876482713.png

 

  • 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.

kevin_comba_60-1679876482720.png

 

 

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

kevin_comba_61-1679876482724.png

 

 

  • 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.

kevin_comba_62-1679876482731.png

 

 

Let’s build the To Do List

 

  • Below is the structure of Microsoft To Do List.

kevin_comba_63-1679876482737.png

 

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.

kevin_comba_64-1679876482745.png

 

 

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

     

kevin_comba_83-1679876859582.png

 

 

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

kevin_comba_81-1679876707649.png

 

 

 

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

kevin_comba_65-1679876482751.png

 

  • 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.

kevin_comba_66-1679876482757.png

 

 

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

kevin_comba_67-1679876482762.png

 

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

kevin_comba_68-1679876482767.png

 

 

  • 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".

kevin_comba_69-1679876482773.png

 

 

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

kevin_comba_70-1679876482778.png

 

 

  • 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.

kevin_comba_71-1679876482782.png

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.

kevin_comba_72-1679876482787.png

 

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

kevin_comba_73-1679876482791.png

 

 

  • To delete a task use this code below.

kevin_comba_74-1679876482797.png

 

 

  • The results will show one task have been deleted.

kevin_comba_75-1679876482802.png

 

 

  • To update a task add the below code and save.

kevin_comba_76-1679876482807.png

 

 

  • Below is the task we want to update.

kevin_comba_77-1679876482811.png

 

 

  • After update

kevin_comba_78-1679876482816.png

 

Read more

 

Check out the Microsoft Graph modules to learn more. They have very important use case scenarios to help you understand Microsoft graph's full capabilities and implementations : -

Lastly read more on how authenticate and authorize any app using Microsoft Identity platform

controlplane.png

 

1 Comment
Co-Authors
Version history
Last update:
‎Mar 27 2023 07:42 AM
Updated by: