Enchanting Interfaces: Claiming the Glossy Pixels, Chameleon Badges and Plug N’ Play

Greetings, fellow wizards and witches of the digital realm!

This afternoon, we are thrilled to announce that our magical journey through the enchanted forest of user interfaces has led us to claim two prestigious badges: Glossy Pixels and Chameleon. 🪄✨

Glossy Pixels: Just like the shimmering surface of the Mirror of Erised, our Power App user interfaces are crafted with a spellbinding glossiness that captivates the eye. These interfaces are not only visually stunning but also resilient, ensuring they won’t shatter like fragile glass on smaller screens. Whether you’re viewing them on a Muggle’s smartphone or a wizard’s enchanted tablet, the glossy charm remains unbroken.

Chameleon: Much like the Animagus who can transform at will, our solutions are incredibly responsive. They adapt seamlessly to all devices and screen sizes, from the smallest of handheld devices to the grandest of desktop monitors. This badge signifies our commitment to creating interfaces that are as versatile as a Polyjuice Potion, ensuring a smooth and consistent experience for all users, regardless of their device.

With these badges, we continue to push the boundaries of digital enchantment, creating user experiences that are as magical as a Patronus charm. Stay tuned for more spellbinding updates as we continue our quest to bring a touch of magic to the world of technology.

Plug N’ Play: In the spirit of the Weasleys’ Wizard Wheezes, we have conjured an app that seamlessly integrates with both Microsoft Teams and SharePoint, bringing a touch of magic to our daily business operations. This app is not just a mere spell; it is a powerful tool designed to solve a crucial business need, ensuring our workflows are as smooth as a well-brewed potion.

Our app, much like the Room of Requirement, adapts to the needs of its users. It enhances collaboration and communication within Teams, allowing us to pull information from various systems, have meaningful conversations about it, and take action—all within the enchanted walls of Teams. Additionally, we have woven our magic into SharePoint, creating a unified experience that ensures seamless access to documents, data, and collaboration tools.

Mischief managed! 🧙‍♂️✨

Glossy glossy glossy

Having consistent branding is important to give the users a good experience when navigating between different user interfaces. It makes a cohesive look and feel across apps, websites, reports, etc.

Define brand identity

The focus point for our solution is Hermione’s Beaded Bag, so we wanted to use soft purple

Font

One of the most identifying things about a brand is the font. We have found a free font that we want to use with most user-facing interfaces.

https://www.fontspace.com/magic-owl-font-f57364

Color Pallette

We used Microsoft 365 Copilot Visual creator to help get our creativity going. It helped us find a color scheme that was exactly what we were looking for to get a soft magical feeling.

From this we created a color scheme fit for apps and websites.

Power pages:

Canvas app:

/

Lets go mobile

Our professors are active people, always flying around and disaparting between location, so we need to ensure that they can select and review applications for wizardry schools on the go.

Power BI mobile view

Mobile version of PowerBI Segmentation report

This dedicated verson allows interactive on the go.

Mobile Model Driven Apps

For individual students, we reduced the displayed content for mobile devices, the unnecessary address data is not shown on mobile devices, improving the usability of the application while remote.

Showing desktop experience
Mobile version of the app

Interactive Map: Bringing Dark Ledger’s Magic to Life

🗺️ Interactive Map: Mapping the Shadows in Style

Our Interactive Map WebApp has masterfully combined modern technology, responsive design, and captivating aesthetics. Developed with React, TypeScript, SCSS, and enhanced with fancy CSS animations, this map is the perfect companion for tracking the mystical operations of the Dark Ledger. With seamless integrations into Microsoft Teams and SharePoint, paired with automated deployments via GitHub Actions, this tool bridges functionality and style, solving critical business needs like a pro.


🔮 Magical Features

1. Interactive Tracking with Google Maps API 🌍

  • Dynamic Positioning: Real-time tracking shows the locations of both targets and hitmen.
  • Reward Insights: Visualize mission rewards directly on the map for clarity and motivation.
  • Custom Styling: The map is tailored to reflect the Dark Ledger’s mystical theme.

2. Cross-Platform Accessibility 🔗

  • Teams App: Add it directly to Microsoft Teams for quick and easy collaboration.
  • SharePoint Integration: Embed seamlessly into SharePoint sites to streamline workflows.
  • Responsive Design: Optimized for desktops, tablets, and smartphones—effortlessly adapting to any screen size.

3. Modern Front-End Excellence 🧙‍♂️

To ensure smooth performance and usability:

  • React Framework: Modular, high-performance components enable fluid interactivity.
  • State Management: Redux or Context API ensures dynamic updates without skipping a beat.
  • Streams: Real-time syncing keeps the map fresh and up-to-date.
  • SCSS: Powers cohesive, flexible, and maintainable styling.

4. Dazzling CSS Animations

  • Fluid Transitions: Map markers and interface elements move gracefully, like spells in motion.
  • Hover Effects: Intuitive highlighting guides users effortlessly through the map.
  • Polished Touches: Every button, icon, and menu interaction feels alive and engaging.

5. Automated Deployments with GitHub Actions 🤖✨

The app is built for agility and reliability:

  • CI/CD Pipeline: Changes pushed to GitHub are automatically deployed to our Azure-hosted web app using GitHub Actions.
  • Efficiency: Ensures the latest features and fixes are available to users without manual intervention.
  • Azure Hosting: Provides a robust, scalable platform to support the app’s responsiveness and performance.

💼 Solving Real Business Needs

This isn’t just an enchanting app; it’s a powerful business tool:

  • Operational Insights: Tracks locations and rewards in real time, empowering decision-making.
  • Collaboration Simplified: Embeds directly into Teams and SharePoint, making it easily accessible for all users.
  • Efficiency Boost: Automates key processes and eliminates the manual hassle of location tracking.

🌟 Built for Versatility and Performance

Why It Stands Out:

  • Responsive Design: Ensures usability across all devices and screen sizes.
  • Modern Tech Stack: Leverages React, SCSS, and state management for a seamless experience.
  • Automated Deployments: GitHub Actions streamline updates and ensure consistent quality.
  • Azure Hosting: Provides a stable and scalable backend for flawless performance.

🖤 Enchanting Efficiency

With React, SCSS, Google Maps API, and Azure-hosted automation, our Interactive Map WebApp stands as a spellbinding example of innovation. Whether you’re plotting missions or tracking rewards, this tool ensures you’re always ahead, wrapped in elegance and functionality.

“When modern magic meets technical wizardry, the results are simply spellbinding.” 🧙✨

Potion Approval Made Magical: A Canvas App for the Ages

Greetings, wizards, witches, and tech sorcerers! ✨

At Team PowerPotters, we’ve crafted a solution that combines ambition, design, and versatility to streamline potion approval processes in Hogwarts’ potions lab. Our Canvas app not only ensures Professor Snape retains his tight grip on potion-making but also demonstrates innovation worthy of the Chameleon, Glossy Pixels, and Plug N’Play badges.

Here’s how our magical app comes to life!


🪄 The Process: From Student to Snape

Our app powers the potion production workflow, starting from the moment a student initiates the brewing process to Snape’s final approval. Here’s the step-by-step magic:

  1. Potion Initiation:
    • When a student triggers the cauldron with a voice command like “Start potion,” a Power Automate flow kicks into action, creating a production order in Dynamics 365 Finance and Operations (FO).
  2. Flow Logic:
    • The production ID and related data are returned to the flow and enhanced with compose actions to ensure clarity.
    • The production BOM (Bill of Materials) is retrieved from FO and transformed into an easy-to-read format, beautifully rendered in the app.
  3. Snape’s Oversight:
    • An SMS alert is sent to Snape, notifying him of the brewing attempt with details of the potion and ingredients.
    • The app dynamically updates with the potion’s name, required ingredients, and a scroll-like design for approval or rejection.
  4. Elf-Friendly Data Publishing:
    • Post-approval or rejection, the elf’s are messaged on Teams and their SharePoint list is updated. Since house-elves have limited access to advanced systems, this ensures they have clear and simple instructions for ingredient management on a low-cost client.

🧙‍♂️ Badge Highlights: Chameleon, Glossy Pixels, Plug N’Play

1. Chameleon Badge: Responsive Design Across Screens

Our Canvas app adapts seamlessly to screens of all sizes, from mobile phones to desktop displays, ensuring Snape can approve potions whether he’s in the dungeons or pacing the Great Hall.

  • Screenshots:
    • Small-screen mobile view for Snape on the go.
    • Larger desktop display for potion reviews during classroom lectures.
  • The app’s responsive design ensures usability and consistency, providing an intuitive experience no matter the device.

2. Glossy Pixels Badge: A Visual Feast

The app’s aesthetic brings the wizarding world to life, making potion approvals as enchanting as the potions themselves:

  • Dynamic Imagery: A scroll-like interface hosts the potion’s details, while a vivid, animated potion bottle in the center represents the brewing request.
  • Harry Potter Themed Design: The lab background and parchment scrolls immerse users in the magic of Hogwarts, creating a cohesive visual theme.
  • Interactive Buttons: “Approve” and “Reject” buttons are styled like enchanted seals, completing the magical look and feel.

The app’s glossy finish transforms a standard approval system into an immersive, Harry Potter-themed experience that stands out among competitors.


3. Plug N’Play Badge: Seamless Workflows

Our app is built to integrate effortlessly into existing systems, demonstrating the true power of automation and low-code platforms:

  • Data Flow: The Power Automate flow connects FO, SMS notifications, Teams, SharePoint, and the app itself to ensure a smooth, automated workflow.
  • Elf Accessibility: The Teams messageing and SharePoint list ensures house-elves can view instructions without requiring access to complex systems.
  • Scalability: The app’s modular design allows new potions or additional workflows to be added with minimal effort, ensuring future readiness.

🐍 Why We Deserve These Badges

  • Chameleon Badge: The app’s responsiveness ensures a consistent, intuitive experience across devices, making it accessible for any user, anywhere.
  • Glossy Pixels Badge: The polished design, immersive visuals, and Harry Potter-themed aesthetics elevate the app beyond functional utility into an enchanting experience.
  • Plug N’Play Badge: With seamless integrations and a modular design, the app showcases the potential of low-code platforms for powering end-to-end workflows.

🔮 Potion-Perfect Innovation

From dynamic visuals to responsive functionality, our Canvas app brings a touch of magic to the hackathon. We humbly submit our case for the Chameleon, Glossy Pixels, and Plug N’Play badges and invite you to explore our journey as we continue to innovate at ACDC 2025: acdc.blog/category/cepheo25.

#ACDC2025 #ChameleonBadge #GlossyPixelsBadge #PlugNPlayBadge #PowerPotters #PotionApprovalMagic

Giving businesses a (Power) platform

Since many of the business owners of Diagon Alley spend most of the days on their feet in the store, they require a working solution that is easy to use and accessible wherever they might be. Because of this, we have decided to give them different possible solution within the Power Platform. Power Page for customer interaction, Power Automate to help reducing time demanding tasks and a data driven Power App that fit perfectly on a small Teams application on a store-owners cellphone.

Automating the office work

The daily-to-day operations of any business is to make sure there always is enough of their products, and making sure they always are stocked. To help the owners keep the supplies under control, we developed an Power Automate flow that would help them generate an Supplier Agreement contract in SharePoint.

The initial thought was to create a content type on a document library that would inherit metadata properties from the SharePoint columns and automatically fill inn the SharePoint property fields and thereby create a valid contract.

Unfortunately, this require that we edit the template locally, but we are working on computers with a safety policy that doesn’t allow us to connect to this fields when they are in another tenant. Still, we found a solution by downloading an empty document from the library, populate the fields quick parts connected to the document properties and re-upload this to the library. This allowed us to generate the agreement anyway, by using a Power Automate flow that populated the documents quick part fields.

Magic meets modern technology!

With delicious pizza fueling our spirits, we’re proudly claiming three badges! In this blog post, we’ll dive in with the same courage and determination Harry displayed in the Triwizard Tournament.

💣 Feature bombing

From the very beginning, our goal has been to unite multiple platforms into one seamless, feature-packed experience with a Weasleys’ twist. On our homepage alone, users can:

  • Get sorted into a house.
  • Chat with friends.
  • Check the calendar for Hogwarts classes and social events.
  • Get help from Hermione Bot for academics or planning.
  • Team up with Prank Bot to mastermind mischief.

These features don’t just exist – they’re alive and interactive, ensuring the experience is magical, dynamic, and fun. We’ve officially mastered the art of feature bombing (without overwhelming) and are ready to claim this badge!

🦎 Chameleon

Our app is built with adaptability at its core, ensuring a magical experience no matter what device you’re using. Whether it’s the compact elegance of an iPhone 13 or the expansive screen of an iPad, our interface scales perfectly without compromising usability or design.

Below, you can watch a short video showcasing the app’s responsiveness in action. Magical, right?

And last but certainly not least, the…

🥳 Remarkable team spirit

Of course, we have to share with the world how incredible this weekend has been!

Go check it out, and don’t forget to give Iselin a like! —> https://www.linkedin.com/feed/update/urn:li:ugcPost:7288637216099127297/
We have also been posting on Snapchat, Instagram and the Bouvet internal Slack channel! #sharingiscaring 😉

Now, we’re off for a swim! 🏊‍♀️✨

Low Code Potions are the best

Like a shapeshifter, Low Code apps need to adapt to any device. This app can do so with container and adding or removing flexible height when needed. Now with these potions we can look good on any device.

#Chameleon

Now we will create a Flow which only input is the user´s Full Name and it will return a score for each user based on a filtered table for the user. This score will classify each user as a “Ron”, a “Hagrid” or a “Snape” depending on their working hours.

A Ron is usually someone that doesn´t do much in their team and could try to participate more every now and then.

#GoWithTheFlow