Using Widget Wrangler with PnP for IE

I am creating client-side webparts using the Widget Wrangler for SharePoint. The webparts all use PnP JS. This site needs to work in IE 10+. The webparts work great in Chrome and most other browsers. However, when i run it in IE I get an error about Undefined Headers. This is because PnP uses Promises which IE 10 and 11 don’t support. To fix that I had to include some polyfills and perform a sacrifice to the SharePoint gods.

  1. In the ww-appScripts property I needed to add the following references

So the tag ends up looking like this

{“src”: “”, “priority”:0},
{“src”: “”, “priority”: 1},
{“src”: “”, “priority”: 2},
{“src”: “”, “priority”: 2},
{“src”: “”, “priority”: 3},
{“src”: “”, “priority”: 4},
{“src”: “”, “priority”: 5},
{“src”: “~/bundle.js”, “priority”:6}

Important thing to note that the priority Fetch and ES6-Promise need to come before PnP.

Also in your PnP setup make sure to include

headers: {
“Accept”: “application/json; odata=verbose”

Managing Office 365 Identities Made Easy

A friend of a friend of a friend told about this thing that totally changed their life. It wasn’t exactly that convoluted but I was complaining to a friend the other day about constantly having to switch credentials for my office 365 tenants. He suggested a nifty trick that a friend of ours Beatrice Baciu wrote about. He showed me how to use Chrome Personas to manage my different office 365 accounts.

If you are like me you have many different office 365 accounts. I have two to access my company information like my intranet and staffing tool. I have two different developer tenants and a few client tenants that I need to keep track of. Chrome has the ability to create different personas. When I actually tried this it changed the way I manage my accounts. I did a little happy dance.

  • Open Chrome
  • In the top right corner you will see either Guest of your name if you are signed in using your google account. Click that and it will bring down a drop down.
  • The top name is the persona that you are currently signed in as, the bottom list are the personas that you can choose from.
  • Click Manage People
    Screen Shot 2017-02-08 at 2.32.37 PM.png
  • Click Add Person
  • Enter a name for the persona, select an avatar, and click save. This adds a new persona to chrome and will open a new Chrome instance for that persona.
  • Look in the top right. The persona is now changed to my new persona. I can now log into my dev tenant.
  • When you log in to your Office 365 account make sure you check the keep me signed in check box so your authentication persists.
  • I can then open a new Chrome window, switch to a different persona and have two windows open at the same time with different office 365 accounts!!!

I hope this is helpful to someone other than me. I mentioned this to several of the folks that work with me and they couldn’t believe they hadn’t heard about this before so I figured I would get it out there in an effort to make others lives a little better. 🙂


Enjoy! – d


Provisioning files in a feature in the root directory

I was recently tasked with migrating code that was written for 2007  in a feature. The files that were originally provisioned in the feature we deployed to the root folder of the feature. The code had already been upgraded to SharePoint 2010. I needed to create a wsp using Visual Studio 2010 and package it as a feature. Out of the box when you create a new Module in VS 2010 you get a subfolder so for example you create the feature called Feature1 and a module called Mod1. The default deployment path is 14\templates\features\feature1\mod1\file.txt. What I needed was feature1\mod1\file.txt. I tried modifying all the attributes in the elements.xml file and was not able to get the files to the correct location.


In the end what i did was the following

  1. Add the file to the module in visual studio
  2. Look at the properties of the file in visual studio
  3. Under Deployment Location expand the + and clear the Path value.
  4. Ensure that the Deployment Type is Element File
  5. Deploy the file and it should be in the correct location.