Step 7 : Render method looks like as below.
I am not adding to make the structure ready and pass as input to Detail list which is Office Fabric UI React Control. You can get solution how to pass the data to Control using below URL.
Office Fabric UI React Control Detail list
Render method looks like as below
public render():React.ReactElement<{}>{
return(
<div className={styles.reactGroupSamples}>
<PeoplePicker
context={this.props.context}
peoplePickerWPclassName={styles.peoplePickerWPClass}
titleText='Select Group:'
personSelectionLimit={1}
showtooltip={true}
disabled={false}
selectedItems={this._GetGroupMembers}
showHiddenInUI={false}
principalTypes={[PrincipalType.DistributionList, PrincipalType.SecurityGroup]}
resolveDelay={1000} />
<br/>
<p className={styles.memberStatus}>Group ID: {this.state.GroupId}</p>
{this.state.loading &&
<Spinner label='Loading...' ariaLive='assertive' />
}
{this.state.userItems.length > 0 &&
<div className={styles.detailsList}>
<div className={styles.row}>
<div className={styles.column}>
<TextField
label='Filter by Name:'
onChange={this._onFilter}
className={styles.filterTextfield}
/>
</div>
<div className={styles.column}>
</div>
</div><br/>
<div className={styles.row}>
<div className={styles.column}>
<p className={styles.memberStatus}>Group ID: {this.state.GroupId}</p>
</div>
<div className={styles.column}>
<CSVLink className={styles.csvLink}
data={this.state.userItems}
headers={this.headers}
filename={'UserGroups.csv'}
>
<CommandBarButton className={styles.exportIcon} iconProps={{ iconName: 'ExcelLogoInverse' }} text='Export to Excel' />
</CSVLink>
</div>
</div><br/>
<DetailsList
items={this.state.userItems}
columns={this.state.columns}
isHeaderVisible={true}
setKey='set'
layoutMode={DetailsListLayoutMode.justified}
selectionMode={SelectionMode.none}
ariaLabelForSelectionColumn='Toggle selection'
ariaLabelForSelectAllCheckbox='Toggle selection for all items'
checkButtonAriaLabel='Row checkbox'
/>
</div>
}
<p className={styles.memberStatus}>{this.state.memberStatus}</p>
</div>
);
}
Step 8 : Open Package.solution file and make below changes
Please make sure isDomainIsolated:true.
This property provide the security. Graph API Access concented only for this webpart.
So if any other webpart use Graph API then access i not granted.
If you use isDomainIsolated:false then number of webparts can use Graph API access.
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "react-group-samples-client-side-solution",
"id": "84bd4efc-eec8-4c97-84ee-b95d981b880b",
"version": "3.0.0.0",
"includeClientSideAssets": true,
"isDomainIsolated": true,
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Directory.Read.All"
},
{
"resource": "Microsoft Graph",
"scope": "Group.Read.All"
}
]
},
"paths": {
"zippedPackage": "solution/react-group-samples.sppkg"
}
}
Step 9 : Run below commands to generate the package .pkg file.
gulp bundle --ship
gulp package-solution --ship
Step 10 : Deploy package file in to app catalogs.
Click here to know how to deploy package file in sharepoint online.
Step 11 : Once the solutions is uploaded. Open below link to Approve the API request which is send by SharePoint Framework web part to Admin user. To approve the request we must have a the tenant administrator access.
https://Tenent-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement
Step 11 : Once the API request is approved.
Go to the sharepoint site and add webpart to page.You will get output as below image.
Please let me know your feedback and i am writing series of demos regarding the Graph API and SPFx integration.
You can contact me on Facebook, twitter or linkedin.
Sharing is Caring 🙂
