APIs all day long

We at the Puzzler Brigade love us some APIs. We have used 3 to enrich our solution.

First we are using the Marvel API to get superhero images and information about each super hero on our Hero Dashboard.

Screen Shot 2016-02-27 at 2.34.31 PM

Next we are using the Flickr API to get images of the cities our operations are taking place in. We are using longitude and latitude to search for images in the area of the operations (Latitude, Longitude is attached to each Operation Room). We then append “Skyline” to get better results.

Screen Shot 2016-02-27 at 2.34.19 PM

We are also using Chart Holdr for getting mockup dummy stats.

Screen Shot 2016-02-27 at 3.03.04 PM

We are going for the Stairway to Heaven badge!





Puzzler Brigade ASPC2016 Final Submission

Our Danger Room situational awareness Office 365 solution is something that any Superhero would want to have in their utility belt. It allows “Task Masters” back home to monitor and keep our Superheroes up to date with what is happening around them.

Check our what we can offer you for only $499 a month per Hero!

The awesome code of the red berets of the PzlBrigade

The Red Berets of the PzlBrigade take their craft seriously. We’re passionate about rapid development using the right tools the right way. Our code base is solid enough that we believe we are a solid candidate for the Awesome Code award

Award: Awesome code

For the record, we have tried to analyze our code with SPCAF, but to our knowledge the tool only evaluates wsp’s, dll’s, exe’s and other code packages. We’re simply to hipster for SPCAF at the moment, since we have no solution file, no wsp or similar. The report looks like this:



We use GitHub for our public code repository, and we’re past 300 commits (if you include merges) from 5 members in these 3 days.


Our repository is well documented with a Readme.md file, explaining what the solution does, how to get started, dependencies, installation guide etc.


The operation room template is based on js-sites-core, which is a JavaScript framework for creating subsites. The benefit of using this framework is that we follow the recommendations from Microsoft about not using web templates and sandboxed solutions, while still allowing customized site templates. The template file itself is a json file following the same structure as the Office PnP Provisioning Schema. An example snippet of such a file looks like this:


The way this works is that we create a blank team site, stamps the property bag and adds a custom action to the site. When the user visits the page for the first time, the engine runs and notices that it’s an unconfigured site. It grabs the specified template from the root and loops through it, creating lists, adds custom actions, uploads files etc.

The result is a nicely configured team site, ready for any new awesomeness Microsoft will roll out to all team sites! (opposed to a webtemplate, sitetemplate or site definition).

The frontpage is using angular, written in TypeScript with controllers and services. We have a pretty nice separation between view (DangerRoom.aspx), controllers and services. See our typescript structure here:


All in all, we welcome you to check out or code base at GitHub, and feel free to steal ideas and code!

Make file uploading in the UI great again!

Uploading files in SharePoint is pretty neat, drag ‘n’ drop and all.
The only downside is the super annoying “A file with the same name already exists” nag message.

We’ve circumvented that using a nifty little custom action which makes uploading files in the UI great again.

The script block runs on DOM ready, looks for the “overwrite the file”-button every second and CLICKS it, so you don’t have to.

A nasty hack to achieve awesomeness.





The Office Lut just got an upgrade


Since there are more than 7000 characters in the Marvel universe, doing HR at the Danger Room can be quite overwhelming at times.

To make the job easier, the Danger Room has gotten an upgrade in the form of an Office Add-in, which takes you to the Hero Dashboard.

If you forgot that Spider-man is actually Peter Parker, the Hero Dashboard will get you up to speed in no time!

The add-in project was created with yeoman (yo offfice … ) as a Mail reader pane add-in. It has been modified to work with office 365 by adding ADAL.js and adal node components to get the authentication tokens from azure ad.

We’re targeting the Office Lut badge with this delivery



Effects out of this world to boost the egos of the heroes

This post is targeting the High Five badge

High Five

The heroes have pretty high egos, and that’s something we really like. We want their egoes to be maximized all the time, and one of many ways we try to do that is to boost their Hero profile page. When they see their other heroes with the boosted background they feel they can trust them and lean on them for help. (Editors note: I’m not proud of this backstory).

We use the HTML 5 video tag to achieve this. The end result is pretty neat:


Communicating with the heroes via Twitter (‘Low Key Transparency’)

We are gunning for the workflow badge with this delivery

Go with the flow

The heroes are scattered all over the world, and they don’t always have their computers and devices with them (or they have been destroyed in combat). They also forget their passwords and even login info from time to time (they have a lot on their mind).

It would be great if they could keep themselves up to date without having access to the Danger Room. We have create the Create Hashtag and Post to Twitter workflow to mitigate this. When a new Operation Room has been created, a workflow grabs the name of the Operations and through complex processing figures out what the hashtag for the operation is. The hashtag is important, because it allows the heroes to collaborate and schedule operations on twitter using the hashtag.

Link to tweet since the integration here isn’t working too well.

Deadpool is a special kind of guy, and he prefers to work alone. When Deadpool creates an operation, a tweet is created about the operation, but other heroes are asked to, well, fuck off.

Link to tweet.

This amazing workflow is backed by Nintex

Data Mining Marvel characters to add to Office 365

We are aiming at the data mining badge for this delivery

Data Miner

To save time, money and energy, we have come up with a way to grab the characters from the Marvel developer api and import them as users in SharePoint. Can be a nice solution to have when an organization is moving to O365 from a mumbo jumbo user platform.

We have done the following

  1. Created a node.js app that communicates with the Marvel API and gets the data of all characters
  2. Converts the data to csv files in batches of 250 users, on the Office 365 bulk import users format
  3. Importing the characters into O365 based on these files


The characters are now first class citizens of our Office 365 tenant! Yay