Using CAML to filter on Managed Metadata column

You cant filter out managed metadata fields by using standard rest calls with the $filter parameter. But this can be solved by the use of a CAML query.

The following CAML query will give you all the elements that are tagged with [Hulk] from the termstore.

<Query>
<Where>
<EQ>
<FieldRef Name=”Hero”/>
<Value Type=”TaxonomyFieldType”>Hulk</Value>
</EQ>
</Where>
</Query>

This can again be used in a rest call to get all this items.

We claim the:

caml

Final delivery – Marvel superhero selection

Some time ago, when SHIELD was taken over by HYDRA, the Avengers tared the SHIELD organisation down. By this time, the Triskelion was destroyed, and all the marvel superheros got spread all around the world. Nick Fury needed an solution overview over all the superheros. Mr. Fury requested a location map, mission overview, booking possibility and a superhero tracker, to send the right superhero to assignments, at the right time. Our solution is to book a superhero, with a smart phone, track them in their Tesla and see when the superheroes are ready for new assignments.

End to end solution

The solution contains several different (moving) parts.

  • Xamarin app running on Windows Phone and Android. This app is for people requesting assistance of superheroes
  • HTML5 based Tesla app – gives superheroes missions nearby to pick from. Includes location logging to update the superheroes location.
  • SharePoint dashboards for showing information about superheroes and missions. Plots the current location of the superheroes

Mobile APP

Everyone in the need of a superhero, needs an APP! Go figure? Apple has told us that for years, even though Microsoft has tried as hard as they can to ignore it for the last decade, they have also come around.

Skill feels that is good to be on the bleeding edge, and created a Xamarin Forms Mobile app for both handeling the mission, WAMS and Social login

SP App Home

SP List View

SP Register

SP Registered

Tesla APP

The modern battleship for out modern day superhero is a Tesla Model S. We’ve created an app for the console that will display new missions to the superhero and allow them to sign up for the mission.

We used the Simple Grid as a starting point, and the only CSS at play except for the grid is what you see in the picture above.

So, there is some pointer about the UI:

  • Light text on dark background is common for car console interfaces because of the variations in the lighting conditions.
  • Big buttons and big text enables the superhero to interact with the app on the go. Time being of the essence.
  • Same branding and design principals across platforms and applications is important.
  • Workflow that honks and flash the headlights on the Tesla to alert superhero of incoming mission

Tesla live app2

 

SharePoint Dashboard

In SharePoint Nick Fury has full control over all superheros and where they are. All new missions pop up in the dashboard and also completed and cancelled missions are presented. He will se the workload of each superhero to monitor life/work balance.

ManagementStudio

Each superhero also has it’s own dashboard. In here they can se their assigned missions, next mission, weather on next mission, rating on completed missions and a surveillance view of their vehicle.

SuperheroDashboard

Other technologies used:

  • Nintex Workflow to create Yammer group
  • Power BI to create various reports
  • APP from SharePoint Store
  • Live Stream for surveillance of superhero car

Skill – Management loves Excel

Since our managmenet loves Excel, and wants to have everythjing in their own sphere, we created an Office Addin that reads our SharePoint list of missions, and populates this data to Excel.

Addin:

snip_20160227142100

Excel without data:

snip_20160227142122

Excel with Data:

snip_20160227142134

 

By this we claim:

Badge-OfficeLut

Web App for Tesla Model S console

In this post we are aiming for these badges:

Badge-HighFive

 

The modern battleship for out modern day superhero is a Tesla Model S. We’ve created an app for the console that will display new missions to the superhero and allow them to sign up for the mission.

The user interface is created using HTML5 and CSS3. This is all there is to the HTML5 structure:HTML5structure

To make sure the application will still look good even if the resolution is enhanced we use a dynamic grid to display content. There’s also two custom fonts at play here, and there are no other images then Bruce Banners profile photo.TeslaAppCSS3

We used the Simple Grid as a starting point, and the only CSS at play except for the grid is what you see in the picture above.

So, there is some pointer about the UI:

  • Light text on dark background is common for car console interfaces because of the variations in the lighting conditions.
  • Big buttons and big text enables the superhero to interact with the app on the go. Time being of the essence.
  • Same branding and design principals across platforms and applications is important.

TeslaAppUI

 

 

The customized feeling – but no touching..

This blog post is aiming for these badges:

glossy

and the award

Award-UX

 

Using only what SharePoint OOTB has to offer, some CSS and JS to enhance the user interface is the new way forward. We want our application durable and strong, and with alle the new features from Microsoft, so we are using the Seattle masterpage as is.

SPCOLOR

Using the existing Palette022.spcolor at a starting point and updating the colors to match the red color from the Marvel logo, the color theme from the Tesla App; the color theme is done quick, easy and gives that custimized feel to the inviroment.

SPcolorWhite

SPFONT

To enhance the feel of a custom design the font is the next important thing we look at. We create an .spfont file from a radom OOTB font schema, and change the fint to use

BankGothicBT-Medium

as the header font and

AgencyFB-Reg

as the body text font.

Tie it all together

To tie it all together we only need the background image and then we’re good to go. I never bother with the Composed Look anymore, and just head straight for the “Change the Look”-part in Site Settings. Choosing the current style, popping the background picture in the placeholder, leave the Seattle masterpage be, choosing the right color theme and font schema – and where good to “Try it out”.

White_ChangeTheLook

Logo

Setting the logo trough the UI is the only way forward..

White_logo

CSS; the not so secret weapon

So, this takes us far along the way of creating a user interface that feels like a custom experience without doing any changes to original files. We are less worried about what may happen when Microsoft changes their masterpage, and at the same time the customers experience is “SharePoint that doesn’t look like SharePoint”.

The end result looks like this:

SuperheroDashboard

ManagementStudio

 

These design principals are consistent with the Tesla App and the native mobile app as well.

TeslaAppUI

And the mobile app:

suprhro

 

Skill – Be Mobile

Everyone in the need of a superhero, needs an APP! Go figure? Apple has told us that for years, even though Microsoft has tried as hard as they can to ignore it for the last decade, they have also come around.

Skill feels that is good to be on the bleeding edge, and created a Xamarin Forms Mobile app for both handeling the mission, WAMS and Social login. The problem is that WAMS with socical loggin is currently not supported in Xamarin Forms, so Skill created two apps.

1: WAMS Badge APP (Android Xamarin app, with Social login and ToDo Item handeling for suprheroes. Where the Items are stored in an Azure SQL Database.

Code for WAMS integration:

authenticate WAMS connection

Wams Authentication:

authenticate_wamsWams TODO

 

The Juicy stuff, Xamarin Froms Superhero Bookings app: This is the front page for user needing a SuperHero:

SP App HomeSP List View

Register a new mission that goes through a WebService and to SharePoint.

SP Register SP Registered

The Xamarin App is a Part of our bigger integration architecture:

integration

We have integrated Xamarin, with Azure Mobile Serivces as a front end for our MVC Web API also hosted in Azure.

The Azure Web API is our main integration hub talking to the Tesla API (An own blogpost) and with SharePoint for saving information about missions, heroes and handle bookings.

Yammer is the internal Superheros’r Us company portal ,even though we have learnt that we should use Slack.

As the last integration point we are working on a Node.js integration to copy missions from a SuperHero in SharePoint and into that users Exchange Calendar.

With this blogpost we claim:

Badge-StairwayToHeaven Badge-EmbeddingNumbnutdownload xamarin