Our helpful proactive teams bot uses multiple APIs to make magic happen.
The two most obvious ones are Microsoft Graph API (for user details) and Microsoft Teams API (for the bot code itself)
We also implement the Azure Maps API to render a helpful map to pinpoint where a report was generated, and most importantly we have the Dataverse Web API to create Opportunities in CRM:
->
->
—
Our bot’s Adaptive Card not only saves users time, it delivers a clean, modern, and engaging experience out of the box. And since it runs inside Microsoft Teams, it automatically adapts to every device and screen size. That leaves us free to focus on digging for gold (or dirt) instead of fighting with breakpoints.
Our dashboard and QR code gathering interfaces were both built into the same modern React SPA web app, hosted as an Azure Static Web App, with a dedicated backend-for-frontend (Azure Functions) to provide an added layer or security with regards to accessing our data in Dataverse. The backend uses the Dataverse Web API through tokens retrieved using a Managed Identity, all being abstracted from the frontend itself.
The frontend uses SWR for data-fetching with caching, revalidation, and request deduplication, making sure of performance and stability.
Web app routing is handled with React Router, efficiently utilizing the browser’s own History API for snappy navigation.
Best practices for code structure (and source control) secures maintainability and allows for efficient collaboration.
Using Tailwind for CSS styling and a mobile-first approach, a holistic and performant UX provides responsiveness and cross-device support:
Mobile QR code gathering interfaceMobile version of the dashboard interface
if (putOnMap) { STATE.map = […zones]; updateMapCount(); if (STATE.activeTab === “map”) renderMap(); }
return zones; // if you want to use it elsewhere }
In our Minecraft solution, we leverage client-side JavaScript to manage the creation and review of user-defined zones and building applications—all with a focus on automation, feedback, and interactive mapping.
Instead of performing repetitive, manual tasks, users interact with a dynamic interface that lets them:
Apply for building rights
Define protected or Not Allowed zones
See approvals, pending, and rejections in real time
In our solution, the Minecraft bot is not just a background process or a server-side script. It is a dedicated client entity that connects to the Minecraft server and operates as its own participant in the game world.
The bot exists as an independent entity and acts as an execution proxy for user intent. The player remains the decision-maker, while the bot performs repetitive, low-value tasks such as mining, gathering resources, crafting, and collecting materials. Instead of requiring the user to manually execute these tasks, intent is expressed once and execution is delegated to the bot.
From a user experience perspective, this directly maps to common enterprise UX goals:
reducing manual labor,
automating repetitive work
allowing users to focus on higher-level decisions.
Translated into Minecraft, the player continues to interact with the world and make choices, while the bot handles the repetitive execution work in parallel.
(Yes this is our little BOT friend)
Technically, the bot behaves like a client rather than a backend component. It connects to the Minecraft server as its own entity, authenticates and joins the world, receives intent derived from ERP-triggered production orders, executes actions locally in the game environment, and reports state and completion status back to the system. This makes it comparable to non-human clients such as background agents, RPA bots, or headless clients in enterprise architectures.
The bot owns execution, local state, and responsiveness on the client side. This clear separation between intent (defined by the user and upstream systems) and execution (handled by the bot) results in a maintainable and predictable architecture, while significantly improving the user experience by removing repetitive, low-value work.
We do not drag-and-drop this portal! We pro-code it. Every template. Every style. Every animation. Bootstrap 5, modern CSS, PAC CLI workflow, version controlled like a real product (pulling it down locally for better control as well).
The front-end is built for performance and maintainability. CSS Variables for theming, change `–cccp-red` once, the whole site updates. BEM-style naming for scalable components. SVG data URIs for the golden star pattern and noise texture, so that we are not burning HTTP requests on background images. Responsive design from mobile using Bootstrap’s grid and custom Flexbox where it matters.
Dashboard quota cards pull live Dataverse data through Liquid templates, but the presentation is pure client-side Bootstrap. Progress bars. Badges. Color-coded top borders, amber for wheat, green for potatoes, orange for carrots. All styled with CSS variables for consistency. The search? Bootstrap modal with keyboard accessibility and proper focus management. No dropdown that overlaps the banner.
As mentioned, we used PAC CLI to download the portal, coded it locally in VS Code with all our extensions and dev tools, then pushed it back to Power Pages. That workflow gets you pixel-perfect layouts, semantic HTML, proper ARIA labels, and a UI that scales.
The result: a portal that looks clean at 2am, loads fast, and doesn’t make the committee squint to read production quotas. Modern client-side architecture. Maintainable code. Great UX.
#ClientSideSalsa
The image above showcases responsive design for mobile phones.
Crafting equipment in Minecraft lets you turn basic resources into useful tools, weapons, and armor. Better equipment helps you gather materials faster, survive dangerous mobs, and explore harder areas more safely and efficiently.
To allow customer to order the appropriate equipment that should be printed, we created a PCF control that allow to choose an item from hundreds of different.
Let’s see how it works:
We have a Recipe table where the customer can create a request to build the item.
If we go to the form, we have two fields Name and Description. For the Name field we activated the PCF control, so the form looks like at the picture:
Click on the search button and the modal dialog will be open with a more than thousand items to choose. Here we have possibility to choose the type of item and search by the name or description.
And when customer choose the item, the name, description and small image are set to the fields on the Recipe Model-driven app form.
Using external API:
PCF control receives all Minecraft items thorough public Vercel api:
services/MineCraftItems.service.ts – logic and data
styles/MinecraftItemPicker.styles.ts – styles for component
types/Minecraft.types.ts – data models/interfaces
Performance
The control cache external data in a dedicated service and reuse it across renders and dialog openings.
Images are lazy loaded reducing initial load time and avoiding UI blocking.
Maintainability
The project follows a separation of responsibilities: PCF lifecycle (index.ts), UI components, services, styles, and domain types are isolated in dedicated folders.
External API access and business logic are encapsulated in a service layer, that allows to make future changes easier or replacements with a low risk.
The structure closely aligns with Microsoft PCF sample conventions, making the codebase easy to understand for new developers.
In addition to our API, the nr. 1 howler service also has a website. It is built using React Router, with an impeccable developer-experience with hot-reloading, react hooks, sass, and more!
Using GitHub Secrets and Workflows ensures secure handling of sensitive information through encryption and access control. As an example from the github-actions yml-file: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_THANKFUL_HILL_0CC449203 }}
Greetings, wizarding developers! ✨ At PowerPotters of Cepheo, we’ve mastered the art of separating concerns, ensuring our solution is as efficient as it is elegant. By shifting complex logic to the backend with X++ and creating responsive, user-friendly frontends, we’ve built a scalable, intuitive system for potion production. This approach ensures developers can specialize, users get a seamless experience, and the system can grow effortlessly.
Backend Enchantment with X++
Our backend services, crafted with X++, perform the heavy lifting, allowing the frontend to remain clean and lightweight.
Core Actions in X++:
Actions such as creating production orders, updating inventory, and calculating material consumption are handled entirely in the backend.
Example: The X++ method in the image dynamically creates production orders by:
Validating inputs such as company, item ID, and quantity.
Retrieving item details from InventTable and generating BOM and route IDs.
Logging errors with structured handling (AdEngEntityActionLogTable), ensuring traceability and stability.
This structured logic enables efficient processing while adhering to ALM principles.
ALM Practices in X++:
Consistent naming conventions, such as AdEngEntityActionLogTable, align with our Ad-prefixed ALM standards, ensuring clarity and maintainability.
Robust error handling captures and logs any issues, reducing debugging time and ensuring system resilience.
Frontend Elegance with Modern Frameworks
With the backend performing heavy computations, the frontend remains focused on delivering a smooth user experience.
Dynamic Interfaces:
Lightweight, responsive Canvas Apps provide users with intuitive tools for tasks like approving production orders and managing potion ingredients.
Frontends dynamically fetch data processed by the X++ backend, ensuring real-time updates without overloading the system.
User-Centric Design:
Potion masters interact with simple, visually engaging interfaces. For example:
The material consumption tool provides visual ingredient ratios, powered by backend X++ calculations.
Approval workflows are streamlined with embedded apps directly in D365FO.
The Perfect Salsa: Backend Power, Frontend Grace
By combining backend processing in X++ with responsive frontend frameworks, we’ve created a system that:
Separates Concerns: Developers can specialize in frontend or backend tasks without overlap, improving efficiency.
Scales Effortlessly: Backend X++ services and lightweight frontends can grow independently, ensuring long-term scalability.
Delivers an Exceptional User Experience: Users benefit from intuitive interfaces powered by robust backend logic.
Why This Earns Client Side Salsa
Our approach exemplifies the principles of Client Side Salsa:
Backend Magic: Heavy computations and validations, such as production order creation, are performed in X++, ensuring a lightweight frontend.
Frontend Simplicity: User-friendly Canvas Apps focus on delivering a clean and intuitive experience.
Scalable and Maintainable: ALM standards and modular design keep the system robust and ready for future enhancements.
Dancing Towards Innovation
With backend power driving the magic and frontend charm engaging users, we’ve created a potion production system that’s as delightful as a perfectly executed salsa dance. We humbly submit our case for the Client Side Salsa Badge and invite you to explore the elegance of our solution: acdc.blog/category/cepheo25.
🗺️ 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.
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.” 🧙✨
In the fast-paced and exhilarating world of hackathons, few events shine as brightly as the ACDC Hackathon. This year, participants from all corners of the tech community gathered with one goal in mind: to push the boundaries of innovation and creativity. Amidst the coding sprints and problem-solving marathons, a unique and thrilling aspect stood out – the quest for badges and achievements.
Collecting badges in the ACDC Hackathon isn’t just about a sense of accomplishment; it’s a testament to the skills, perseverance, and collaborative spirit of the participants. From early morning brainstorming sessions to late-night debugging frenzies, every moment was a step closer to earning those coveted badges that symbolize mastery and ingenuity.
Join us as we delve into the journey of collecting badges and achievements in the ACDC Hackathon. We will explore the different challenges faced by the participants, the strategies they employed, and the unforgettable moments that defined their path to success. Whether you’re a seasoned hacker or a curious onlooker, this blog post will give you an insider’s view of what it takes to excel in one of the most dynamic and rewarding hackathons around.
When entering the HogWorkPlace Power App for the first time, you’ll be greeted by a landing page that seamlessly integrates with your house. Using Azure AD groups, we represent each house in vivid detail.
But wait, what’s that in the corner? It’s DobbAI, your personal AI house-elf assistant, ready to cater to your every need. DobbAI is a Copilot Studio agent, imbued with the charm and wit of a real house-elf. Its knowledge is deeply integrated with the rest of the intranet housed on SharePoint. Curious about tonight’s dinner? Simply ask DobbAI to fetch the menu from a SharePoint list.
For us, SharePoint isn’t just a repository; it’s the lifeblood of our data, securely storing and managing it alongside connectors to tables in Dataverse for seamless solution engagement. When you interact with DobbAI, you’ll authenticate using the robust Azure Active Directory V2 method. The AI is then published to a custom website channel, providing an iframe that seamlessly integrates with our React PCF component, all meticulously deployed to the power app solution.
But wait! There’s more to this dance we call “client-side salsa”. Within SharePoint, you’ll find an embedded Viva Engage and SPFx web part that displays the Hogwarts academic calendar, keeping you updated on both school events and social engagements. And lastly a Daily Proft newsfeed. All available via the canvas app, or just ask Dobby for directions 😉
