Articles about European Sharepoint Hosting Service
SharePoint Hosting – Animate Your Profile Image Using Microsoft Graph Toolkit In SharePoint
Do you want to show some effects on your profile image? Let’s do it by combing the Microsoft Graph Toolkit, MGT Editor SharePoint Framework webpart in SharePoint page.
Microsoft Graph Toolkit is a collection of reusable web components and authentication providers for accessing and working with Microsoft Graph. These components help to fetch and work with Microsoft Graph API directly.
We have some tools or packages available on GitHub. These tools make our tasks in integrating Microsoft Graph API in SharePoint easier. This blog helps you integrate those in simple steps by animating your profile picture in SharePoint Framework webpart.
To do that, follow the below steps,
Step 1 – Deploy Microsoft graph toolkit SharePoint framework package
- Download the latest package from this location.
- Upload and deploy the package in SharePoint App Catalog
Step 2 – Deploy the MGT Editor SharePoint Framework Webpart package
- Download the mgteditor-webpart SharePoint framework webpart package from this location.
- Upload and deploy the package to SharePoint App Catalog
Step 3 – Add the webpart
- Navigate to the SharePoint site
- Install or add the package to the site from App Store page
- Create a new modern page or navigate to the existing modern page
- Add the webpart.
Step 4 – Edit and add Microsoft Graph Toolkit components with styles
Start Editing the webpart by clicking the Edit webpart icon to open the WebPart edit panel,
Add the below HTML snippet in the HTML Code editor box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<mgt-person person-query="me"> <template> <div id="outerContainer" data-if="person.personImage"> <div id="container"> <div class="item"> <img src="{{ person.personImage }}" /> </div> <div class="circle" style="animation-delay: -3s"> </div> <div class="circle" style="animation-delay: -2s"> </div> <div class="circle" style="animation-delay: -1s"> </div> <div class="circle" style="animation-delay: 0s"> </div> </div> </div> <div data-else> {{ person.displayName }} </div> </template> </mgt-person> <style> #container { width: 200px; height: 200px; border-radius:50%; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .circle { border-radius: 50%; background: rgba(53,105,243,1); width: 150px; height: 150px; position: absolute; opacity: 0; animation: scaleIn 6s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32); } .item { z-index: 100; padding: 5px; } .item img { width: 100px; border-radius: 50%; } @keyframes scaleIn { from { transform: scale(0.5, 0.5); opacity: 0.35; } to { transform: scale(2.5, 2.5); opacity: 0; } } </style> |
Then save and publish the page.
The HTML snippet contains two sections.
- Microsoft Graph Toolkit Web component with template
- Styles for the web component
<mgt-person> components return the queried user information
<template> with in the component used to render the HTML information
animation and transform property in style section helps to animate the background of the profile picture.
| Print article | This entry was posted by Peter on December 10, 2021 at 4:39 am, and is filed under European SharePoint 2013 Hosting. Follow any responses to this post through RSS 2.0. Both comments and pings are currently closed. |
