SharePoint is still fun!

Mobile first! We make sure that our SharePoint site remains responsive, and that our own SPFx web part follows responsiveness.

SPFx on the way

We have started our SPFx project to enable more than modern has out-of-the-box. We build this by using React/NodeJS with TypeScript. Repository for the SPFx can be seen here: https://github.com/Infoworker-ACDC/InfoNinjasSPFx

Plan for the SPFx web part

It’s using underlaying data for crimes reported (cases), with crime fighting ninjas (employees) taking on the villains (problems). It’s plan to make good overview of each of these resources and map these to geolocation on maps (plan to integrate google maps to the SPFx view – that should be fun).

And this should all be wrapped into a nice design and be responsive. Then build some Power Apps and Power BI around this again.

PowerPoint for design sketches is needed

Visual identity

We have created a visual identity for our brand

In OneNote we have a visual guide that all apps and services should follow.

In addition we have created a logo that apply to the colours and embodies the playfulness and professionalism that the company embodies.

The logo is picturing a lightning symbol with arrows around it to symbolise that the company deals in swapping electrical providers. The lightning symbol is also indicating the automaticallity of the processes if switching from one provider to another.

Full logo

The full logo will be used in the portal header and canvas app, as well as for SharePoint site and Power BI.

Logo text alone

This logo text alone can be used where the full logo is to big or when the resolution is too low and the text becomes unreadable.

Logo icon alone

The logo icon will be used as favicon in portals, as icon in Canvas Apps and as icon for DevOpsTeam.

Accessibility – Colors

Like humans, turtles have mediocre vision. This also applies to our toxic waste turned turtles into humanoid-like beings. When technology enters their world it’s important to ensure color contrast is optimal, thus TMNT Corp mandates all tools to meet the highest accessibility grade possible.

Living in the sewer, going for a dark based scheme makes all the sense in the world.

Being inclusive is is a certainly a turtle powers, thus a light scheme is made available.

And this is how it works.

Dark contrast
Light contrast

Power Chess Final Delivery

Interessen rundt sjakk har eksplodert det siste året, blant annet The New York Times melder om rekordsalg og en økning på over 1000% på salg av fysiske sjakkbrett. Økningen i salget er hovedsakelig påvirket av den populære serien the Queen’s Gambit, og streaming programmet PogChamp. Men det er et problem, vi er midt i en pandemi og ingen kan spille fysisk sjakk mot hverandre.

Heldigvis sitter vi på løsningen: Power Chess!
Ved å bruke Power Chess kan du spille et fysisk sjakkparti mot hvem du vil uansett hvor i verden motstanderen befinner seg.

Slik fungerer det:

Hver spiller har hvert sitt sjakkbrett som er koblet på internett og bruker AI som identifiserer hvilke trekk som er utført. Når et sjakktrekk er identifisert vil sjakkbrettet til motstanderen utføre det samme sjakktrekket.

Under ser dere den automatiske lego-armen i Action. Filmen viser først et sjakktrekk på sjakkbrett 1, deretter ser vi lego-armen på sjakkbrett 2 på motstanderen sitt sjakkbrett.

Teknologien bak Power Chess

API og Azure Cognitive Services

Gjennom å integrere oss mot SharePoint, function app og ACS (Azure Cognitive Services)

I den tekniske løsningen vår benytter vi en integrasjon mot SharePoint, for å detektere at en ny fil har blitt lagt til, samt uthenting av denne filens innhold.

Videre har vi en integrasjon mot Function App som vi kjører et POST-kall mot tjenesten som gir oss 64 objekter tilbake.

Disse 64 objektene sendes til Azure Cognitive Services for analysering av innholdet.

Deretter blir dataen(Sjakkbrettet) prosessert og sendt til DataVerse ved en create.

Flow:

Ved å bruke Power Automate sin Cloud Flow har vi opprettet en Flow som trigges ved opprettelse av en ny fil i SharePoint i en mappe vi har kalt “Moves”. Ved å bruke en standard funksjon i Flow som henter innholdet i filen, får vi en string som vi kan sende til function app.

Function-app

Function appen mottar en string gjennom HTTP protokollen og deretter kutter opp bildet/Sjakkbrettet i 64 objekter, samt legger metadata på hver enkelt objekt for å identifisere hvor plasseringen er. Deretter blir disse sendt tilbake til flowen gjennom HTTP.

CRM / Dataverse

All dataen vi prosesserer illustrerer vi i en Model Driven app. Her kan vi se oversikt over alle rundene i enhvert spill, og posisjonene på alle brikkene. Ved hjelp av plattformen, og litt fancy HTML-kode, har vi fått denne skalerbar i forhold til enheter og skjermstørrelser.
Er man «on-the-run», kan man enkelt åpne applikasjonen via telefonen, og få en tilsvarende opplevelse.

HTML/CSS og Javascript kan være et kraftig verktøy. Om man trives i «den ville vesten», får man virkelig testet seg. Det har vært en god utfordring for oss CRM-konsulenter, men er fornøyd med resultatet.

Rasberry PI + Lego Boost

For å kontrollere Boost motoren til Lego har vi benyttet en Raspberry PI med Python script som kan sende signaler til boost motoren via BLE (Bluetooth Low Energy).

Badger vi clamer med denne posten:

#Glossy Pixels
#High 5
#Go With the Flow
#Chameleon
#Plug N’ Play
#Power User Love

Glossy pixels.

Felleskjøpets standard designbibliotek.

Vi har brukt FKA sitt design på alle brukergrensesnitt i løsningen. 

Gjenbruk av design gir fordel med at det er praktisk med et sentralt sted hvor man kan innhente gjenbrukbare detaljer når man trenger det. FKA sin er laget så pass lett gjenbrukbare og lett tilgjengelig slik at det har vært enkelt å innhente de elementene vi har hatt behov for. 

FKA designbiblioteket gir oss:

  • Farger
  • Typografi
  • Størrelser og mellomrom
  • Ikoner

Disse elementene er implementert i vår løsning:

  • Vår web-side som er bygd med Blazer.

  • Samme design elementene er brukt i React-native.
Glossy pixels

PT Brixters – Conductor Portal (Badge claims follows)

PT Brixters have made a conductor portal in react.js that is fully responsive and user friendly !

The Portal is made in React therefore we are claiming the “Client Side Salsa” badge for this.

The Portal also uses 2 module apps to show the train live video feed and a train controller where the train controller uses socket.io to communicate from the frontend to the backend, therefore we are claiming the “Right Now Badge” for this.

We are also claiming the “Glossy Pixels Badge

for the conductor portal because the portal looks shiny, is easy to read (big text, big buttons). And its responsive, works on mobile devices also, therefore we are also claiming the “Chameleon Badge”

And we wanted to show of our old Dashboard that is now upgraded to the new one 😀

Some pictures of socket.io with flask in action for the “Right now badge”:

Picture of VS Code as proof that we are using React to build our app.

SharePoint Online Site Design powered by PowerShell

It’s important to keep branding consistent across SharePoint Sites. Family members can create travel sites and it will be provisioned with the correct colors, icons and travel lists.

We have crated a Site Script and a site design and deployed it to the SharePoint site for D365 Family Engagement Hub. When a family is planing a new vaication or travel they can create a new site that already have lists they need to plan their stay.

Site Script

First we set the script by identifying the lists with name, description and fields.

Then the final line to add the script

Add-SPOSiteScript -Title “Family Travel Site” -Content $site_script -Description “Create a list for to keep up with traveling family memebers”

The response was a site script with ID

The ID we used in the adding a site design with the site script

Add-SPOSiteDesign -Title “D365 Family Engagement Hub – Travel Site” -WebTemplate “64” -SiteScripts “1131785c-864c-4262-a3ae-b2c9664bfcb6” -Description “The travel site is for planning a trip or travel for the family”

Response

The result was a site design that we can use from the user interface or use another live of powershell to set on a site:

Add-SPOSiteDesignTask -SiteDesignId c56a394b-a99b-4b75-8e93-01a927b7ccf6  -WebUrl “https://crm017179.sharepoint.com/sites/family

The result was a report of what design, web and site was combined:

When we visit the site we can see that it has two new lists:

The packing list contain the fields that we set:

IF family members want to create new sites they can now choose this travel site design:

That is good user experience!

Used this guide for PowerShell scripts: Get started creating SharePoint site designs and site scripts | Microsoft Docs

Grant access to user group

This script will exclude access to all users but those who are members of this specific user group (email enabled) “family Members”

Doing the Get to validate that the permissions were set.

When the users NOT in this group try to use the site design they will not see it – making it possible to family users only to access the site script and site design.

We claim these badges

and for the category

SharePoint Branding #GlossyPixels #QueenWatevraWa-nabi

Going for the Glossy Pixels Badge because it looks good

The Retro Badge is also applicable because someone think it belong in the past:

https://twitter.com/mikaelsvenson/status/1348675197688311811

And I use PowerShell, so

and points in the category for the awesome work that went into creating a graphical profile.

Graphical Profile

We created an Icon for our App called “D365 Family Engagement Hub”

Color Theme

In addition we created a color theme that will be used across all our apps and services:

Microsoft 365 Admin Branding

The first thing is Organisation theming in the Microsoft 365 Admin Center

The result is a Tob Bar that look like this:

SharePoint Site Theme

https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/7.0/theming-designer/index.html

The generated Theme

@{
“themePrimary” = “#17244f”;
“themeLighterAlt” = “#d6dbea”;
“themeLighter” = “#b3bcd7”;
“themeLight” = “#949fc3”;
“themeTertiary” = “#7885b0”;
“themeSecondary” = “#5e6d9c”;
“themeDarkAlt” = “#485789”;
“themeDark” = “#354476”;
“themeDarker” = “#243362”;
“neutralLighterAlt” = “#faf9f8”;
“neutralLighter” = “#f3f2f1”;
“neutralLight” = “#edebe9”;
“neutralQuaternaryAlt” = “#e1dfdd”;
“neutralQuaternary” = “#d0d0d0”;
“neutralTertiaryAlt” = “#c8c6c4”;
“neutralTertiary” = “#a19f9d”;
“neutralSecondary” = “#605e5c”;
“neutralPrimaryAlt” = “#3b3a39”;
“neutralPrimary” = “#323130”;
“neutralDark” = “#201f1e”;
“black” = “#000000”;
“white” = “#ffffff”;
}

SharePoint Online Management Shell

Apply theme with PowerShell based on the theme we generated.

Apply theme

Moving into SharePoint Online and choose the new theme in the site setting “Change the look”.

The colors are applied across the site.

Setting the header

Uploading pictures as logo and thumbnail and setting the header according to the style guide.

Fotter

Setting the footer is also important on a SharePoint site.

This is simple branding in SharePoint Online Modern sites. To take it one step further you can also create Site Designs that will allow users to add sites to SharePoint fully branded with a set of default features and content available from the get go.

That will be another blog post..