Client Side Salsa – for the react code for PCF control
Hipster – for using node.js for secure communication
Right now – for socket io for real time communication with the active users in Model driven app
Nasty Hacker – for incredibly awesome solution with dirty hack on the model driven side
Power User Love – for using socket io with Azure Function in low-code power apps
High Level Diagram
Implementation
All realtime communication is implemented via the soket.io that hosted on Azure.
Project Update: Real-Time Communication and Enhanced User Interaction!
We’re excited to share the latest update on our project, featuring a significant enhancement in real-time communication capabilities. Now, administrators and backend integrations can seamlessly send messages to users who have opened specific records. This means that when there’s a change in the record status (e.g., case completion, modification), users will receive instant notifications prompting them to update their page for the latest changes.
This feature not only streamlines communication but also serves as a handy tool for various onboarding processes. Additionally, it facilitates users in understanding what has changed post the deployment of a new release.
Behind the scenes, we’ve implemented Clippy PCF, built upon the ClippyJs project, to empower this real-time communication. Leveraging the power of socket.io hosted on Azure, our solution ensures swift and efficient message delivery.
Moreover, the backbone of the real-time communication lies in Azure Functions, written in Node.js. These functions diligently send out notifications to the socket.io instance hosted on Azure, creating a seamless and responsive user experience.
Exciting times lie ahead as we continue to innovate and refine our project to meet the evolving needs of our users. Stay tuned for more updates, and thank you for being a part of our journey!
Business scenario
It supports real-time communication. So, Administrator or backend integration can send the message to the user that has opened the record. For instance: backend integration changed the status of the record (case has been completed, changed, etc..), all user that has opened record will receive the notification that they need to update the page to receive the lates changes.
Our main goal with this years ACDC was to make the workday a lot easier for both the Pirate Planners and the Pirates itself. We had identified that the use of Finance and Operations standard functionality for both planning and Employee Self-Service is far from easy and user friendly to use. Therefor we decided to use these days to create this:
A Model driven app for the Pirate Planners to use when they plan for what raid what pirate should be on, based on the skills that pirate has. This Planner app receives all the data it needs regarding the raids/projects and the pirates with skill profile directly from F&O, so that they always have the up to date data to work with as this is crucial to be able to do the correct planning.
A Canvas app for the Pirates to use on their mobiles, where they can see and update their personal information while the app talks directly with F&O, accsess other information that is relevant for them that we have integrated into the app like your calendar and meeting, let you see where the Planners has booked you, an AI chat that can give you answers for whatever you want and more.
PowerBI reports showing what the Planners have planned for in the different raids and other relevant information.
And, to make it easier for you judges, here are the reasons why we think we deserve a lot of points in the different categories:
Excellent User Experience:
Our entire idea before the ACDC was that we wanted to create something that gives everyone that struggles with the user experience in F&O a better workday, every day! The solution we now have created will give all the Planners out there a new, innovative and very user friendly way to plan their pirates and other resources with the data that is already in place in F&O. And, for every pirate and other employee in the company, their experience with the brand-new mobile app for Self-Service, they difference from what they experience now in F&O is almost impossible to describe! This is so much more user friendly, cool and awesome that they will be amazed!
Most Extreme Business Value:
As we have said before, this work is not easy for companies using it today. We know that for example with planning, many companies have a excel sheet that they update manually with data from F&O to do raid/project planning. All of these companies will be thankful that we created this Model driven app these days, as it really will both save them time, make sure they always have the correct data to work with, and give the company a much better up-to-date overview over how their pirates and employees are booked the next weeks.
And if that wasn’t good enough (to be honest, we first only planned to create the solution over, but we also wanted to do something very good for all the pirates, not just the planner), the Canvas app will give a huge business advantage to all companies using F&O! Even if they don’t do Planning for their resources, they can of course still use the Pirate app for all their employees, where they can show and give the employees the possibilities to do everything they do in F&O as Self-Service today, and we can include whatever other data or solutions they use directly in the mobile app so that the employee gets all the information and possibilities they need in one place instead of having to go several places! And, the app will of course be teamed with the companies logo and colors, so that for the Employee, the experience will be that this is an app only for them!
Rock Solid Geekness:
When we are three low-code and two no-code pirates going to a Hackaton, then something we really wants to learn more about is code and Geekness. We have learned a lot and used react and Node.js as you will see in the solution under, and all the time we have spent drilling into how to use the data from F&O correctly in POwerPlatform… Phu, we now know a lot more about many more tables and data coming out from F&O and how we can use it than what we did before. And, that ladies and gentlemen, is rock solid geekiness in the ERP world!
Killer App:
The way all components in this solution is tied together, really is what makes it a Killer App! We have connected F&O to a Model driven app and to a Canvas app, and the canvas app updates data back in F&O. In addition to this, PowerBI collects data both from F&O and the Model driven app, to show the reports we want. We have also extended the Canvas app to have so much more information that is relevant for the Pirate (and remember, the canvas app also shows information from the Model driven app regarding how they are planned!). When all of this is connected in a solution we now only have used 3 days to build, yeah, this deserves a lot of point! If you haven’t worked with F&O data in PowerPlatform before, then it’s hard to know, but this not straight forward.
Screenshoots of the Pirate Planner app and the technology used to fill it with data (with explenations under the pictures):
For the captain to check the various available project raidsOnce the project/raid is selected, you set what assignement you want to rederve hours forAnd then you reserve the piratePowerBI report that shows the info needed from the model driven Planner appTo save time without a datalake when gathering data from F&O we use the old and lovely tool PowerQuery inside Dataflows
Screenshots of the Pirate app and the technology used for that app (with explenations under the pictures):
Frontpage of the appView your calendar and meetingsView your bookings coming from what the planners has done in the new Planner appView your information from F&O and directly update the infor in F&O when you submit changesOpenAI embedded chat for the Pirate to use to whatever!PCF code used to integrate a PowerApps Custom Control to run the Node.js (shown under)React and Node.js web app on Azure used for the OpenAI chatbotCustom connector for Microsoft Graph API we have built to get picture and other data for the logged in user of the Canvas app.Custom connector codePowerAutomate to give you the greating of the dayPowerAutomate to find jokes/insults
And what has this even given us?
Why we have clamied the badges we have in this post: ACDC Craftsman: For the entire solution, how it all is connected and works! Dash it out: The PowerBI report for the data fra F&O and model driven app Client side salsa: For the OpenAI embedded chat using react and node.js Retro: For using PowerQuery to collect data from F&O Feature bombing: For this fun screen in a canvas app that gives you a lot of features at the same time:
Thank you all for an amazing event!! This has been so much fun and we will definetly be back next year!
We have mentioned little about our front end web solution so far. But here is some info. The interface is made in React.js built with Vite. It is faster than Webpack.⏩
This is a page to be used by authorities, the coast guard or separate centers for shipping companies. The website is used to scan areas on the map for ships. If a pirate ship is detected, an alarm can be sent to all other ships in the area. In order to be able to be used on all surfaces, it is of course responsive 😉
Big ScreenSmall screen
Sending an alarm from the web interface will trigger an alarm in Teams clients over on the ships, as well as cause the light on the bridge to flash red.
The harbour chief is leveraging M365 and Teams to get an overview and staff raids.
To do this we have made a spfx Teams app. This of course uses React as a frontend framework.
The app gets data from Dataverse and the harbour chief’s personal digital loot files in an Azure Storage account. The SAS key for accessing the storage account is of course kept in a key vault for the harbour chief’s eyes only.
The SAS key is kept in key vault.
The harbour chief has his own personal storage for his digital loot
The digital loot can be accessed by the harbour chief
The harbour chief has an easy view of browsing pirates that are available for raids.
The harbour chief has an easily automated way of staffing raids based on availability and scores.
The app suggests the best-suited crew for the raid.
Pirates love talking trash, and where better to spew out all the fun than Microsoft Teams?
As a pirate you don’t have too many tools at hand at any given time. The same is true in 2023. Why learn something new when you have your trusty old swiss army knife at hand?
This time around we’re stealing from our own team mate, Mikael, taking one of the most powerful and mis-used plugins of all time, the PnP Script Editor Web Part, and we use it to easily embed our “Pirate “Capture a pirate” canvas app into Teams.
Teams App Admin
It’s as easy as rum and grog, add the Teams Tab, configure it with and <iframe> tag and you’re all set. Because everyone knows iframes as it has been a trusted valid tag for over 20 years now. Who knew you could embed and use a PowerApp within Teams????
Script editor web part – iframe
Once set up – it works beautifully!
Canvas Apps in Teams – such a novel concept
The beauty is that it even works on mobile! Pick the tab and embrace.
Capture a pirate responsibly on a device
And for some extra fun, here’s PirateGTP pirate in SVG – well hidden 😁
The inputThe output
Badges and why – because why not
Client side salsa – Everyone knows teams tabs are browser tabs, and iframe’s are all about browser love. No monolithic front-end used, only simple and easy html and scripting.
Thieving bastards – We stole and borrowed the open source PnP script editor web part solution, even though inception was involved. PirateGPT is our API on crew mate generation, and Stable diffusion (via automatic1111) is our image pirateer solution. And not free I tell you as we had to purchase a used Nvidia RTX3060 gfx card to get this going.
Chameleon – What can we say, Teams, stand-alone, browser, native app, what not – you will not get away from being onboarded with out solution. It adapts portrait, landscape, even black and white. PirateGPT will get you!
Plug’nPlay – We stole it with inception, it plugs into anything SPFx plugs into. Showcased in Teams as we just love the purple.
Power User Love – All stored in Dynamic, all surfaced in Teams and SharePoint – we love ya’ll!
The Capitan has his own Native app with a useful set of tools to manage the crew and the boat. The App is made in React Native and prepared for mobile phones and tablets.
Features:
Weather forecast
A captain needs to monitor the weather before departure because it can greatly impact the safety and success of a voyage. Dangerous weather conditions such as strong winds, high waves, storms, fog, and ice can affect navigation, visibility, stability, and increase the risk of damage to the ship and crew. By monitoring the weather, the captain can plan a safer and more efficient voyage.
Counting the crew when boarding
A pirate captain would need to count their crew before departure for safety, morale, planning, and order. It helps ensure everyone is accounted for, tasks can be properly allocated, and order is maintained among the crew.
more to come.
The code can be found at: https://github.com/TheBastards-ACDC2023/Bastards-NativeApp
Recruitment is an important, and integrated part of Pirates 365, to acquire the best talent for our crew. To help us with this we have developed The pirate recruitment terminal(PRT). This solution provides us with a visually appealing and an engaging experience to gather new recruits.
Illustration of the Pirate recruitment terminal’s place within the Pirate 365 Recruitment module, along with the other modules.
PRT User flow
Since pirate recruits normally aren’t that familiar with modern interfaces, we have chosen a living parrot to help and guide the user and provide a smooth user experience.
When a pirate is detected, our engaging parrot approaches the pirate and presents the sign-up option. We collect personal details and complete the process by taking a picture. The collected data is then sent into the platform for future processing.
Sign-up formPicture capture
The Pirate recruitment terminal technology stack
PRT The app is running on the vue.js progressive javaScript framework with Pinia🍍 for state management. For the 3d animated parrot🦜 we are using three.js and TroisJS with WebGL rendering. For AI vision👁️ and object detection🤠 we are running tensorflow under the hood. If available the model is running on GPU, if not we fall back to CPU.
Images, 3d model, fonts is stolen captured on the internetsea.
Sailing is though, so you need to rigg your ship to your advantage, preferably automating your sales and having people walk the plank for making bad code. We chose to created a project with ASP.NET Core application running with React.js. The application is running on .NET version 7 and uses several technologies, both hip and retro.
Screen capture of the .net SPA application setup
Mapbox for Charting the Seven Seas
Our application uses Mapbox – a provider of custom online maps for websites and applications. The company provides APIs and SDKs to create custom maps, add markers and other map controls, and to handle user interaction with maps. This ease of use and their clean and well-structured documentation (docs.mapbox.com) made Mapbox our top dog for create, edit and manipulate maps in our service.
Map created using Mapbox’s API
Protecting your Shared Booty form the Crew
Any pirate needs a secure lair, a pirate code and ability to help other pirates in need. For this reason we created a repository in GitHub and implemented best practices for collaborating as developers, like proper branching, build pipelines, linting and pre-deploy checks. Like blocking ourselves from bloat because we can’t have unused code in the repository.
Snipet showing lint error for unused variable
Branching Strategy for Division and Conquering
The master branch contains the production code. All development code is merged from develop into master. Cutting corners in true hacker style we opted to not use feature branches, since, to be frank, the entire thing is a feature at this point.
What we all said when discussing feature branches
All branches are protected with protection rules. Due to the limited size of the project we can automatically merge features and bug branches directly to develop, but we can’t push directly to develop. Even that is too risky for this group of mad lags and girl. If you want to merge code from develop into master you need approval from at leaste one other developer and no changes requested to your merge, if all flags are green Github forcefully collides the code together and see what sticks (it’s actually more sophisticated than this, but you Judges know a lot more about this than we ever will, so we humbly just call it “magic” – just like magnets).
Parchment showing the Law of Protection for our Master Branch
Github Actions is a now a CI/CD platform that allows developers to automate their software development workflows. This, for us, is a huge win because we want to do as little configuration as possible!
CI/CD github actions
The actions reduce the time and effort required for manual processes and enables us to release new features and bug fixes quickly and confidently – Harr harr, got you matey, you thought we will fix bugs! … But … for the sake of argument … if we were to fix bugs, this powerful tool for streamlining development workflows, enables us to deliver high-quality software more efficiently and effectively at lower cost – Better use of time, reduce waste of time (WoT) and better business value for the client. We used yaml to tell what GitHub actions should create:
Yaml file describing what GitHub actions should create
Creating Overly Complex Gadgets to Avoid Simple Tasks (aka How we used ChatGTP to give us documentation on Pulumi)
Nobody likes to know stuff. Everyone loves AI. What about AI that knows stuff?! Sold!! We used the AI service to provide us with documentation on how to deploy infrastructure in Azure with code.
Asking the oracle about stuff we probably already should know
From this we were able to write code that could be executed in our CI/CD
Pulumi snippet for creating our environment: Infrastructure as code #retro
Resulting in a beautiful environment and ample time for coffee ☕️
Screen grab showing the employed resources in Azure Screen grab showing ChatGTP making a meme about making memes about using ChatGTP. Very meta.Mame created from ChatGPD’s instructions
We have implemented a new Teams Tab app that monitors in real time where the turtles (smartphone in our case) are located. One of our member are currently at the airport to travel back home to Stavanger. The video show that the Teams Tab App accurately shows her location at the airport and our location at the hotel.
The video also shows geolocation data stored in Azure Cosmos DB. We are using React, TypeScript and Hooks to implement the Teams Tab App (Client Side Salsa) .
In our teams group we have also create apps to easily look at the IoT Central, Webflow website and TODO list. All the communication happens inside the Microsoft teams.
