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.
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.
The full logo will be used in the portal header and canvas app, as well as for SharePoint site and Power BI.
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.
The logo icon will be used as favicon in portals, as icon in Canvas Apps and as icon for DevOpsTeam.
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.
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.
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
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.
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.
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:
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.
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.