Today I have started a series to show the power of Microsoft Graph API along with SharePoint Framework by using Microsoft Graph Toolkit.

Microsoft Graph Toolkit is an open-source web component, which makes it easy to use Microsoft Graph in your application. To know more about this, check out the below links,

What is Microsoft Graph Toolkit?

Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph – Microsoft Docs

How to use Microsoft Graph Toolkit in SharePoint Framework

I have previously written an article on how to connect this Kit with SharePoint Framework and created a Microsoft Graph Toolkit Editor web part to access any Graph API to show the data dynamically. In this, we can configure the HTML property and add the mgt web components.

A SharePoint Framework web part for Microsoft Graph Toolkit

Microsoft recently announces the separate npm package (mgt-spfx and mgt-react) for SharePoint Framework’s Microsoft Graph Toolkit.

SharePoint Framework library for Microsoft Graph Toolkit – Microsoft Docs

I have followed the recommendations provided by Microsoft and migrated the year-old web part to use the latest SPFX and other packages,

Microsoft Graph Toolkit Editor web part is upgraded

In this series, I tried to replicate the same behaviour which we seen in the Admin consoles/pages in Microsoft 365. As a first article, we will see how to view all app registrations in SharePoint Framework.

The following Microsoft Graph API used to fetch all App registrations from your tenant,

https://graph.microsoft.com/v1.0/applications

asdfa

Clone or download the Microsoft Graph Toolkit editor from the below GitHub location and prepare the SPFx package. Then install Microsoft Graph Toolkit for SharePoint Framework and Microsoft Graph Toolkit Editor to your app catalog.

Then add the Editor web part to the SharePoint Site.

  • Create a new modern Site Page
  • Add the Microsoft Graph Toolkit Editor web part to the page
  • Edit the web part and add the below HTML snippet to the HTML property
<div class="kts-container">
	<mgt-get class="presence" resource="/applications" version="v1.0" scopes="Application.Read.All">
		<template data-type="default">
			<table class="kts-apptable">
				<caption>All Applications</caption>
				<thead>
					<tr>
						<th scope="col">Display Name</th>
						<th scope="col">Application (client) ID</th>
						<th scope="col">Created on</th>
						<th scope="col">Certificates & Secrets</th>
					</tr>
				</thead>
				<tbody>
					<tr data-for="app of value">
						<td data-label="DisplayName">{{app.displayName}}</td>
						<td data-label="Application (client) ID">{{app.appId}}</td>
						<td data-label="Created on">{{converttime(app.createdDateTime)}}</td>
						<td data-label="Certificates & Secrets"> <span data-for="pc of app.passwordCredentials">
								<span data-if="new Date(pc.endDateTime) <= new Date()">Expired</span> <span data-else>{{converttime(pc.endDateTime)}}</span> </span>
						</td>
					</tr>
				</tbody>
			</table>
		</template>
	</mgt-get>
</div>
  • Add the below JavaScript code to the JavaScript property
function converttime(ft) {
    var dt = new Date(ft);
    return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
}
  • To apply the nice look and feel, append the below CSS snippet inside the HTML property.
<style type="text/css">
        table {
            border-collapse: collapse;
            margin: 0;
            padding: 0;
            width: 100%;
            table-layout: fixed;
        }
        table caption {
            font-size: 1.5em;
            margin: .5em 0 .75em;
            text-align: left;
        }
        table tr {
            background-color: #f8f8f8;

            border-top: 1px solid #ddd;
            pdding: .35em;
        }
        table tr:hover {
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
            background-color: #fff;
        }
        table th,
        table td {
            padding: .625em;
            text-align: left;
            font-size: .75em;
            color: rgb(96, 94, 92);
            text-overflow: ellipsis;
        }
        table th {
            font-size: .85em;
            letter-spacing: .1em;
            text-transform: uppercase;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .1);
            background-color: #fff;
        }
        table td a {
            text-decoration: none;
        }
        .kts-flex-container {
            white-space: nowrap;
            display: flex;
            flex-grow: 1;
            overflow: hidden;
            align-items: center;
        }
        .kts-icon {
            margin-right: 12px;
        }

        .kts-icon img {
            width: 32px;
        }
        .kts-item-name a {
            color: rgb(37, 36, 35);
            font-size: .80rem;
        }
        @media screen and (max-width: 600px) {
            table {
                border: 0;
            }

            table caption {
                font-size: 1.3em;
            }
            table thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }
            table tr {
                border-bottom: 3px solid #ddd;
                display: block;
                margin-bottom: .625em;
            }
            table td {
                border-bottom: 1px solid #ddd;
                display: block;
                font-size: .8em;
                text-align: right;
            }
            table td::before {
                content: attr(data-label);
                float: left;
                font-weight: bold;
                text-transform: uppercase;
            }

            table td:last-child {
                border-bottom: 0;
            }
        }
    </style>
  • After applying all the code, the output looks like as shown below

All Application Registrations

To view the list of deleted App registered applications by changing the url in mgt-get as /directory/deleteditems/microsoft.graph.application

The Microsoft Graph API for viewing deleted applications as below

https://graph.microsoft.com/v1.0/directory/deleteditems/microsoft.graph.application

After changing the URL; the output looks like below,
Deleted applications

Similarly, we can extend to a greater level by combining Microsoft Graph Toolkit with Microsoft Graph Editor SharePoint framework web part.

Full Code Reference: https://gist.github.com/ktskumar/0da3240d6f39b4595f12ebf1f9d40b2a