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!

Thursday, 1 September 2016

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


Thanks for reading!

Wednesday, 31 August 2016

Batch REST requests in SharePoint Framework (SPFx) using ODataBatch

This is one of my favorite things in the SharePoint Framework right now. The ability to easily batch REST API calls and send them to SharePoint in a single request.

There is a new class called ODataBatch which is used to combine multiple REST requests. You can find more about this in the API docs:
https://sharepoint.github.io/classes/_sp_client_base_.odatabatch.html


As shown in the docs, the ODataBatch class has 2 primary methods: execute and fetch. The fetch method is used to queue all the different requests and execute is used to execute them all at once.

The get and post methods are syntactical sugar to call fetch but with the method parameter set to GET or POST.

The amazing thing about the fetch method is that it returns a Promise object which correlates to the API call being made. This way, when the Promise gets resolved/rejected after the execute method, we can easily track the response. This is better explained in the code below :)

So let's have a look at how we can utilize the ODataBatch class in an SPFx webpart:

First, we will need to import all the necessary modules:

And here is the actual code:



When this code is executed, we can see that a single batch request is sent to SharePoint containing the information about the requests in the Payload:

(click to zoom)



And when the Response is returned, we can hook into each individual Promise object to get its value:

(click to zoom)


Isn't this Awesome? It is going to save a lot of round trips to the server and also help in performance optimization.

Thanks for reading!

Saturday, 27 August 2016

SharePoint Framework: Validating properties in the Web part property pane

Yup, you read it right. Validations can be added to the properties in the web part property pane of an SPFx webpart. The validation function can be Synchronous as well as Asynchronous. 

This means that we can immediately determine whether a property is valid or we can make an HTTP request (e.g. to SharePoint) and then determine if a property is valid depending on the response.

In the following code, I have added a validation to the title property to make sure that it is not the same as the SharePoint site title. Also, I have added a validation to the description property making sure that it is not less than 10 characters. 


The code is pretty straightforward. This code should be placed inside your Web part class:

As you can see from the code, the _validateTitleAsync function fires when the title property is edited. It makes a GET request to SharePoint to get the title of the web:



The code for this post is located here: https://github.com/vman/SPFx-Web-part-property-validator

The complete Web part class with the property pane editor is here:
https://github.com/vman/SPFx-Web-part-property-validator/blob/master/src/webparts/propValidator/PropValidatorWebPart.ts

While working on this post, I have discovered two possible issues with the way property pane validations currently work in the SharePoint Framework. I have posted them here if you are interested:

1) Rename IPropertyPaneTextFieldProps.onGetErrorMessage to IPropertyPaneTextFieldProps.GetValidationMessage

2) When property pane is in Non-Reactive mode, the validation function should only fire when clicked on "Apply"


Thanks for reading!

Monday, 22 August 2016

Making a POST request to SharePoint from an SPFx webpart

Following up on my previous post First SPFx webpart: Get/Set a single value userprofile property in SharePoint, in this post I have separately documented how to make an HTTP POST request from your SPFx webpart. There are lots of posts out already which show you how to make a GET request so I will not cover that here. It is fairly straightforward once you understand all the moving parts.

Some notes around this:

1) The SharePoint Framework (SPFx) is in Developer Preview now so any/all the content of this post is subject to change (although I hope it doesn't)

2) SPFx webparts are not meant for production use at this time.

3) In this sample, I am making a HTTP POST request to SharePoint to create a list.

4) There is a feature/bug in SPFx right now where it adds the odata-version:4 header to every request that does not have the odata header declared. This causes calls to the SharePoint REST API to return malformed responses as it only supports Odata V3 at this time.

So the workaround right now is to explicitly add the odata-version:3 header to every request as shown in the following code.

5) All the code I have shown here is in TypeScript version 1.8.9 as currently dictated by the SharePoint Framework.

Without much further ado, here is the code:

Declare an interface which will be used in the code. This will need to be outside your webpart class.

Now, the code which makes a POST request to create a list:

And my "Developer workbench" list is created:



Hope this helps.

Sunday, 21 August 2016

First SPFx webpart: Get/Set a single value userprofile property in SharePoint

So the Developer preview of the SharePoint Framework was released last week and I decided to get my hands dirty right away. This is a webpart I created just to get a hang of things and to learn the key concepts of the SharePoint Framework.

The code is on GitHub: https://github.com/vman/Edit-User-Properties



Since I had not worked with React a lot, I decided to choose it as my JS framework.

Things I managed to wrap my head around while creating this simple webpart:

1) How to create a SPFx webpart with React as the JS framework.

2) How to talk to SharePoint from within the SPFx webpart with context.httpClient.get and context.httpClient.post

4) Creating reactive as well as non reactive webpart properties

5) The new _spClientSidePageContext object which contains heaps of context data. According to the wiki, properties of this object will be deprecated and moved under the Context object of the webpart.
https://github.com/SharePoint/sp-dev-docs/wiki/Drop-1

(For now, I had to manually create an ambient declaration for this object but hopefully soon, the need for this will go away as it will be moved in the Context object)

6) Office UI Fabric and React Components for Office UI fabric


Since lots of these things were new to me, you might find some bugs/mistakes/horrors in the code so apologies for that in advance. Don't forget to leave a comment and I will be happy to update my code.

Thanks!

Sunday, 14 August 2016

Upload changed display templates to SharePoint using Gulp

Here is a quick tip which might be helpful when working with display templates. A typical SharePoint solution can have a large number of display templates but while working with them, you might me modifying/customizing only one at a time. Here is a quick gulp task I have put together which watches for changes in the HTML file of the display template and uploads only the changed display templates to the Master Page gallery.

Then I just start the watch task and change/save a display template:



Whenever I save an HTML file of my display template, it gets uploaded and checked-in in the Master Page Gallery. That causes a corresponding JS file to get generated automatically so I don't have to worry about managing it. 



If you are maintaining your Display Template JS files in source control, you will have to remember to copy the generated JS file back into your solution. 

Hope this helps you speed up your Display Template development. I have uploaded this project on GitHub here: https://github.com/vman/Gulp.DisplayTemplates

Thanks for reading!