Beautify The Microsoft Graph Toolkit Response

In this blog, you will learn how to show all response value from Microsoft Graph API in Microsoft Graph Toolkit get component.

There are a lot of web components available in the Microsoft Graph Toolkit. We can use these components across multiple applications, ex., SharePoint Framework webpart, Node.js web application, etc.

Below is the list of available web components available in Microsoft Graph Toolkit,

• Login
• Person
• People
• Agenda
• People Picker
• Person card
• File
• File List
• Get
• Channel Picker
• To do
• Tasks

Among the above components, we can use the Get component to access any Microsoft Graph API. In this blog, I would like to show you, how to populate all properties retrieved from Microsoft Graph API response using mgt-get component in pretty view.

Below is the mgt-get component call, which populate the drive information from current user Onedrive. To try out the snippet, use the storyboard URL from Microsoft Graph Toolkit team.

HTML

<mgt-get resource="/me/drive" version="v1.0" scopes="file.read" max-pages="2">
	<template>
		<div class="objcontainer" data-for="{{a in Object.keys(this)}}">
			<div class="key">{{a}}</div>
			<div data-if="{{typeof(this[a]) != 'object'}}" class="value">{{this[a]}} </div>
			<div data-else class="value">
				<div data-for="{{b in Object.keys(this[a])}}">
					<div class="key">{{b}}</div>
					<div class="value">{{this[a][b]}}</div>
				</div>
			</div>
	</template>
	<template data-type="loading">
		loading
	</template>
	<template data-type="error">
		{{ this }}
	</template>
</mgt-get>

CSS

Apply the styles to the component by adding below styles,

.objcontainer{
    background-color:#eee;
    margin-top:15px;
    font-size:12px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.objcontainer:hover{
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.key{
    background-color: #aaa;
    padding:10px 0px 5px 10px;
    text-transform:uppercase;
    border:1px solid #aaa;
    font-weight: bold;
}
.value{
    padding:5px 0px 5px 5px;
}

OUTPUT

The output of the above snippets looks like below,

Stay tune to view lot more information on the Microsoft Graph Toolkit...