How do we Integrate the Microsoft Planner with my Web Application

Question

How do we Integrate the Microsoft Planner with my Web Application

Chethan Ramesh 5

Hello Team,

I have a requirement where I need to integrate Microsoft Planner in My Web Application, not a SharePoint Site.

Just Like what we have to Integrate with Teams similarly, I need to Integration with My Web Application. Need Help on Both the UI and the backend.

Thanks,

Chethan

1 answer

Your answer

Answer 1

AsithwMSFT 1,520 Microsoft External Staff

To integrate the Planner through the Graph API, follow these steps:

Planner APIs: You can interact with the Planner through the Planner Graph APIs. Here is the documentation for Planner APIs.
To access the Planner data via Graph, you need a Graph API access token with valid permissions.
to get access token, you need to register app with Microsoft Azure app registration and follow the suitable authentication flow for your web application. refer the below documentation and samples that will help you to integrate your web app:
Quickstart: Register an application with the Microsoft identity platform
- OAuth 2.0 Authorization Code Flow
Check Samples: For more guidance, you can check out these samples on GitHub.

Chethan Ramesh 5 Reputation points

2024-05-06T09:08:01.37+00:00

Using the Microsoft Graph API to access Planner data is something I'm comfortable with. However, what about the UI? Are there any packages available to obtain UI components for integration with my web application, similar to the Azure Communication Services UI Library for team integration?

Chethan Ramesh 5

I tried the sample for creating a group, but I encountered a 403 Forbidden error.

For more details on the error:

{"error":
	{
		"code":"Authorization_RequestDenied",
		"message":"Insufficient privileges to complete the operation."
    }
}

We need help to solve this error and would appreciate your assistance here.

We have provided API permissions.
User's image

Code:-

public static async Task Main(string[] args)
{
    string clientId = "";
    string clientSecret = "";
    string tenantId = "";
    string[] scopes = { "https://graph.microsoft.com/.default" };
    // Configure the MSAL Confidential Client Application
    var app = ConfidentialClientApplicationBuilder
         .Create(clientId)
         .WithClientSecret(clientSecret)
         .WithAuthority(new Uri($"https://login.microsoftonline.com/{tenantId}"))
         .Build();
    // Acquire a token for the client
    var result = await app.AcquireTokenForClient(scopes)
         .ExecuteAsync();
    await CreateGroup(result.AccessToken);
}
public static async Task CreateGroup(string accessToken)
{
    // Define your Microsoft Graph endpoint
    string graphEndpoint = "https://graph.microsoft.com/v1.0/";
    var requestBody = new
    {
        description = "Self help community for library",
        displayName = "Library Assist",
        groupTypes = new List<string>
        {
            "Unified",
        },
        mailEnabled = true,
        mailNickname = "library",
        securityEnabled = false,
    };
    using (var httpClient = new HttpClient())
    {
        string jsonPayload = JsonSerializer.Serialize(requestBody);
        // Set the authorization header
        httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", accessToken);
        // Set the request URI
        string requestUri = $"{graphEndpoint}groups";
        // Set the request content
        var content = new StringContent(jsonPayload, Encoding.UTF8, "application/json");
        // Send the POST request
        var response = await httpClient.PostAsync(requestUri, content);
        // Check if the request was successful
        if (response.IsSuccessStatusCode)
        {
            // Read the response content
            string responseBody = await response.Content.ReadAsStringAsync();
            Console.WriteLine($"Group created successfully. Response: {responseBody}");
        }
        else
        {
            Console.WriteLine($"Error creating group. Status code: {response.StatusCode}");
        }
    }
}

AsithwMSFT 1,520 Reputation points Microsoft External Staff

2024-05-06T10:23:24.39+00:00

Hello Chethan

are you looking Microsoft Graph Toolkit ?

It is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph.

https://learn.microsoft.com/en-us/graph/toolkit/overview?tabs=html

https://mgt.dev/?path=/docs/overview--docs
AsithwMSFT 1,520 Reputation points Microsoft External Staff

2024-05-06T10:27:37.5+00:00

regarding your code sample ,

did you grant the permission for above scopes?
Chethan Ramesh 5 Reputation points

2024-05-07T15:23:55.45+00:00

I used the Microsoft Graph Toolkit for Angular, and it's functioning properly for the mgt-login component. However, when I tried using mgt-planner, it didn't display any response or data on the UI. Although I have Project Planning tasks assigned to me, the Angular project isn't showing any data.
I have referred this Link for the Sample-
mgt-samples/samples/app/angular-app at main · pnp/mgt-samples · GitHub
Chethan Ramesh 5 Reputation points

2024-05-09T11:24:07.1933333+00:00

Any updates on the above Request
Chethan Ramesh 5 Reputation points

2024-05-09T11:25:17.9833333+00:00

Are there any updates on the Microsoft Graph Toolkit for Angular? Additionally, how can I customize the Planner Component in React or Angular to modify the due date and title name for tasks? Furthermore, what additional customization options are available for Planner and Task components using the Microsoft Graph Toolkit that are not provided in the documentation? Here is the link I referred to: https://learn.microsoft.com/en-us/graph/overview.

Share via

How do we Integrate the Microsoft Planner with my Web Application

1 answer

Your answer