Articles about European Sharepoint Hosting Service
SharePoint 2013 Hosting – HostForLIFE :: Get Current User Profile Properties In SPFx Webpart Using MS Graph API
In this article, I have explained how to get the current user profile properties in your SPFx webpart using Microsoft Graph API
Create a SPFx project with “Webpart” template & choose the framework “React”
Install the necessary “NPM” packages and am going to use “MSGraphClient” to connect my webpart SPFx with Microsoft Graph API
|
1 |
npm install @microsoft<span class="token operator">/</span>microsoft<span class="token operator">-</span>graph<span class="token operator">-</span>types <span class="token operator">--</span>save<span class="token operator">-</span>dev |
Microsoft graph types help us to catch the error in your Typescript code faster.
Import the necessary packages in “MyUserInformation.tsx” file under “src\webparts\components”
|
1 |
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module keyword-as">as</span> <span class="token maybe-class-name">MicrosoftGraph</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'@microsoft/microsoft-graph-types'</span><span class="token punctuation">;</span> |
Open “IMyUserInformationProps” properties interface import the web part context from sp-webpart-base
|
1 |
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">WebPartContext</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">"@microsoft/sp-webpart-base"</span><span class="token punctuation">;</span> |
Add the “WebPartContext” properties inside the interface the final code look like below
|
1 2 3 4 5 |
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span><span class="token maybe-class-name">WebPartContext</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">"@microsoft/sp-webpart-base"</span><span class="token punctuation">;</span> <span class="token keyword module keyword-export">export</span> <span class="token keyword keyword-interface">interface</span> <span class="token class-name">IMyUserInformationProps</span> <span class="token punctuation">{</span> description<span class="token operator">:</span> string<span class="token punctuation">;</span> context<span class="token operator">:</span> <span class="token maybe-class-name">WebPartContext</span> <span class="token punctuation">}</span> |
Open “MyUserInformationWebPart.ts” include the context inside render()
|
1 2 3 4 5 6 7 8 9 10 |
<span class="token keyword keyword-public">public</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span> <span class="token keyword keyword-const">const</span> element<span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ReactElement</span></span><span class="token operator"><</span><span class="token maybe-class-name">IMyUserInformationProps</span><span class="token operator">></span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span> <span class="token maybe-class-name">MyUserInformation</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> context<span class="token operator">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">context</span><span class="token punctuation">,</span> description<span class="token operator">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">properties</span><span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token maybe-class-name">ReactDom</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">domElement</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Create a state interface to hold the data of user profile object
|
1 2 3 |
<span class="token keyword module keyword-export">export</span> <span class="token keyword keyword-interface">interface</span> <span class="token class-name">IUserInformationState</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Initialize the constructor to declare the props and state
|
1 2 3 4 5 6 7 |
<span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">MyEvents</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token operator"><</span><span class="token maybe-class-name">IMyEventsProps</span><span class="token punctuation">,</span> <span class="token maybe-class-name">IUserInformationState</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> <span class="token maybe-class-name">IMyEventsProps</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Create a function named “GetMyProfile()” to fetch the current user information
|
1 2 3 4 5 6 7 |
<span class="token keyword keyword-const">const</span> <span class="token function-variable function"><span class="token maybe-class-name">GetMyProfile</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">context</span><span class="token punctuation">.</span><span class="token property-access">msGraphClientFactory</span><span class="token punctuation">.</span><span class="token method function property-access">getClient</span><span class="token punctuation">(</span><span class="token string">'3'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter"><span class="token keyword keyword-void">void</span></span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> client<span class="token punctuation">.</span><span class="token method function property-access">api</span><span class="token punctuation">(</span><span class="token string">'me'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> user<span class="token operator">:</span> <span class="token maybe-class-name">MicrosoftGraph</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">User</span></span><span class="token punctuation">,</span> rawResponse<span class="token operator">?</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data<span class="token operator">:</span> user <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
In “ComponetDidMount()” pass the created function it will retrieve the user information when page renders
|
1 2 3 |
<span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access"><span class="token maybe-class-name">GetMyProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> |
Create a child component “UserDetail.tsx” to display user information details. Here I am using parent and child concept in components and send the retrieved data over props
Include the properties interface in your class component look like below
Import the UserDetail.tsx child component in to your parent component “MyUserInformation.tsx”
|
1 |
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token maybe-class-name">UserDetail</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'./UserDetail'</span><span class="token punctuation">;</span> |
Inside the render() method pass the component and data over props
|
1 2 3 4 5 |
<span class="token keyword keyword-public">public</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ReactElement</span></span><span class="token operator"><</span><span class="token maybe-class-name">IMyUserInformationProps</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword control-flow keyword-return">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span><span class="token maybe-class-name">UserDetail</span> data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">UserDetail</span><span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Now open the child component “UserDetail.tsx” get the data from the props and render it into your HTML element based on your UI.
Full code
MyUserInformation.tsx
|
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 |
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module keyword-as">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-import">import</span> <span class="token imports">styles</span> <span class="token keyword module keyword-from">from</span> <span class="token string">'./MyUserInformation.module.scss'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">IMyUserInformationProps</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'./IMyUserInformationProps'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> escape <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'@microsoft/sp-lodash-subset'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module keyword-as">as</span> <span class="token maybe-class-name">MicrosoftGraph</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'@microsoft/microsoft-graph-types'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token maybe-class-name">UserDetail</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'./UserDetail'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-export">export</span> <span class="token keyword keyword-interface">interface</span> <span class="token class-name">IUserInformationState</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">MyUserInformation</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span><span class="token operator"><</span><span class="token maybe-class-name">IMyUserInformationProps</span><span class="token punctuation">,</span> <span class="token maybe-class-name">IUserInformationState</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> <span class="token maybe-class-name">IMyUserInformationProps</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">//Connect to Graph API fetch the user information object</span> <span class="token function-variable function"><span class="token maybe-class-name">GetMyProfile</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">context</span><span class="token punctuation">.</span><span class="token property-access">msGraphClientFactory</span><span class="token punctuation">.</span><span class="token method function property-access">getClient</span><span class="token punctuation">(</span><span class="token string">'3'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token parameter"><span class="token keyword keyword-void">void</span></span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> client<span class="token punctuation">.</span><span class="token method function property-access">api</span><span class="token punctuation">(</span><span class="token string">'me'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">error<span class="token punctuation">,</span> user<span class="token operator">:</span> <span class="token maybe-class-name">MicrosoftGraph</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">User</span></span><span class="token punctuation">,</span> rawResponse<span class="token operator">?</span><span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">//set the user information object in state property</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> data<span class="token operator">:</span> user <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access"><span class="token maybe-class-name">GetMyProfile</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword keyword-public">public</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ReactElement</span></span><span class="token operator"><</span><span class="token maybe-class-name">IMyUserInformationProps</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword control-flow keyword-return">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span><span class="token maybe-class-name">UserDetail</span> data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span><span class="token maybe-class-name">UserDetail</span><span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
UserDetail.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token operator">*</span> <span class="token keyword module keyword-as">as</span> <span class="token maybe-class-name">React</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword module keyword-export">export</span> <span class="token keyword keyword-interface">interface</span> <span class="token class-name">IUserInformationProps</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> any <span class="token punctuation">}</span> <span class="token keyword keyword-class">class</span> <span class="token class-name">UserDetail</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token operator"><</span><span class="token maybe-class-name">IUserInformationProps</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> <span class="token maybe-class-name">IUserInformationProps</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword control-flow keyword-return">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>p style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>fontWeight<span class="token operator">:</span> <span class="token string">"bold"</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span><span class="token maybe-class-name">My</span> <span class="token maybe-class-name">User</span> <span class="token maybe-class-name">Information</span><span class="token operator">:</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span> <span class="token operator"><</span>i<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">.</span><span class="token property-access">mail</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>i<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">.</span><span class="token property-access">displayName</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>i<span class="token operator">></span><span class="token punctuation">{</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">data</span><span class="token punctuation">.</span><span class="token property-access">businessPhones</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword module keyword-export">export</span> <span class="token keyword module keyword-default">default</span> <span class="token maybe-class-name">UserDetail</span><span class="token punctuation">;</span> |
Before running the webpart include the below permission scopes inside your package-solution.json, You can include multiple permission scopes based on your application requirement
|
1 2 3 4 5 |
<span class="token string">"webApiPermissionRequests"</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token string">"resource"</span><span class="token operator">:</span> <span class="token string">"Microsoft Graph"</span><span class="token punctuation">,</span> <span class="token string">"scope"</span><span class="token operator">:</span> <span class="token string">"User.Read.All"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
After a successful deployment of your webpart, Open SharePoint admin center choose “Advanced -> API Access” from left navigation window.
Approve your permission scope “User.Read.All” is displayed on “Pending requests”
Hit “Gulp Serve” and run the webpart.
cheap europe sharepoint 2013 hosting, cheap european sharepoint server 2010 hosting, CSS in SPFx, europe sharepoint 2013 hosting, fast SharePoint 2013 Hosting, France Sharepoint 2013 Hosting, free SharePoint 2013 Hosting, india SharePoint 2013 Hosting, recommended SharePoint 2013 Hosting, SharePoint 2013 Hosting belgium, SharePoint 2013 Hosting germany, SharePoint 2013 Hosting Italy, SharePoint 2013 Hosting netherlands, SharePoint 2013 Hosting poland, SharePoint 2013 Hosting review switzerland, SharePoint 2013 Hosting UK, SharePoint Hosting 2013 Paris Server, Spain Sharepoint 2013 Hosting, tips SharePoint 2013 Hosting, Top Sharepoint 2013 hosting
| Print article | This entry was posted by Peter on August 26, 2022 at 3: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. |
