To best explain how much we love the Power Platform, we can have a quick look into the different components of the Power Platform we are using in our solution
Captain The captain is using a Power Page to register new incoming raids.
Harbor Master: The harbor master is notified by email and the speaker system at the dock by using a Power Automate flow connected with an external HTTP request to SONOS
This flow is only one of MANY flows controlling the application.
Crew: Crew members update their personal information via Canvas APP
Harbor Master: Has full control over all financial details on raids via the Power BI report that he has set up.
Model driven apps:
Of course, everything is possible to navigate via Model-Driven apps, but we have decided not to include this app in our end-user setup.
Canvas apps “recently” introduced the ability to work 2 people on a single canvas app. This has not been available before and is absolutely a gamechanger for app development!
We started out by turning on the function in preview from settings
After this, we have to connect the app to a GitHub source. I chose to connect this to my personal GitHub for simplicity.
At this point we were not able to work together on canvas apps without having to close the app between changes!!
This is a big change for Canvas apps being able to work at the same time in the same app👏
This post demonstrates how you can connect different hardware with logic to create good vibes🎵
We have a proximity sensor that speaks Zigbee. It is a “boolean” with the statuses of Open or Closed.
The proximity sensor is then connected to a Raspberry PI that is running software to interpret the signals sent from the proximity sensor.
The raspberry pi is then connected to the Sonos, and each proximity sensor distributed around the area will have its own songs playing when you trigger them.
Based on the excelent suggestions from the Judges, we have: Wierd Al Yankovic, Motorhead and Less than Jake👏🎵😂
The challenge was a to create pages with Power Pages that could display data from Dataverse, and work in offline mode. We won with the most unlikely “blast from the past”; jQuery.
The good: Power Pages. To start with, we set up some pages with Power pages, that would display information about pirates, captains, and ships.
If the user selects a captain, they would see information for the given captain, which is information stored in a table in Dataverse.
So far so good, the next step is to make it available in offline mode.
It gets worse: Progressive web application.
To make your Power pages available in offline mode, one must first set up your progressive web application. To do so, follow this helpful guide on the Microsoft learning portal: https://learn.microsoft.com/en-us/power-pages/configure/build-progressive-web-apps. You basically just enable it in the “Set up”-portal and define which pages you want to make available in offline mode.
The problem is; even though your Power pages are available offline, your data from Dataverse is not. So how do we solve that?
Oh Lord have mercy: jQuery to the rescue.
To capture the Retro badge, we went back in time to when jQuery ruled the web. And since we can append javascript to Power pages, we already had jQuery embedded on the pirate information page. So why not solve the head-to-head challenge in the worst possible tool for the job; jQuery and localstorage!
We embed the following snippet on the profile page:
We embed the following snippet on the offline page:
Then, we add the following HTML on the offline page:
For the next part we head into uncharted waters and lose our precious internet connection. But fear not, with the power of jQuery, we have made Dataverse data available in localstorage.
Pirates and singers are alike. They need a great stage name for people to remember who they are. When a new pirate arrives at the harbor master looking for work, the first thing they need to do is find a good name.
Just imagine what EMINEM would be if his artist name was Marshall Bruce Mathers III !!
The Harbor Master enters the new pirate to the system, and lets the AI tool decide what type of name suits the new pirate the best.
On the save, a Power Automate fires off a querry to OpenAI via a custom connector with the querry “Give me a pirate name for *Full Name*”. The return is then entered on the contact card.
10 years ago, the year is 2013. Barack Obama is president, Donald Trump is a reality TV star, no one has heard about Covid-19 or Microsoft 365, and jQuery 1.10.0 gets released to much fanfare! With so many improvements from the previous versions, this is clearly the future of web development and leaves heads spinning in excitement everywhere.
Speaking of spinning heads…
This little easter egg brings us back to a simpler time when we were allowed to enjoy the little things in web development.
We have used the oldest (and stable) jQuery version available from Microsoft’s Ajax CDN (jQuery 1.10.0), and embedded it to the Power Page HTMLpage.
A super simple function adds a class to div containing the profile picture on click, and CSS makes the image spin. Just like our heads.
During the last 24 hours, we have all learned to love the magic of Power Pages.
But with some custom CSS and a webpage instead of a modal window, we can change the dour and uninspiring look from the standard out of the box “I work in corporate accounting”-look.
Change from a modal window:
To a nice, classical scorecard for all our important pirate skills, just like the ones we got from school back in the 80s
The dread pirate Gaute is good at sailing but sucks at fighting.
As for displaying the form values as columns, if it is stupid but it works…
The harbor master is a social character needing to speak to as many pirates as possible and in general handle most day-to-day issues at the dock. This means that he is not always in front of his computer and is capable of receiving information on what is happening with the voyages.
Ship ready to leave
When the captain has received his crew from the harbor master and the voyage is ready to leave, the captain closes the voyage and the speakers in the harbor sound out a sweet farewell on the SONOS 🎵Reidar reiser snart🎵.
As part of our solution we are developing a Teams App for staffing raids, which uses an Azure Function App to get dataverse data. The toolchain setup for doing this consists of Visual Studio Code, Azure Devops Pipelines and Azure Services.
To speed up our delivery we have implemented a CI/CD pipeline that deploys the infrastructure and backend code to an Azure Function App. The process works like this
We develop a new feature with Visual Studio Code
We push the feature to the main branch
The Azure pipeline is triggered and executes two stages
Build stage
The .NET code is built as a deployable zip
Dev stage
Then infrastructure is deployed with Azure Bicep
The zip is deployed to the newly created Azure Function App
We have modularized the stage jobs in templates, so we only need 9 lines of code to add another environment to our application.
To deploy our infrastructure with Bicep we use a Devops Service Connection to authorize operations with the Azure CLI.
Take a look at line 49 – here we read the output variables from the Bicep deployment in order to retrieve the name of the function app. We later retrieve and use this Devops pipeline variable in the job that deploys the code to the Azure Function App.
The infrastructure is defined in the .bicep file above which also utilizes other Bicep modules. In order to avoid explicitly including secrets we feed it from a Azure Key Vault. A link to the Key Vault Secret is passed to the Azure az group create command in a json file.
We deploy a frontend-app as well. The build is made and artifacts are created for the spfx-app and for the teams-manifest. We then have a release pipelines that utilize npm and m365 cli for deploying the app to the sharepoint app catalog and to Teams. The scripts are written with powershell.
For now it only displays basic pirate data from Dataverse
