Puzzlepart Appsters final delivery

After the Deathstar was blown up along with all of our on-premises servers, the galactic empire has risen again, now using Office 365. We are proud to present the final delivery from Puzzlepart:

The Galactic Empire priority task number 1 is killing rebels. To do this in an efficient way, they need all the help of tooling in Office 365 they can get. The solution built during the challenge consists of the following modules

We’re using the Puzzlepart Appsters toolstack to deliver all you rebel extermination tools.

Useful Office 365 App

This month a new feature was rolled out to Office 365 – the ability to create file preview handlers for non-handled file formats in SharePoint Online. The empire likes to save on space and uses 7zip for most files. Being able to quickly see what’s in a compressed file helps locating the right file.

The API is still in preview and is descripted in detail at https://msdn.microsoft.com/en-us/office/office365/howto/using-cross-suite-apps.

Basically what it involves is registering an app in Azure AD


Then you register the handler using REST and CSOM against the https://aspc1506.sharepoint.com/_api/apps/ endpoint.



OfficeLut, but we have it… but it’s a cool solution so figured we’d add it Smile Certainly has some business value as users don’t have to open all custom files or even have the client installed in order to preview the file. You can be on the road and get much more information on your files.

Access incident system to track incidents with equipments

Dex Fett from HR is worried about incidents with equipment in the Empire. Since the budget this year is low because of the falling starfuel prices (a lot of the empire’s economy is based on underground sales of starfuel to rebel groups not considered threats to the emire), Dex Fett needs to create his own system.

Fortunately Dex Fett is a racer at Access, and he’s created his own Access incident system where it’s possible to log incidents to equipments, and also see an overview of number of fatalities related to incident types.

We believe this qualifies for the Access badge

Head 2 head–Custom IDP

Since we’re fresh at this we tried to give it a shot.

What seems to be the steps:

So this is not easy… even trying to follow guides, so we have to call support.

How got there…..

We looked at the docs (https://technet.microsoft.com/en-us/library/jj679342.aspx) which lists a bunch of 3rd party supported providers which we have never heard of Smile. Couldn’t really find a guide/tutorial to get started. But… we went to Azure AD for the demo tenant, where we tried to add a custom domain and directory integration.


Seemed we need some DirSync etc… which stopped me cold. Next we figured we’d set up an ACS with e.g. Live/Google providers and was able to add our Azure AD as relying third party app.


What remains is how these pieces fit together… and as there is no good tutorials

There is a post on this at http://blogs.architectingconnectedsystems.com/blogs/cjg/archive/2014/06/12/O365-and-Non_2D00_ADFS-Federation.aspx which provides some pieces to point to a custom auth domain… but we have no on-prem system with a custom provider…not even ADFS, so hard to get this running.

Following the advice from the post writer (Mr Chris), we would call someone and hire the expertise doing this as it’s far outside our comfort zone. We’re all about trying out tutorials, but creating IT Pro tutorials is something we rather do with a bottle or two of whiskey Smile

We also looked at OneLogin which is a supported 3rd party, and they do provide guidance to set up their solution:


So if we had had an external domain we would have run those commands to see what happened. So two routes….

Delve the dash

Dex Tarkin, the Head of Security, and Dex Fett from HR have long know that the most active assets and productive individuals may become targets of Rebel Scum infiltrators. They need this info at their fingertips to be able to quickly act on any new assets or employees needing protection.

As the head of HR Dex Tarkin also likes to know who his MVPs are and give them an extra nod every now and then. The way he wants to do this is see KPI stats for the most active users.

So when Tarkin and Fett approached the IT department asking them to build a joint operation dashboard to support their business needs the galactic developers quickly realized search and the office graph was the way go

IT decided to create a easy to read 2×2 grid of graphs and info.


Starting from the top left we have the following widgets with these data sources

Content type distribution REST Search Shows the distribution of content type use around our tenant
Most Active Users KPI Office Graph An aggregate of users who have performed the most changes recently
Most Modified Documents Office Graph The documents with the most modifications (highes edge weight)
Most Viewed Documents REST Search Search sorting items on views


While both the Search and Office Graph data is pulled via the search rest api, the office graph data is a special search where you pass in a GraphQuery to the api.

We believe this may qualify for the Crawler and Delve 2 badge.

This dashboard combined with the visio dashboard created by super users may qualify for dash it out


This dashboard is an angular app, the source for the angular controls for our search driven graphs are here

The source for the Office Graph integration is here

The graphs themselves are powered by google graphs and painted using the latest html 5 technology out of Stamford. We believe this qualifies for html 5

Head 2 head–Stats and trends

Using lists for this challenge proved an unneeded extra step, as getting the data from the API to a list requires non-trivial work. We decided to go the Power User way.

Step 1: Analyze data – All needed data is in Participations and Results

Step 2: Import API data to an Excel Spreadsheet

Step 3: Convert text columns to numbers

Step 4: Link data tables

Step 5: Import excel to SP lib

Step 6: Import Excel into site PowerBI

Step 7: Create report with pivot

Step 8: X-axis is the years, with 3,4,5.

Learned: How to get data into Excel, how to link excel tables with releationships, how to convert multiple columns to numbers, how to pivot in PowerBI.. getting the right columns.

Sample data:


Rebel Wanted Workflow

There is no point in having a Wanted list on your internal SharePoint network. So it was important to get the information out there. What better way than to post it to social media?

We decided to create a workflow that publishes every person we add to our wanted list to both Facebook and Yammer.

Here is a look at it in action:


Going for

Using Nintex workflows, so a Thieving Bastard is in order


And the obvious Go With The Flow


The Appster’s toolstack at #ASPC2015

As we’ve posted about earlier during the conference, we use GitHub for collaborating on our code and files.

We have a Visual Studio solution that builds into a sandboxed solution. We use sherpa (a tool we’ve built ourselves) to deploy our solution to any SharePoint 2013 or O365 tenant. All of our taxonomy, content types and site setup configuration is created with Sherpa, based on JSON configuration files, as seen below.

contenttypejson taxonomyjson

Our solution is then possible to set up with sherpa in a matter of minutes, and no manual steps are required.


We’re using Slack to communicate during the event, and we’ve set up a channel for #aspc2015 where we discuss deliveries. It also has GitHub integration, so we stay up to date on commits more easily.

Slack example

The toolstack makes it possible for us to communicate, distribute tasks, quickly package and deploy latest quite efficiently.

Going for Hipster Badge with this, integrating with cool new tools =)


The Empire Intranet–and thou wilt not write negative articles!

A news intranet is nothing new, and the Empire has one as well. This being the domain of Leia Dexton she hates to write articles, but articles must be produced.

But when you outsource the writing to retired storm troopers, stuff can happen. This is why Leia has embedded a page sentiment analysis system which will per page let you know if you are within bounds. For every page the written text will be analyzed and report back if you should rephrase or not.



As the Empire is using content search to pull in the articles from remote site collections around the empire (the writers are retired, thus working for free from their home planets), it’s important to get the right image renditions on the home page. If not you could risk getting the wrong parts in the CSWP on the front page.


Not vertically centered which is the default, but made sure to get the head in the photo 🙂


Technical description:

CSWP for the front page with a custom query and with a slightly modified display template. Utilizing renditions to get the right image to use in the display template.

Via a custom action we register script on the page which on load will grab all the text on the page and send it over to a service called AlchmeyAPI which does the language and sentiment analysis.

Aiming for:

Catalog King

CSWP with custom query for cross site article aggregation and template + renditions

Data Miner

We’re utilizing an external machine learning service to mine the data for sentiments  – then displays this as an alert on the article page itself.

Client Side Salsa

All sentiment analysis is performed using JavaScript and an async query. It’s written in an encapsulated class, registered as a custom script action. Shows you can do a lot in 50 lines of JavaScript. https://github.com/Puzzlepart/aspc-2015/blob/master/GraphQueryRepo/Appsters.Sentiment.js

Thieving Bastard

Adding to the previous usage of PowerBI, Github, Facebook, StarWars API, bt.tn API, Nintex workflows, and now AlchemyAPI – we are using numerous services out there to get this up and running. Some free, some payable – all mashable.

Find people of the empire to put on the Wanted list

Unfortunately the Empire has some enemies, and from time to time some of them needs to be killed. The way the Kill Squad of the Galactic Empire does this is by adding those people to their WANTED list, and have contract killers do the job for them. To announce new enemies as Wanted, the Empire uses the giant list of people of the Universe (UniverseRegistry) as the data source to find key data about the person, like name, birth year, gender and other characteristics. The UniverseRegistry has an open standard that enables third parties to integrate with them. The endpoint is http://swapi.co/api/people/ (editors note: This is the Star Wars API), and can be consumed as JSON.

Unfortunately, the UniverseRegistry does not have pictures of people, hence another data source is required for getting pictures. Of course the Empire is using Bing, and Bing image search also has an open API at https://api.datamarket.azure.com/Bing/Search/Image that can be used to map UniverseRegistry people with images. This makes it easy for the Kill Squad of the Galactic Empire to add Wanted persons to a SharePoint list for follow up and further actions utilizing the galactic power of the SharePoint.

This delivery is aiming for the following badges

Because we’re using external data to enrich our application.

Because we’re using best practice client side frameworks to render external data in our application.

We’re ramped up our branding based on judge feedback – and we really think our solution is worthy of this badge now.

Because STAR WARS API with the power of Bing – doesn’t get more hipster than that.

Demo of the solution

Technical solution

The ‘Browse people of the empire’ solution is made using angular.js for displaying external data, and SharePoint JSOM for adding people to the Wanted list. Because UniverseRegistry is returning JSON, no unnecessary JavaScript is required to create a data model, see the following example:

 method: 'GET',
 url: "https://swapi.co/api/people/?page=" + page,
 headers: { "Accept": "application/json;odata=verbose" }
 }).success(function (data, status, headers, config) {
 $scope.people = data.results;
 Appsters.Enemies.GetImageForCharacters(data.results, $scope, $http);

And the frontend is then as simple as

            <div class="character target" ng-repeat="character in people">  
                <div class="target-image">
                    <img src="{{character.imageUrl}}"/>
                <div class="nameAndInfo target-content">
                    <h2 class="name">{{character.name}}</h2>
                    <div class="keyData">
                        <span>Birth year: {{character.birth_year}}</span>
                        <span>Gender: {{character.gender}}</span>
                    <div class="actions">
                        <div id="AddWanted">Add as Wanted</div>

The Bing call for getting images follows the same procedure.