Show all Application Registrations using Microsoft Graph Toolkit in a SharePoint Framework webpart

spfxmgt-showallapplications.html

<!-- THIS CODE USES THE MICROSOFT GRAPH TOOLKIT -->
<!-- USE THE MICROSOFT GRAPH TOOLKIT EDITOR WEBPART FOR BETTER RESULT -->
<!-- REFERENCE LINK: http://www.ktskumar.com/2021/06/spfx-microsoft-graph-toolkit-show-all-application-registrations-in-sharepoint/ -->
<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>
<div class="kts-container">
	<mgt-get class="presence" resource="/directory/deleteditems/microsoft.graph.application" version="v1.0" scopes="Application.Read.All">
		<template data-type="default">
			<table class="kts-apptable">
				<caption>Deleted 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>


<script type="text/javascript">
function converttime(ft) {
      var dt = new Date(ft);
      return dt.getDate() + "/" + (dt.getMonth() + 1) + "/" + dt.getFullYear();
}
</script>