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

Ukeplaner for familien med D365 Marketing

Kundereiser er et kjent fenomen i markedsføringens verden. Vi kaller det for familiereiser, og de hjelper deg med å sende ut dagsplaner til barn og voksne, følge opp innleveringer og purre opp slike, og ikke minst kan man få avstemninger om hva fredagsmiddagen skal være. Månedlige pulsundersøkelser er også fint, så man kan ivareta hele familiens helse. Hvordan dette gir forretningsverdi i den virkelige verden håper vi er helt åpenbart, da dette er prima kunde/familie-behandling.

Det begynner med segmenter. Her har vi delt inn i tre segmenter, for barn, voksne og dommere. Det gjør at vi kan ha rett kommunikasjon mot de ulike gruppene. Her kan vi også dele inn i alderssegmenter, eller hva med et eget treningssegment for hele familien?

Selve familiereisen er en tidslinje der vi kan sette opp e-poster, påminnelser, undersøkelser eller kanskje arrangementer som familien skal gjennom. Alle får da full oversikt, og administrator får oversikt over hvem som har sett hva og gjort hva. Full kontroll der altså.

Vi har bygget opp e-postmaler som gjør det enkelt å lage nye dags-agendaer. Vi har også laget innholdsblokker, med ferdig skrevet innhold som enkelt kan tilpasses. Lekser er for eksempel et punkt på agendaen som er ganske repetivt for de fleste barn.

Eksempel på mal, selvsagt med branding, og naturligvis responsivt.

Undersøkelser og surveys sendes ut med Customer Voice, slik at vi får svarene tilbake rett i løsningen, og kan følge opp på behørig vis.

Vi finner glede i å bruke hele D365 suiten i løsningen vår, og nyter hvordan alt henger sammen gjennom Dataverse.

Poesihjørnet

Det er en ting som har holdt meg våken i natt,
Et Team Spirit badge jeg gjerne skulle hatt.
Vi er jo et lag som elsker hverandre høyt,
Så at dette badge mangler er nesten litt drøyt.

Det begynner med vår helt og team-leader Brage,
Han har slike clowns på laget, og det uten å klage.
Petter Ekæ er jovial som få og prekær grovt og bredt,
Men koden hans er noe av det mest rørende jeg noen gang har sett.

Trond er så blid at det ikke går an,
Gliser så bredt at vi ser mer tann enn mann.
Og når Robert herjer med APIet til Vipps,
Blir jeg så andektig at jeg vil finne frem jakke og slips.

Vår old-school gangster nerd fra Halden, Ulrikke,
Er for oss en helt uvurderlig (lego)brikke.
En tanke som nesten gjør meg litt redd:
Ho var salongberuset når ho herjet I head to head.

Når Karlsen koder på er det ingen bønn,
Vi ser hvorfor han er kjent som Varteigs store sønn.
John Magnus er en annen vi ikke må glemme,
Den kjekkeste på laget – han får min stemme!
Og helt til sist, vårt ferskeste medlem, Kai,
Han ser snill ut, men er en blodtørstig hai.

Hvis ikke det er spirit i denne flokk,
Har alt gått over stein og stokk!

Med hilsen fra Surkålspoeten S, som ønsker å claime Team Spirit Badge

Dude, where’s my dog?

Ever wondered where your dog are when there’s no food around? How about asking Cortana, Siri, Alexa, or even better Boten Anna?

We have created an integrated solution, with CI/CD in Azure Devops, Cognitive Services, Azure Functions and Power Virtual Agent.

The solution starts with an Azure Function written in Visual Studio.

When code is completed, committed and Pull Requested into the main branch, our CICD pipeline (YML) fires and pushes the solution to Azure Functions

The Azure function is running with a set of pre-captured surveillance images (Due to GDPR we are not using live video). Each folder consists of three photos, one from the kitchen, one from the hallway and one from the livingroom.

Azure Blob storage

Each of these photos will be evaluated with the cognitive service vision functionality. Each of the evaulated photos will be returned with an url for the user to check, and with a textual answer to where the dog is actually located.


Boten Anna

The evaluated images:

https://acdc2021storage.blob.core.windows.net/dogimages/DogOrder/03/gang.jpeg
https://acdc2021storage.blob.core.windows.net/dogimages/DogOrder/03/kjokken.jpeg
https://acdc2021storage.blob.core.windows.net/dogimages/DogOrder/03/stue.jpeg

With this solution we claim the following badges:

  1. Power User Love – for usage of the Power Virtual Agent
  2. Stairway to Heaven – For the usage of Azure Devops, Azure Functions, Cognitive Service, Azure Storage, Power Virtual Agent
  3. Power of the shell – for the CI/CD YML publishing
  4. The Existential Risk – for usage of AI through Cognitive Service Vision
Power User Love
Stairway to heaven
power of the shell
the existential risk

Koble Power Platform til Vipps sine APIer

Etter Klossmajorenes gedigne suksess med å kalle Vipps sine API-er fra Postman (https://acdc.blog/skill/vipps-payment-api-smackdown/) har vi nå videreført dette arbeidet til å understøtte ukepenger-prosessen i Dynamics 365 Customer Engagement

Tanken her er at barn skal kunne forespørre sine foreldre om betaling etter utførte oppgaver i hjemmet

Flyten for utbetaling av penger for oppgaver i hjemmet starter barnas PowerApp for oppgaver. Her kan de ta bilde av utført oppdrag, og forespørre sine foreldre om betaling

Reelt bilde om hvordan det er å sitte på Hackaton på hjemmekontor og hvorfor man trenger Dynamics 365 Family Engagement – løsning for å sysselsette ungene

Når barna trykker på “Be om penger” trigges en Power Automate Cloud Flow “Spør mamma og pappa etter-penger flyten v2❤”

Denne flyten henter ut informasjon om oppgaven som er utført, hvilket barn som sender inn oppgaven, beløp etc.

Vi henter ut telefonnummer til den foreldren som skal gjøre utbetaling, og når de får den så får forelderen forespørsel for Vipps

Forutsetninger:

Som vi kan se så har ikke Vipps noe API for å initiere person-person-betalinger, for å godta betalinger via AIP må man være registrert som en Merchant.

Så som en forutsetning for at akkurat dette skal fly hos oss vil man måtte registrere hvert enkelt barn med firmakonto hos Vipps. Dette ser vi ikke som noen hindring.

Badges og kategorier

Head2Head

Power User Love

Lego Shark Tank

Lego Power Bricks

Remarkable Team Spirt & Sharing is Caring – Klossmajorene ❤ Cowders

Skill og Felleskjøpet-gjengen hadde en hyggelig runde på discord-kanalen til FK. Jarle dumpa innom, og det viste seg etterhvert at hele sesjonen ble streamet til Youtube.

Marius B og Brage viste frem sitt veldig Retro datautstyr (Marius sin eldste laptop var fra 1981 men Brages gamleste var bare fra 1988).

Alle var enige om at det var en fin kveld!

Vi Kleimer følgende badger (både til oss og FK-gutta seff)

  • Remarkable Team Spirit
  • Happy Camper – utvekslet erfaringer rundt Vipps-APIet

Easy approval/rejection and push notifications in powerapps

For Skill sin SkillHikeAdvisor trengte vi en måte for å akseptere og avise forespørsler om tur fra forskjellige brukere.

Løsningen ble en flow som trigges av et knappetrykk i powerappen. Flowen sender en email til han/hun personen vil gå en tur med. Mail ser slik ut:

Ved å svare på ja eller nei vil brukeren som sendte forespørselen få en pushnotifikasjon på sin telefon om resultatet.

For å bruke dette trengs det to actions i Power automate flows:

  • Send Email With Options
  • Send Push Notifcations V2

#Lego Power Bricks

Forretningsverdi i kobling mellom Dataverse og Sonos-høyttalere

Sonos-modulen i Dynamics 365 Family Engagement fungerer på den måten at man kan få opplest en melding fra Dataverse på en Sonos-høyttaler.

Vi ser allerede stor forretningsverdi i vårt lille familiescenarie der barn som ikke har sin egen smarttelefon kan få lest opp meldinger rundt om kring i huset, men også i andre scenarier.

Forretningsområder vi kan se for oss at dette kan være nyttig

  • Saksbehandling – lese opp innkomme saker
  • Mulighet for informasjon til svaksynte / blinde
  • Salgsorganisasjon – automatisere “pling” ved lukkede salgsmulighet og lese opp ting som titelen på salgsmuligheten, selger, verdi etc (i tillegg til virtuell klokkelyd og applaus)

Kategoripoeng

Med denne posten forsøker vi å belyse forretningsverdi i kategorien “Shark Tank”

Family Engagement API

Enabling external developers to utilize the “Family Engagement Platform”

Technologies:

  • Azure API Managment
    • Api
    • Products
    • Subscriptions
  • Azure Function Apps, with httptriggers
    • Key vault
    • ADFS Application with Auth and setting of access in the Contoso AD
  • GIT
  • Web application
  • Azure DevOps
    • Piplines
    • Deploys

Repo in Azure DevOps
Connected to a Pipeline and Release
Deployes to a Azur Function App, With HTTP Triggers
Client Id and Secret is stored in Key Vault
Howto referance Key Valut value from Configuration
Created an AD Identity to talk to KeyVault
Key Vault
The function App is given access to the Key Vault
And the 2 values in the key vault

Contoso Domain

App registert for the function App to access the Contoso Domain

Permissions given for the app in App Registrations
You need to give Admin Consent to the permissions under Enterprise Applications

API Managment

Base information about the backend this api is calling. For now there is no authorization
The API is defined in API Managment (APIM)
Setting a parameter for all endpoints, the value is stored under Named Values.
The code value can be obtained from the Function App, using the Master key you can use the same Code for all functions in that app.
Define the products that should be available in the API
Create a user that is given a way to access your API
Her we can see that the user Kai has been granted access to the product Family

Then we wil try to call the API

This is about it, now we have an API exposed through APIM backed by a Function App reacting on HTTPTriggers.

The function app uses the Graph API to read Groups and Members in the Contoso domain from the Slevik Vel dominan.

We are wrapping Groups and Users as Family and Family Members.

External Apps

The Family Engagement API is available for remote applications and apps that want to develop and use the family engagement platform. As an example: The family engagement web application is intend to use the API to fetch family members and calendar events from the Microsoft Graph API and statistics from The Family Graph API.

CI/CD

Family engagement APP inside Microsoft Teams

Family engagement APP from browser

We also created a React app based on Fluent UI (microsoft.com)

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