As the ACDC Hackathon draws to its climax, our team’s dedication and innovative spirit have led us to target three advanced badges, each reflecting our commitment to solving complex problems with cutting-edge technology and best practices.
Crawler: Revolutionizing Assistance with Copilot Studio
In our quest for the “Crawler” badge, we’ve integrated Copilot Studio into our Power Page site, embedding a Copilot bot designed to aid users when they’re stuck on a course level. This ingenious feature utilizes a cloud flow triggered by the user’s input, leveraging the Dataverse action “Search Rows (Preview)” to find and return answers for the specified course level. This not only enhances user experience but also showcases our innovative use of search to solve a real-world business problem.
Client Side Salsa: Ensuring Smooth Performance with Modern Frameworks
Our pursuit of the “Client Side Salsa” badge highlights our application’s fluidity, achieved by running entirely within the client’s browser without becoming a cumbersome monolith. By crafting a PCF control for our interactive course game using TypeScript and React, we ensure our setup’s compatibility across a wide range of browsers. This approach underlines our strategic use of modern front-end frameworks to deliver a seamless and responsive user interface.
ACDC Craftsman: Demonstrating Development and Deployment Excellence
The “ACDC Craftsman” badge is a testament to our adherence to development and deployment best practices. We’ve established three environments (dev, UAT, & prod), focusing our component development within the dev environment. Our deployment strategy is streamlined through Power Platform ALM pipelines, incorporating a pre-deployment approval step via Teams. This allows for meticulous control over deployment timing and participants. Moreover, our use of Azure DevOps Repositories for the PCF control exemplifies our commitment to source control and project management excellence.
As we conclude this hackathon journey, these badges represent more than just our technical achievements; they signify our team’s holistic approach to innovation, user engagement, and operational efficiency. Our efforts to blend advanced technological solutions with practical application and meticulous project management illustrate the essence of true ACDC craftsmanship, setting a high bar for what can be accomplished in such a collaborative and competitive environment.
Our dazzling frontend application is implemented with the coolest of the coolest technologies. React allows us to run our application seamlessly in the client’s browser. In addition to our static code analysis pipeline, these technologies make sure we are compliant and protects the privacy of the user.
We used:
React
Node.js
Typescript
SASS
Fluent UI for React
Not only are they hippety hip, they are third party libraries super useful for our application! Weehoo!
While this is a great visualisation, we must announce that the CSS and JS was not created by us, but by the great Developer VictorNP, which proposed a vanilla JS solution which we transformed into React functional components. As stated by the designer, It is mainly designed to be a read-only component used to display information – Therefore we’ve limited to bounded context fields.
This is an great example of how the limited possibilities of Dashboards in Dynamics directly, can easily be mitigated, as well making the visualisation reusable for different contexts through PCFs, making custom, code-first visuals in our Low-code solution. By harnessing the power of client-side processing, we ensure that our solutions are not burdened by heavy monolith front-ends, guaranteeing a seamless and responsive user experience every time. Of course, memorisation is applied to improve the transitions and performance of the visualisation.
The PCF component on a CRM form
Moreover, the PCFs functions as plugins for Power Apps, which further enriches the user experience through customisation. Our use cases will be mostly related to displaying important business and plumbing related KPI’s to keep track on the current state of our business. Lastly we wanted others to be able to reuse this visual and provide improvements to it, so we Open sourced it and made available on Github! Contributions are very welcome!
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.
