Wednesday, October 17, 2018

Using pnpjs v1.2+ with Internet Explorer 11

man and woman lit the two lighters they are holding

When pnpjs v1.2 was released the PnP team made a wise decision to remove support for IE11. The decision to drop support for IE11 means some of the functions will fail if you use pnpjs in for example a SharePoint Framework component, and the user is using Internet Explorer 11.

The direction is wise in my opinion because IE11 is 5(!) years old, and from a programmers perspective it lacks features you would expect on a modern browser. As an example, how old is your phone? Most likely the browser on your phone is a lot better than IE11. In this day and age 5 years is an eternity.

The issue comes down to several points:

  • Older windows versions have IE11 as the default browser
  • Your IT department might not want to support a 3rd party browser
  • If you are running Windows 10 (now 3 years old), IT might have kept IE11 as the default browser because it’s there
  • You have some legacy plugins or LOB application only working with IE11

All of these might be valid points, but if you have clout, push IT to rid themselves of IE11, and switch it out with Edge, Chrome, Firefox or some other browser.

Unfortunately, reality is that companies will continue to use IE11 as long as it’s shipped with Windows, so come on Microsoft – kill it already!

So how do you backwards proof your application if you are using pnpjs and IE11 is a requirement? Take a look at the updated official documentation https://pnp.github.io/pnpjs/documentation/polyfill/.

Previously you would have to add manual polyfills as mentioned in this github issue, but this is now made easier.

Add a reference to @pnp/polyfill-ie11 with install --save @pnp/polyfill-ie11, and anywhere in your code where you import pnpjs, add

import "@pnp/polyfill-ie11";

If using SearchQueryBuilder, then you need and additional import statement – but read the docs and you’ll be fine.

Photo by Element5 Digital at Unsplash.

Thursday, September 27, 2018

Workaround for removing a deep folder structure in SharePoint

Deep water signage

I had a client which were not able to delete a deep folder structure from SharePoint which I’m guessing was synced in via OneDrive.

The error they got when trying to delete anything in the structure was “Error Code: 6404” – not a very descriptive error.

image

I tried all sorts of API’s, but having worked with SharePoint and Windows for a while I figured this had to do with a total path being too long, and I was correct.

In the end I renamed every single folder to “a”, just one character, and then the total path length was short enough for SharePoint Online, and the structure deleted nicely.

Photo by Rosie Kerr on Unsplash

Example of wrapper to ease usage of Graph calls in SPFx

silhouette of trees and purple lightning

Waldek Mastykarz wrote a good post about not passing the web part context all around your React components, which is good advice. And as Waldek pointed out after reviewing my code I pass the full context and not just the GraphClient. So ideally, passing just what you need is better, but I’m lazy at times :) And it gives you the reader an opportunity to improve my code :)

I tend to create static helper classes, and here’s one approach to ease calling Graph API’s throughout your solution.

The wrapper class is quite simple, and I’ve created helper methods for GET, POST, PATCH, DELETE.

To use this you would first initialize the class in your main web part code.

public async render(): Promise<void> {
   await MSGraph.Init(this.context);
   ...
}

and somewhere in your code if you wanted to get Group data for a group you could use something like this:

import { MSGraph } from '../services/MSGraph';

...

let groupId = this.props.context.pageContext.legacyPageContext.groupId;
let graphUrl = `/groups/${groupId}`;
let group = await MSGraph.Get(graphUrl);

Photo by Jeremy Thomas at Unsplash

Monday, September 10, 2018

An approach to search for a URL within a page or document in SharePoint

image

The Search Explained Yammer network is a great place to ask the weird and quirky search questions. Unfortunately it’s not indexed by Google, so answers there will not benefit everyone – which is why I’m writing this post.

A couple of days ago someone posted a question if it was possible to find pages in SharePoint which contain a specific link. The need was to identify broken links. Use-case can be if you rename a file, and want to find all pages linking to that file before renaming – to make sure they still point correctly.

This post will show you one approach which works, and if you have a better suggestion, please let me know.

Question is; how can you go about finding a page with the link https://contoso.sharepoint.com/sites/collection/site/library/document.docx as part of the content?

Monday, September 3, 2018

Puzzlepart presents the modern flexible Divider web part

Did you ever think the Divider web part for modern pages was too restrictive? Maybe you wanted to cross that divide with a wider one, maybe you wanted to separate with colors? Don’t worry – now you can!

The sharing minds of Puzzlepart hereby introduce the flexible divider web part which allows you to set both the width and the color!

preview

Get the web part code from the link below, or contact us if you want assistance on a pre-compiled tenant wide distributed web part.

https://github.com/Puzzlepart/spfx-solutions/tree/master/Pzl.Part.Divider

Thursday, August 30, 2018

Issue when executing PowerShell scripts with characters outside of A-Z

I have a PowerShell script in which I pass a parameter to command containing the Norwegian character ø, where the command sets a value on a web page.

When checking the result, it looks like this:

Hvem gjør hva

Clearly an encoding issue. My .ps1 file was saved in UTF-8, and to make it work I changed it to UTF-8 with BOM (byte order mark). This way PowerShell can correctly detect the script as being in UTF-8 and encode the characters correct. To change encoding use for example VSCode or Notepad++.

Summary

If you have characters outside of a-z in your scripts, be sure to save them as UTF-8 with BOM to avoid any encoding issues.

Cover photo by Krisitan Strand at Unsplash

Tuesday, August 28, 2018

Gotcha when adding Office UI Fabric React to SPFx

When installing a reference to Office UI Fabric React make sure to run

npm i office-ui-fabric-react@lts --save

and not

npm i office-ui-fabric-react@latest --save

Lts is the latest stable version, which currently is v5.122.1 and in this case compatible with React 15 which is what SPFx uses. The latest version is 6.57.0 which require React 16, and won’t build with SPFx.

Stable photo by Ryan Yeaman at Unsplash

Monday, August 27, 2018

Modifying terms using app-only tokens in SharePoint – undocumented work-around


Photo by Alekzan Powell at Unsplash

In a rage of fits yesterday where I was running a PowerShell script against SharePoint Online with an account using multi factor authentication – which just don’t work reliably due to the use of login via web browser I decided to use app-only authentication instead.

I used the following permission manifest which should ensure god rights, right?

<AppPermissionRequests AllowAppOnlyPolicy="true" >
  <AppPermissionRequest Scope="http://sharepoint/content/tenant" Right="FullControl" />
  <AppPermissionRequest Scope="http://sharepoint/taxonomy" Right="Write" />
</AppPermissionRequests>

But since I’m dealing with modifications to terms in this script, that quickly broke down. More rage, more fits!

Reading https://msdn.microsoft.com/en-us/library/office/mt210897.aspx?f=255&MSPPError=-2147217396#sectionSection0 states:

You can't use the app-only policy with the following APIs:

  • User Profile

  • Search

  • Taxonomy (this only applies to scenarios that write to the managed metadata service)

Wednesday, August 22, 2018

An even better bundle optimization method for SPFx using webpack dynamic imports


Photo by Rose Elena at Unsplash

In my last post I ventured into how you dynamically can load script resources in your SPFx web part or extension. Typically you might have parts only needed in edit mode, or parts only used in certain view scenarios. By not including everything in the SPFx bundle you will reduce loading time and page bootstrapping of your solution.

For example, if you use a lot of Office UI Fabric components or an external library like moment, then your overall bundle size, or downloaded .js file increase a lot. If those components are not always needed, loading them dynamically at will is a better solution.

And, it’s so easy! SPFx uses web pack to create the bundle, and webpack allows for something called dynamic imports. And this is such a golden nugget – sitting there without anyone knowing :)

Tuesday, August 21, 2018

An adventure into optimizing SharePoint Framework runtime bundle sizes

image

(See https://www.techmikael.com/2018/08/an-even-better-bundle-optimization.html for an even better solution)

When I wrote the Modern Script Editor web part I went with using Office UI Fabric React (ouifr) for the editor UI. The web part bundle yields a zipped script file of 84KB when used on a page. Not that much really, and it will be cached in the browser. But most of the bundle size is due to the use of ouifr in the edit experience of the web part – not needed in view mode for a page.

Thus I’ve had a nagging feeling working on my mind for a while, and it occurred to me; why can’t I have the editor experience separate from the run-time experience?

And you can!! which I will explain how further in this post.

The result is that the updated web part now will download 4KB zipped on run-time instead of 84KB. A whopping 95% decrease. The editor experience will be another 141KB, which is more in total than before, but this only happens when you edit the page and web part – certainly a good trade off.