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

Progressive web app – Submit your problem from any where

This is a form that you can report an issue from anywhere. Its responsive, works on both desktop and mobile screens.

It could be hosted any way. It is a progressive web app build with react, node.js

Citizens can report the issue by specifing title, description, take a photo of what the see and tag a location to help the turtles resolving the issue faster.

Desktop screen
Mobile screen
What is the issue with Sondre 🙂

We gonna contnuie build this to add administration functionalities and gather new batched. Update will come 🙂

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

HTML5 WEB-COMPONENTS

What is HTML5 WEB-COMPONENTS aka custom components.

Custom components is a combination of several standards from the HTML standards.

  • Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
  • Shadow DOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element — which is rendered separately from the main document DOM — and controlling associated functionality. In this way, you can keep an element’s features private, so they can be scripted and styled without the fear of collision with other parts of the document.
  • HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element’s structure.

The thing with web-components is that they can be reused across, sites and installations by referencing the js script.

One way of using them is thinking of each component as a autonomous part/app that will not mess up anything else on the page.

You can can style things inside the a custom-element by using --css-variable

Communication between custom-elements can be done using events, setting attrubutes or calling functions on the element.

This component can be used together with anything else as long as it runs in a browser.

I have created a “super simple” demo component that counts up a number in random time and increment.

Creating a global-pushup-counter custom component using lit-element and lit-html.

Super simple, but functional
Buildt and bundled using esbuild.

https://esbuild.github.io/faq/

A new kind of bundler, written in GO to achieve extreme speed.

Embeded in an ASPNET core MVC application
And there it is..

We are claiming three badges for this:

  1. Hipster
  2. High 5
  3. Client side salsa

Cameleon and Hi 5

Blazor appen vÄr bruker et responsivt design og god kodestandard gjennom bruk av HTML5 tags.

Viser bruk av HTML5 tags og mobilvisning.
https://youtu.be/K7h0Kq6u1Zw
Chameleon for responsivt design
Bruk av HTML5 tagger i lĂžsningen.