Tuesday 13 September 2016

SharePoint Framework: Org Chart web part using Office UI Fabric, React, OData batching and Service scopes

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:

Thanks to my colleague and buddy Paul Ryan for this tip.

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. 



4) The Managers and DirectReports are fetched by registering a mapping of the UserProfileService class in the current ServiceScope



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:

Unknown said...

Brilliant post.. Where can we get more info about the Servicescope..

Vardhaman Deshpande said...

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

Rehan said...

Very nice post! Thank you for sharing.

Unknown said...

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

Vardhaman Deshpande said...

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

Unknown said...

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

Krithikha said...

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