Here is a SharePoint Framework web part I have put together to show an organisation chart for the current user:
Code is available on GitHub as part of the SharePoint Framework client-side web part samples & tutorials: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-organisationchart
(click to zoom)
1) For getting the Manager and the Reports of the current user, the ExtendedManagers and DirectReports user profile properties are used.
2) Uses the OrgChart CSS directly from the Office UI Fabric: http://dev.office.com/fabric/OrgChart (Not the Office UI Fabric React components which are still in progress)
The Office UI Fabric CSS is bundled together with the web part and not referenced externally. In the OrganisationChart.module.scss:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "~office-ui-fabric/dist/sass/Fabric.scss"; | |
@import "~office-ui-fabric/dist/components/Persona/Persona.scss"; | |
@import "~office-ui-fabric/dist/components/OrgChart/OrgChart.scss"; |
3) The REST API calls are made with the HttpClient belonging to the current ServiceScope. No need to pass web part properties or the web part context.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export class UserProfileService implements IUserProfileService { | |
private httpClient: HttpClient; | |
constructor(serviceScope: ServiceScope) { | |
serviceScope.whenFinished(() => { | |
this.httpClient = serviceScope.consume(httpClientServiceKey); | |
}); | |
} | |
public getPropertiesForCurrentUSer(): Promise<IPerson> { | |
return this.httpClient.get( | |
`/_api/SP.UserProfiles.PeopleManager/GetMyProperties?$select=DisplayName,Title,PersonalUrl,PictureUrl,DirectReports,ExtendedManagers`) | |
.then((response: Response) => { | |
return response.json(); | |
}); | |
} | |
//other code removed | |
} |
4) The Managers and DirectReports are fetched by registering a mapping of the UserProfileService class in the current ServiceScope
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const serviceScope: ServiceScope = this.props.serviceScope; | |
const userProfileServiceKey: ServiceKey<IUserProfileService> = ServiceKey.create<IUserProfileService>("userprofileservicekey", UserProfileService); | |
const userProfileServiceInstance = serviceScope.consume(userProfileServiceKey); | |
userProfileServiceInstance.getPropertiesForCurrentUSer().then((person: IPerson) => { | |
this.setState({ user: person }); | |
userProfileServiceInstance.getPropertiesForUsers(person.ExtendedManagers).then((mngrs: IPerson[]) => { | |
this.setState({ managers: mngrs }); | |
}); | |
userProfileServiceInstance.getPropertiesForUsers(person.DirectReports).then((rprts: IPerson[]) => { | |
this.setState({ reports: rprts }); | |
}); | |
}); |
5) OData Batching is used to get details (Photos, Titles, Profile Urls) of all DirectReports in a single call. (Similarly, if more than one Manager exists in the ExtentedManagers property, details of all users are fetched in a single batch call)
More on OData Batching in my previous post: Batch REST requests in SPFx using the ODataBatch preview
Hope you find this useful!
7 comments:
Brilliant post.. Where can we get more info about the Servicescope..
Thanks Arnab. Here is a tech note on the ServiceScope api by the SharePoint product team: https://github.com/SharePoint/sp-dev-docs/wiki/Tech-Note:-ServiceScope-API
Very nice post! Thank you for sharing.
I am getting the below warning message and css is not getting aligned properly. Can you please help me the same
The local CSS class 'ms-OrgChart-listItemBtn' is not camelCase and will not be type-safea
Hi Santosh,
I have updated the org chart webpart to use office-ui-fabric-react and uifabric/styling. You should no longer be getting any issues. You can find the updated code here: https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-organisationchart
Hi Vardhaman,
I have used this OrgChart, but i'm facing the below issue.
could you please help me.
Cannot find module "organisationChartStrings"
Thank you
Hi Vardhman,
I am also getting "OrgChartStrings" error. When i add webpart to a page, it is showing technical error as below.
[SPLoaderError.loadComponentError]:
***Failed to load component "32a5bf6e-3ee0-4788-a301-56136334815d" (OrganisationChartWebPart). Original error: ***Failed to load path dependency "organisationChartStrings" from component "32a5bf6e-3ee0-4788-a301-56136334815d" (OrganisationChartWebPart). Original error: Script error for: 32a5bf6e-3ee0-4788-a301-56136334815d_2.1.0/organisationChartStrings
http://requirejs.org/docs/errors.html#scripterror
***INNERERROR:
***Failed to load path dependency "organisationChartStrings" from component "32a5bf6e-3ee0-4788-a301-56136334815d" (OrganisationChartWebPart). Original error: Script error for: 32a5bf6e-3ee0-4788-a301-56136334815d_2.1.0/organisationChartStrings
http://requirejs.org/docs/errors.html#scripterror
Post a Comment