{"id":6306,"date":"2021-01-25T08:18:16","date_gmt":"2021-01-25T08:18:16","guid":{"rendered":"https:\/\/www.softreetechnology.com\/?p=6306"},"modified":"2021-01-25T08:18:16","modified_gmt":"2021-01-25T08:18:16","slug":"display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx","status":"publish","type":"post","link":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/","title":{"rendered":"Display UserName and GroupName of a SharePoint Site in  a webpart by using react in Spfx:"},"content":{"rendered":"\n<ul class=\"wp-block-list\"><li><strong>At first create your solution named as \u201citemwebpart\u201d by using \u201cyo @microsoft\/sharepoint\u201d as given below:<\/strong><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd1-1.png\" alt=\"\" class=\"wp-image-6307\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>After that you have to give the information as mentioned below.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>What is your\nsolution name?<\/strong>&nbsp;Listview-webpart<\/li><li><strong>Which baseline\npackages do you want to target for your component(s)?<\/strong>&nbsp;SharePoint\nOnline only (latest)<\/li><li><strong>Where do you want\nto place the files?<\/strong>&nbsp;Use the current folder<\/li><li><strong>Which type of\nclient-side component to create?<\/strong>&nbsp;WebPart<\/li><li><strong>What is your Web\npart name?<\/strong>&nbsp;List items<\/li><li><strong>What is your Web\npart description?<\/strong>&nbsp;Shows list items from the selected list<\/li><li><strong>Which framework\nwould you like to use?<\/strong>&nbsp;React<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd2-1.png\" alt=\"\" class=\"wp-image-6308\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Then after you have to go to your\nsolution.<\/li><li>After that you have to import the sp , site users and site groups from @pnp\/sp library in your .ts file\nas given below.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd3-1.png\" alt=\"\" class=\"wp-image-6309\"\/><\/figure>\n\n\n\n<p>import&nbsp;&#8220;@pnp\/sp\/webs&#8221;;<\/p>\n\n\n\n<p>import\u00a0&#8220;@pnp\/sp\/site-users&#8221;;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>First step is to declare two collections for site users and site groups in your .ts file,so that you can use them in getPropertyPaneConfiguration () method as given below.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd5-1.png\" alt=\"\" class=\"wp-image-6310\"\/><\/figure>\n\n\n\n<p>export&nbsp;default&nbsp;class&nbsp;ListItemsWebPart&nbsp;extends&nbsp;BaseClientSideWebPart&lt;IListItemsWebPartProps&gt;&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;private&nbsp;listsFetched:&nbsp;boolean;<\/p>\n\n\n\n<p>&nbsp;\nprivate&nbsp;userDropDownOptions:&nbsp;IPropertyPaneDropdownOption[];<\/p>\n\n\n\n<p>\u00a0 private\u00a0grpDropDownOptions:\u00a0IPropertyPaneDropdownOption[];<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Now&nbsp; use above\ntwo collections in getPropertyPaneConfiguration() method as\nmentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd6-1.png\" alt=\"\" class=\"wp-image-6311\"\/><\/figure>\n\n\n\n<p>&nbsp;protected&nbsp;getPropertyPaneConfiguration():&nbsp;IPropertyPaneConfiguration&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pages:&nbsp;[<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header:&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description:&nbsp;strings.PropertyPaneDescription<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groups:&nbsp;[<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groupName:&nbsp;strings.BasicGroupName,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;groupFields:[<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;PropertyPaneDropdown(&#8216;userDropDownOptions&#8217;,{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:strings.userField,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:this.userDropDownOptions<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; PropertyPaneDropdown(&#8216;grpDropDownOptions&#8217;,{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label:strings.grpField,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;options:this.grpDropDownOptions<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}),<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;};<\/p>\n\n\n\n<p>\u00a0\u00a0}<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Then you have to create functions for site users and site groups.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>For site\nusers create a function in your .ts file as mentioned below :<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd7-1.png\" alt=\"\" class=\"wp-image-6312\"\/><\/figure>\n\n\n\n<p>private&nbsp;getusersForSite():Promise&lt;any&gt;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;users&nbsp;=&nbsp;sp.web.siteUsers<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;users.get().then((data)&nbsp;=&gt;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#8216;Total&nbsp;number&nbsp;of&nbsp;lists&nbsp;are&nbsp;&#8216;&nbsp;+&nbsp;data.concat);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;data;<\/p>\n\n\n\n<p>\u00a0\u00a0\u00a0\u00a0\u00a0});<\/p>\n\n\n\n<p>\u00a0\u00a0\u00a0}<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>For \u00a0Site groups create a function in your .ts file as mentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd8-2.png\" alt=\"\" class=\"wp-image-6313\"\/><\/figure>\n\n\n\n<p>&nbsp;private&nbsp;getgroupsForSite():Promise&lt;any&gt;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;sp.web.siteGroups.get().then((data)&nbsp;=&gt;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(&#8216;Total&nbsp;number&nbsp;of&nbsp;lists&nbsp;are&nbsp;&#8216;&nbsp;+&nbsp;data.concat);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;data;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<\/p>\n\n\n\n<p>\u00a0\u00a0\u00a0}<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>After that you have to make two dropdown labels for site users and site groups \u00a0respectively in your en-us.js file as mentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd9-1.png\" alt=\"\" class=\"wp-image-6314\"\/><\/figure>\n\n\n\n<p>define([],&nbsp;function()&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;return&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&#8220;userField&#8221;:&nbsp;&#8220;SiteUsers&#8221;,<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&#8220;grpField&#8221;:&nbsp;&#8220;SiteGroups&#8221;<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>});<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Then you have to declare the dropdown\nlabels for site groups and site users in your mystrings.d.ts file as mentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd10-1.png\" alt=\"\" class=\"wp-image-6315\"\/><\/figure>\n\n\n\n<p>declare&nbsp;interface&nbsp;IListItemsWebPartStrings&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;PropertyPaneDescription:&nbsp;string;<\/p>\n\n\n\n<p>&nbsp;&nbsp;userFieldlabel:&nbsp;string;<\/p>\n\n\n\n<p>&nbsp;&nbsp;groupFieldlabel:&nbsp;string;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>declare&nbsp;module&nbsp;&#8216;ListItemsWebPartStrings&#8217;&nbsp;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;const&nbsp;strings:&nbsp;IListItemsWebPartStrings;<\/p>\n\n\n\n<p>&nbsp;&nbsp;export&nbsp;=&nbsp;strings;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Then you have to call the functions\nin onPropertyPaneConfigurationStart()\nfunction in your .ts\nfile as mentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd11.png\" alt=\"\" class=\"wp-image-6316\"\/><\/figure>\n\n\n\n<p>protected&nbsp;onPropertyPaneConfigurationStart():void{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.UserDropdownOptions&nbsp;=&nbsp;!this.listDropDownOptions;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.context.propertyPane.refresh();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.context.statusRenderer.displayLoadingIndicator(this.domElement,&nbsp;&#8216;users&#8217;);&nbsp;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.getusersForSite().then((response)&nbsp;=&gt;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(let&nbsp;i=0&nbsp;;&nbsp;i&lt;&nbsp;response.length;i++){<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/now&nbsp;populate&nbsp;the&nbsp;listdropdown&nbsp;array<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.userDropDownOptions.push({key:response[i].Title,text:response[i].Title});<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.userDropDownOptions&nbsp;=&nbsp;false;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.context.propertyPane.refresh();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.context.statusRenderer.clearLoadingIndicator(this.domElement);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.render();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;});<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.GrpDropdownOptions&nbsp;=&nbsp;!this.GrpDropdownOptions;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.context.propertyPane.refresh();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.context.statusRenderer.displayLoadingIndicator(this.domElement,&nbsp;&#8216;groups&#8217;);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;this.getgroupsForSite().then((response)&nbsp;=&gt;{<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(let&nbsp;i=0&nbsp;;&nbsp;i&lt;&nbsp;response.length;i++){<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.grpDropDownOptions.push({key:response[i].Title,text:response[i].Title});<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.GrpDropdownOptions&nbsp;=&nbsp;false;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.context.propertyPane.refresh();<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.context.statusRenderer.clearLoadingIndicator(this.domElement);<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.render();<\/p>\n\n\n\n<p>\u00a0\u00a0});<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>After all above these steps you have to run gulp serve in your solution in command prompt .<\/li><li>After that, open web part in your SharePoint site and edit it as mentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd12-1024x406.png\" alt=\"\" class=\"wp-image-6317\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Then check site users and site groups property pane and notice that site users and site groups on your site are visible in the property pane as mentioned below:<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd13.png\" alt=\"\" class=\"wp-image-6318\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd14.png\" alt=\"\" class=\"wp-image-6319\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd15.png\" alt=\"\" class=\"wp-image-6321\"\/><\/figure>\n\n\n\n<p>Conclusion:<\/p>\n\n\n\n<p>Dear viewers in this blog I am displaying site users and site groups of the SharePoint site in the web part by using react in spfx.<\/p>\n\n\n\n<p><span style=\"text-decoration: underline;\"><strong>Keyword<\/strong> <\/span>:<br> &#8220;Retrieve site users and site groups in spfx&#8221;.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At first create your solution named as \u201citemwebpart\u201d by using \u201cyo @microsoft\/sharepoint\u201d as given below: After that you have to give the information as mentioned below. What is your solution name?&nbsp;Listview-webpart Which baseline packages do you want to target for your component(s)?&nbsp;SharePoint Online only (latest) Where do you want to place the files?&nbsp;Use the current folder Which type of client-side [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-6306","post","type-post","status-publish","format-standard","hentry","category-sharepoint"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx: - Softree Technology<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx: - Softree Technology\" \/>\n<meta property=\"og:description\" content=\"At first create your solution named as \u201citemwebpart\u201d by using \u201cyo @microsoft\/sharepoint\u201d as given below: After that you have to give the information as mentioned below. What is your solution name?&nbsp;Listview-webpart Which baseline packages do you want to target for your component(s)?&nbsp;SharePoint Online only (latest) Where do you want to place the files?&nbsp;Use the current folder Which type of client-side [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/\" \/>\n<meta property=\"og:site_name\" content=\"Softree Technology\" \/>\n<meta property=\"article:published_time\" content=\"2021-01-25T08:18:16+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx: - Softree Technology","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/","og_locale":"en_US","og_type":"article","og_title":"Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx: - Softree Technology","og_description":"At first create your solution named as \u201citemwebpart\u201d by using \u201cyo @microsoft\/sharepoint\u201d as given below: After that you have to give the information as mentioned below. What is your solution name?&nbsp;Listview-webpart Which baseline packages do you want to target for your component(s)?&nbsp;SharePoint Online only (latest) Where do you want to place the files?&nbsp;Use the current folder Which type of client-side [&hellip;]","og_url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/","og_site_name":"Softree Technology","article_published_time":"2021-01-25T08:18:16+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#article","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/"},"author":{"name":"admin","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b"},"headline":"Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx:","datePublished":"2021-01-25T08:18:16+00:00","mainEntityOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/"},"wordCount":1227,"commentCount":0,"publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#primaryimage"},"thumbnailUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd1-1.png","articleSection":["SharePoint"],"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/","url":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/","name":"Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx: - Softree Technology","isPartOf":{"@id":"https:\/\/softreetechnology.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#primaryimage"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#primaryimage"},"thumbnailUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd1-1.png","datePublished":"2021-01-25T08:18:16+00:00","breadcrumb":{"@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#primaryimage","url":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd1-1.png","contentUrl":"https:\/\/www.softreetechnology.com\/wp-content\/uploads\/2021\/01\/dd1-1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/softreetechnology.com\/blog\/sharepoint\/display-username-and-groupname-of-a-sharepoint-site-in-a-webpart-by-using-react-in-spfx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softreetechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Display UserName and GroupName of a SharePoint Site in a webpart by using react in Spfx:"}]},{"@type":"WebSite","@id":"https:\/\/softreetechnology.com\/blog\/#website","url":"https:\/\/softreetechnology.com\/blog\/","name":"Softree Technology","description":"Celebrating 10+ Years in SharePoint Consulting !","publisher":{"@id":"https:\/\/softreetechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softreetechnology.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/softreetechnology.com\/blog\/#organization","name":"Softree Technology","url":"https:\/\/softreetechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","contentUrl":"https:\/\/softreetechnology.com\/blog\/wp-content\/uploads\/2023\/03\/cropped-white-logo-soft.png","width":844,"height":230,"caption":"Softree Technology"},"image":{"@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/98740297642f06debccdcee2de84086b","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/softreetechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6fc78c8a7aa3fb0bf43c3b9a2e3962d7?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/softreeconsulting.com"],"url":"https:\/\/softreetechnology.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6306","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=6306"}],"version-history":[{"count":0,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/posts\/6306\/revisions"}],"wp:attachment":[{"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=6306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=6306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softreetechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=6306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}