Tuesday, 13 September 2016

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

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!


Arnab Chatterjee 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.

Santosh Kumar 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/vman/sp-dev-fx-webparts/tree/orgchart/samples/react-organisationchart