Client powered leaderboard

dashboardIn our custom leaderboard, we have presented statistics for the top
persons in different categories. The log of all activity from our
Fitbits is fetched using AJAX from Sharepoints REST API. The data is
then processed client side using javascript, before being presented.

The javascript code traverses all of the data and aggregates the total
steps, floors, distance and sleep over the last seven days. The total
minutes of sleep over the last seven days is divided by (7 * 60) to
calculate the average hours of sleep per day. We also calculate the
average step length per person by dividing the distance in meters by the
number of steps.

Afterwards, the data is sorted for each of the categories we present, so
it can be presented in the correct order. At last, we update the content
by inserting the final data in each of the categories.

Applying for:

I’m a hipster baby

To make our solution extra cool we had to move outside the Microsoft universe and integrate with the most super cool and awesome chat client, Slack!

Since most of the user is likely to spend more time in Slack than on Sharepoint it is important to notify Slack once something important happens on Sharepoint. That’s why we used Slacks awesome web-hooks to post updates every time there is a new announcement in Sharepoints newsfeed. Using the power of the force(a.k.a. jQuery) Darth “Sharepoint” Vader spreads the news to our #general channel.

Skjermbilde 2015-02-28 kl. 14.27.14

Since Slack is way cooler than Yammer we decided to not include Yammer in our solution(it would de-awesome the final product) and instead went for Slack as our main chat client. Because of this we feel that this qualify for the “yam yam gimme some” badge, only that in our world we would refer to it as the “Give us some Slack” badge.

 

 

 

 

 

 

 

Going for:

iTerroristas extreme final business delivery value – No Worries Mate!

BraveNewWorld3

Envision the future with healthier people strolling around without worries.  Without financial worries, without health worries. Organizations suddenly have funds to pay better salary, and have poeple working fewer, more productive hours. Allowing for more, free family time for all.  People will move more on their own two feet, bikes and rollerskates. The government will have more funds (partly because of fewer sick leaves, hospital and rehabilitation payments). So we will get better infrastructure, better education, better healthcare and lower taxes. Fewer cars on the streets, less pollution, greener environment and more parks and recreation.

Nice eh ?

All of this will come true on account of our Step Wars solution.  Further business value details can be found here

Our simple 1,2,3 GO! approach is extremely effective and is proven user adoption fairy dust magic!

1. We draw people in with our fun gimmicks and wearables

fitbit

2. We get them interested through competition and extremely cool and useful, interactive user interface

 

MySteps

leaderboard

 

both

Dash

 

 

 

3. We keep them going because of realization of health benefits and general *feeling goodness*!

BuffDudes

We use gamification and workflows to remind everybody how they are doing. We set up several different APIs, available in the cloud, in order to have a scalable solution and possible reuse of services later on in the progression of the product.

The remarkable weird campers

For the Iterroristas scientific work is very important. We believe that proper research is the best, and only way, to success. That’s why we only bring the best gear to work to make sure we get the correct result.

campers1Looking the part, but maybe the dry ice and plastic microscope isn’t fooling real chemists, who knows?

We are, however, real computer _SCIENTISTS_. The camp was themed for “Hacking the body” (with science), based on our concept to motivate people to be healthy using fitness trackers.

Video

 

Our big mistake:

We decided to compose our lineup with mostly non-SharePoint consultants. Only two people were using Windows. Two were using OS X and the last two were using Linux. And the two windows-users are composed of one newbie and another that stopped writing code six years ago. This resulted in plenty of frustration when SharePoint wasn’t doing what we thought it was supposed to do. Next year we will be packing more SharePoint expertise in the group.

Nonetheless we survived the weekend (we’re still friends). And even if we missed our biggest goal for the weekend (the cup-flipping competition) we consider this a successful event.

Going for:

The Death Star race and Personal Profile Page

Death Star Race

With 270 lines of efficient JavaScript our personal dashboard is boasting its client side capabilities. Retrieving both user and team-data through the SharePoint REST API. We’ve chosen to combine the power and versatility of jQuery with OData calls to retrieve filtered lists containing user and FitBit data.

The data is grouped by sync-bulks and after receiving the data we parse it, group it by user and aggregate steps and sleep. For the current user we elect to show today, the last week, and the grand total, but for the other team members we didn’t want to show too much personal information and we are only showing the last week.

Our favourite view is the Death Star. Using client scripting and CSS3 transformations to visualise how the different team members are doing compared to each other by showing their progress around the death star.

Death star html markup
Minimal HTML, maximum visual effect using the power of CSS3

Death star avatar generationBy generating our avatars in JavaScript we retain control and avoid flashes of unstyled content.

Applying for:

Step your gloss up!

On top of all the previous glossiness we have made a custom dashboard for our previously “dull” SharePoint lists…

dashboard

Also, we set up old school midi music to hit home the fuzzy star wars nostalgia. This was achieved by using the HTML5 tag Audio. This is really a game changer and improves the whole SharePoint experience.

To fully drive home the Star Wars theme and give the user expierence that sweet fuzzy nostalgic feeling, we implement a highly glossy CSS version of the good old “…in a galaxy far, far away…”

By this we are further glossing up and prettifying SharePoint with a composed look containing a new custom .spfont – and .spcolor-file. In the .spfont we have added a reference to a starwars font, which we have added to our site collection. It’s possible to add a background image to a composed look but it has a max resolution which doesn’t suit our high standards for SharePoint star shininess. So we referenced a custom css file from the masterpage to get our starry, high resolution star wars background. By using the composed look, we can easily change the look and feel of default SharePoint components, giving all parts of our site a star wars brand.

Font

fonts

Color

colorpanel

 

glossy

By defining our brand through a composed look, even the SPLongOperation-dialogue gets our branding.

workingonit

 

 

Let me publish that for you

All of Vaders secret files about the races and his evils plans for them were stored in a separate site collection. We wanted to present some of the data on separate Dex Star site collection and present it there. The races are stored in a catalog. With cross-site publishing and content search web part we were able to create a simple publishing solution. This way his Dex Troopers can user their time on slavery instead of creating and editing static pages in the Dex Star site collection. content search wp We created a list that we could write content to and used the search query web part with a slightly modified display template to present the content.

Catalog King

Power user love

Crawler

Chart0rama

By leveraging the sweet Excel Web Access web part, we were able to show some cool power view graphs. We exported our lists of data to excel and created several tables with power view.

rawdata

We think a nice looking interactive dashboard over activity statistics is a good addition to our solution.

excel web part

But we did not stop there, oh no! We also used the awesome power BI!

power BI

Unfortunately SharePoint does not have a Power BI web part. We thought we could use the graphs in the same manner as with power view but we did not find a good enough solution. For now the users must click a link and redirect to app.powerbi.com/something to see these kick ass graphs.

Head 2 head first

Infrastructure

 

This is how we would solve the case. Basically we would create a hybrid-solution, automated with the creation of web-frontends / virtual network and VPN down to local /corp. farm.

Boom! *drops the mic and walks away…