React and office-ui-fabric-react example

npm install -g create-react-app
create-react-app documentcardbasic-demo
cd documentcardbasic-demo
npm start
npm install office-ui-fabric-react --save


Open the documentcardbasic-demo project folder in Visual Studio Code.

Open the file src\App.js and replace the existing code inside render method to only return the DocumentCard component:

  <DocumentCard onClickHref=''>
        previewImages={ [
            previewImageSrc: require('./documentpreview.png'),
            iconSrc: require('./iconppt.png'),
            width: 318,
            height: 196,
            accentColor: '#ce4b1f'
        ] }
      <DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx'/>
        activity='Created Feb 23, 2016'
            { name: 'Kat Larrson', profileImageSrc: require('./avatarkat.png') }


import {
} from 'office-ui-fabric-react/lib/DocumentCard';




Provider hosted app and ADFS modifications (SharePointContext.cs and TokenHelper.cs)

When you created an provider hosted app with ADFS authentication you need to modify the OOTB files ‘SharePointContext.cs’ and ‘TokenHelper.cs’. These 2 files are needed to get the authentication token for the app. But these files are not compatible with ADFS (SharePointHighTrustSamlContext). They are only compatible for Azure Access Control Services (ACS/Office 365) and Windows authentication (SharePointHighTrustContext). When you use this example of the files you are missing the Session logic. When you implement the Session logic you can get after 10 minutes a 401 error unauthorized error. You can fix this as follow:

The outer token lifetime (10 minutes) needs to be higher than the HighTrustAccessTokenLifetime (12 hours).


Office dev pnp features

Connect/Disconnect to sitecollection (ADFS)

TemplateProvisioning (Powershell)

TemplateProvisioning (Powershell) parameters

TemplateProvisioning (Js) (ProviderConnector)

TemplateProvisioning (Js) parameters

TemplateProvisioning explicit handlers

Add new publising page (disable VS publish precompile)

Add webparts to publising page

New welcomepage

Create new subsite


Open new context of another website

Tokens (listid, etc)

Custom pagelayout





App permissions/manifest (Taxonomy, Sitecollection)


Cannot drag and drop document in SharePoint list view webpart

If you add a list view webpart to a page and it is not possible to drag and drop documents, probably there are 2 js files not loaded.

Load these 2 js files in a CEWP or JSLINK:


SP.SOD.executeFunc(‘sp.js’,’SP.Utilities.Utility’, function() {


SP.SOD.executeFunc(‘sp.core.js’,’SP.Utilities.CommandBlock’, function() {




This issue occurs only on a list view webpart on a page. When you go directly to the document library it is working fine without this change.

Create subsite by Office Dev PnP CSOM

// Create new subsite
Web newWeb = web.CreateWeb(new OfficeDevPnP.Core.Entities.SiteEntity()
Title = “test”,
Url = “test”,
Description = “test”,
Template = “BLANKINTERNET#0”,
Lcid = 1043
}, true, true);

Office Dev PnP TemplateProvisioning

protected virtual void ApplyTemplate(ClientContext context)
// Read the XML file
XMLTemplateProvider provider = new XMLFileSystemTemplateProvider(String.Format(@”{0}\Templates\”, AppDomain.CurrentDomain.BaseDirectory), “”);

if (provider != null)
// Get the template
var template = provider.GetTemplate(“myCustomTemplate.xml”);
if (template != null)
template.Connector = provider.Connector;

ClientContext clientContext = context.Clone(Subsite.Url);

using (clientContext)

Enable structural navigation in CSOM

protected void EnableStructuralNavigation(Web web, ClientContext context)
// enable structural navigation for the quick launch navigation
AreaNavigationEntity nav = new AreaNavigationEntity();
nav.CurrentNavigation.ShowSubsites = false;
nav.CurrentNavigation.ShowPages = false;

Get property by CSOM

Use this :

ClientContext.Web.EnsureProperty(w => w.Url);

Instead of :

ClientContext.Load(ClientContext.Web, w => w.Url);

Error: Cannot add the specified assembly to the global assembly cache: [assemblyname.dll]

When you try to deploy and got the error “Cannot add the specified assembly to the global assembly cache: [assemblyname.dll]”, it looks like some process is lock your dll in the GAC. You need to kill that process. You can use the free Microsoft tool “Process Explorer”. Search your dll in this tool and kill the process. When you see the process “Microsoft.Alm.Shared.Remoting.RemoteContainer.dll” it is the Visual Studio Code Lens. You can turn it off as follow:

Tools -> Options -> Text Editor -> All Languages -> CodeLens

Templates, designs