Monday, 7 November 2016

Introducing: SharePoint Online Public CDN Manager

The Office 365 Public CDN Developer Preview was recently announced which allows static assets like images, JavaScript, CSS etc. to be hosted in a globally available CDN. Find out more about it here.

With the Office 365 Public CDN Developer Preview, the Office 365 PowerShell and SharePoint Online CSOM were also updated with APIs which could be used to manage the Public CDN.

Although the APIs were handy, what was missing was a nice and simple GUI to manage the CDN settings. So I set out to create an app which would give a nice overview of all the CDN settings including folders in the tenant which have been configured as Origins, filetypes which have been set to be pushed to the CDN and finally a way to enable/disable the CDN.

Introducing the SharePoint Online Public CDN Manager:


Check it out now: https://spocdnmanager.azurewebsites.net/




Checkout the code on GitHub: https://github.com/vman/SPO-CDN-Manager


As you can tell, the SharePoint Online Public CDN Manager can be used to:

1) Add/Remove CDN Origins i.e. SPO Libraries which will be used to store static assets.

2) Add/Remove Filetypes. Which files will be pushed to the CDN.

3) Enable/Disable the CDN on a tenant.

The Implementation:


1) It is an MVC app which is Multi Tenant and hosted on the Azure App Service. It uses the October 2016 Release of SharePoint Online CSOM to talk to SharePoint.
https://dev.office.com/blogs/new-sharepoint-csom-version-released-for-Office-365-october-2016

2) For the UI, the Office UI Fabric core styles are used together with the Office UI Fabric JS Components



3) The app requires Full Control permissions on all site collections. This is because the CDN is a tenant wide setting and can be modified only by Tenant Administrators or SharePoint Administrators.



The app uses User + App authentication for every call to SharePoint so that only Tenant/SharePoint Administrators can access the CDN Properties:

So even if a user who is not an Admin lands on the page, they are not able to fiddle with the CDN settings.

Tenant vs Office365Tenant


Something interesting I came across while working on this. There are 2 classes available in CSOM now to manipulate tenant settings:

Microsoft.Online.SharePoint.TenantManagement.Office365Tenant

Microsoft.Online.SharePoint.TenantAdministration.Tenant

Both these classes have the Public CDN properties which can be used to manage the CDN. But the interesting this is that the Tenant class requires the Tenant Administration Url (https://yourtenant-admin.sharepoint.com) to instantiate but the Office365Tenant class can be instantiated by a regular site url in SharePoint Online. (https://yourtenant.sharepoint.com/sites/publishing)

If a regular SharePoint site url is used to instantiate the Tenant class, you get an exception saying:

Current site is not a tenant administration site.

This is why I have used the Office365Tenant class. Checkout the code on GitHub for more details.

Workaround for Internet Explorer "Quirks":


The SPO CDN Manager has been tested on latest version of Chrome, Edge and IE. It works without any issues on Chrome and Edge.

But, to get it working on IE, you will have to add the remote site https://spocdnmanager.azurewebsites.net to IE's trusted sites.

Thanks for reading! Hope you find the SPO CDN Manager useful.

Thursday, 20 October 2016

Working with the CSOM External Sharing API in SharePoint Online

I was recently working on a SharePoint Online project where we had quite a heavy use of the External Sharing CSOM API.

Here are some utility functions I have put together which might be useful in the future.

I have used the SharePoint Online CSOM version 16.1.5626.1200 for this:
https://www.nuget.org/packages/Microsoft.SharePointOnline.CSOM/16.1.5626.1200/

Also, there are some really nice samples in SharePoint Patterns and Practices (PnP) around External Sharing

1) Site Collection External Sharing

2) External Sharing Expiration Service

In my case however, I have used the native CSOM API methods for creating the utility functions.

1) Get Externally Shared Documents


This method uses search to get all documents which are externally shared. You can modify the search query to filter by site, site collection, document library etc.



2) Get external users for a document


This method uses the native CSOM API to get all the users with whom a particular document is shared.


3) Get all external users in a Site Collection:



4) Get all external users in a Tenant:


Hope this helps!

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.