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:

	@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";

view raw orgchart.module.scss hosted with ❤ by GitHub

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. 

	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
	}

view raw orgchartup.ts hosted with ❤ by GitHub

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

	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 });
	});
	});

view raw orchartss.ts hosted with ❤ by GitHub

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!

Get all Suspended or Terminated Workflow instances in SharePoint Online

Here is some quick code I put together today to get all Suspended workflow instances on a list in SharePoint Online.

This code can be used to get all instances for a given status. (Suspended, Terminated etc.)

I have used the SharePoint Online CSOM August 2016 Update for this code:
http://dev.office.com/blogs/new-sharepoint-csom-version-released-for-Office-365-august-2016-updated

	using Microsoft.SharePoint.Client;
	using Microsoft.SharePoint.Client.WorkflowServices;
	using System;
	using System.Linq;
	using System.Security;
	namespace WFExplorer
	{
	class Program
	{
	static void Main(string[] args)
	{
	string siteUrl = "https://tenant.sharepoint.com/sites/intranet";
	string userName = "admin@tenant.onmicrosoft.com";
	string password = "adminpassword";
	string listTitle = "MyList";
	string workflowName = "MyWorkflow";
	var workflowStatus = WorkflowStatus.Suspended; // WorkflowStatus.Terminated or any value from the WorkflowStatus enumeration.
	var clientContext = GetClientContext(siteUrl, userName, password);
	Web web = clientContext.Web;
	Guid listGUID= GetListGUID(clientContext, listTitle);
	//Get the workflow subscription (workflow definition)
	var wfServicesManager = new WorkflowServicesManager(clientContext, web);
	var wfSubscriptionService = wfServicesManager.GetWorkflowSubscriptionService();
	var wfSubscriptions = wfSubscriptionService.EnumerateSubscriptionsByList(listGUID);
	clientContext.Load(wfSubscriptions, wfSubs => wfSubs.Where(wfSub => wfSub.Name == workflowName));
	clientContext.ExecuteQuery();
	var wfSubscription = wfSubscriptions.First();
	//Get the workflow instances
	var wfInstanceService = wfServicesManager.GetWorkflowInstanceService();
	var wfInstanceCollection = wfInstanceService.Enumerate(wfSubscription);
	clientContext.Load(wfInstanceCollection, wfInstances => wfInstances.Where(wfI => wfI.Status == workflowStatus));
	clientContext.ExecuteQuery();
	//List all instances with the selected status.
	foreach (var wfInstance in wfInstanceCollection)
	{
	Console.WriteLine(wfInstance.Properties["Microsoft.SharePoint.ActivationProperties.CurrentItemUrl"]);
	}
	Console.ReadKey();
	}
	private static ClientContext GetClientContext(string siteUrl, string userName, string password)
	{
	ClientContext clientContext = new ClientContext(siteUrl);
	var securePassword = new SecureString();
	foreach (char c in password.ToCharArray()) securePassword.AppendChar(c);
	clientContext.Credentials = new SharePointOnlineCredentials(userName, securePassword);
	return clientContext;
	}
	private static Guid GetListGUID(ClientContext context, string listTitle)
	{
	var list = context.Web.Lists.GetByTitle(listTitle);
	context.Load(list, l => l.Id);
	context.ExecuteQuery();
	return list.Id;
	}
	}
	}

view raw WFInstances.cs hosted with ❤ by GitHub

Thanks for reading!