At the intersection of business needs and technology, we’ve crafted a spellbinding solution designed to empower users and elevate experiences, all while embracing the magical potential of low-code platforms. This blog post details our final delivery that demonstrates how businesses can leverage Microsoft 365 and intelligent automation to achieve more with less, creating remarkable, operationally efficient solutions. Our journey in creating this solution involved a mixture of low-code charm and pro-code spells, ensuring the magic was real and impactful, from the student halls of Hogwarts to the highest business standards.

1. Low-Code Charms: Empowering the User with Simplicity

In our solution, we’ve harnessed the power of low-code platforms to create a seamless user experience that requires minimal coding knowledge but delivers maximum impact. Low-code charms are akin to spells that enable business users to perform tasks effortlessly with intuitive drag-and-drop functionality, significantly reducing development time.

Our Hub Site: Hogwarts is the heart of the solution, offering a simple yet powerful user interface. Here, users can interact with several low code charms that do everything from providing academic calendar details to weather updates. With a few clicks, users can access:

• Power App: Our Main application: Here you can get access to several features bundled together: DobbAI, train schedule departing from Hogwarts (fetched from Ruters API), the weather conditions, Room of Requirements, Great Hall canteen menu and more!
  

The “Next Departure” feature fetches data from the Ruter API, to inform the user of the next departure leaving Hogwarts (Holmenkollen).

In the Room of Requirements students can register to borrow equipment they might be missing such as Cauldrons, Quill and Ink, Broomsticks etc.

The user gets a notification once their booking has been accepted!

• Copilot AI: DobbAI — A chat interface that answers general queries and provides information on the academic calendar, food menu, information from the spell book and much more.

• Power BI Dashboard — Displaying house points and other relevant academic data in real-time, allowing users to track the progress of their school year.

These intuitive, low-code tools help users get their tasks done quickly, without needing specialized skills. The flexibility of Microsoft 365 allows us to create applications that bridge gaps between operational efficiency and user satisfaction. And with tools like Power Apps, Power BI, and CopilotStudio we blend simple yet effective low-code spellsto meet varied user needs.

• PowerFlow

This process creates a calendar invite that includes both you and the resource. Each item in the Room of Requirement is a registered Exchange resource that you can interact with to make appointments. Simply go to the Room of Requirement, select the resource, and wait for it to be added to your calendar.

2. Weaving a Spell: Bridging Customer Expectations with Operational Efficiency

The magic behind our solution lies in its ability to address the gap between user expectations and real-world business capabilities. We’ve crafted a solution that provides Hogwarts with the power to deliver exceptional user experiences while keeping costs low and operational burdens light.

Through intelligent automation and seamless integrations within Microsoft 365, we’ve created an experience that allows both students and staff to perform daily tasks faster, with less manual effort, and with better outcomes. DobbAI (powered by CopilotStudio) answers user questions around the clock, helping students find the information they need quickly, from lunch menus to train and class schedules.

Additionally, integrating with Viva Engage fosters an open communication platform where recent conversations are always visible, ensuring that everyone stays informed about the latest developments within the community.

3. Solving Real Business Problems with Microsoft 365

Microsoft 365, from SharePoint and Teams to Viva Engage, and Power BI, offers a powerful toolkit to tackle real-world challenges, particularly when you need to connect people, streamline processes, and enhance the overall user experience. In our solution, we’ve used SharePoint and Teams to create customized, collaborative environments for each “house” within Hogwarts.

• SharePoint Sites for Each House: Every house has its own dedicated SharePoint site and Teams space, allowing students to collaborate, share resources, and track their house’s progress in real-time. These house sites are connected to the Hub Site: Hogwarts, providing a central portal where global resources live, such as the academic calendar and house point tracker.

• Class Material Channels: Within each house’s Teams channel, students have access to their own class-specific resources. These channels include a personalized class schedule calendar (distinct from the global academic calendar on SharePoint), detailing house-specific events and lessons. Additionally, students can find relevant documents such as their OneNote spellbook (a digital textbook), along with other class materials. These tailored channels foster collaboration, helping students stay organized and engaged with their house-specific curriculum.

• Real-Time Tracking with Power BI: A key component of our solution is the Power BI dashboard, which consolidates house points, attendance, academic performance, and other key metrics in a real-time, visually appealing dashboard. This empowers students and staff to monitor progress and make data-driven decisions.

• Viva Engage: The integration of Viva Engage adds a social layer to the entire system, encouraging students and staff to interact with the latest announcements, feedback, and community-driven conversations. This brings an extra dimension of engagement, which is essential for creating a strong community vibe in a school setting.

---

4. Governance and ALM Lumos: Ensuring a Healthy Application Lifecycle

In any large-scale project, governance and application lifecycle management (ALM) are crucial to maintaining consistency, security, and overall project success. Even as budding wizards, we know that creating magic isn’t enough—it requires the right framework to support it long-term.

Our ALM Lumos spell focuses on the application’s health, from the development stage to ongoing operations. Here are the key principles and practices we’ve followed to ensure a successful and sustainable delivery:

• Power Platform ALM 

In our organization, we leverage Power Platform Application Lifecycle Management (ALM) to streamline and automate our development processes. By utilizing environment variables, we ensure that our applications can adapt to different environments seamlessly. This approach allows us to manage configurations such as connection strings and API keys efficiently, ensuring consistency and reducing manual errors. 

We have set up multiple environments, including development, testing, and production, to facilitate a smooth transition from development to deployment. Each environment is tailored to meet specific needs, ensuring that our applications are thoroughly tested before reaching the end-users. 

Our pipelines play a crucial role in this process. We use build and release pipelines in DevOps to manage source control and automate deployments. The build pipeline imports the source code into our repository and creates an artifact drop, while the release pipeline allows us to deploy previous versions if needed and target different environments. This setup ensures that our applications are always up-to-date and stable across all environments. 

By integrating these elements, we have created a robust and efficient ALM process that enhances our development workflow and ensures the reliability of our applications. 

• Naming Standards: From SharePoint site names to document libraries, we’ve adhered to strict naming conventions, making it easier for users to navigate and manage resources.
• Security and Privacy: With Microsoft 365’s built-in security and compliance features, we’ve ensured that user data, documents, and communications are protected at every level, offering peace of mind to all users.
• Data Loss Prevention (DLP) and Risk Analytics: To safeguard sensitive information, we’ve implemented Data Loss Prevention (DLP) policies to ensure that confidential data is not shared inappropriately. Along with this, we’ve activated analytics for risk detection, helping us identify potential vulnerabilities or areas where additional policies may be needed to protect the data and ensure compliance. Microsoft Purview also plays a key role in offering a comprehensive view of our data governance strategy, ensuring that data is handled responsibly and that potential risks are detected in real-time. This integration provides us with powerful tools for policy refinement and continuous improvement of our security and compliance practices.
• Application Monitoring: We’ve incorporated monitoring tools to track application performance, ensuring the seamless operation of our solution, whether it’s a Power App, SharePoint site, or the Copilot AI interface.
• OneFlow for Contracts: For our special integration with OneFlow, we’ve utilized it to enable contract signing for students wishing to enter the Triwizard Tournament. Using OneFlow ensures that all contracts are legally binding and securely handled within the solution.

Example of a DLP flow:

Our OneFlow for handling contract:

While much of the solution leverages low-code platforms, we’ve also included several pro-code elements to enhance functionality and customization.

5. Pro Code Elements: React SPFx Web Parts and Customizations

• React in SPFx Web Parts: Our Academic Calendar Web Part, built with React within SharePoint Framework (SPFx), is a perfect example of leveraging pro-code capabilities for a custom, interactive user experience. The calendar integrates seamlessly with SharePoint, displaying important school events and deadlines in a highly customizable format.

• Copilot AI: Powered by React and Microsoft Copilot, the DobbAI copilot allows students to interact with the system in a conversational way, providing real-time answers to questions and enhancing the overall user experience.

These pro-code parts elevate the solution’s functionality, giving us the flexibility to offer custom user interfaces, integrate with external systems, and deliver precise control over the user experience.

6. Fabric Fera Verto

To further enhance our solution, we incorporated additional data and objects, ensuring a comprehensive and immersive experience. One of the highlights of this project is the PowerBI dashboard we developed, which visualizes the statistics of the house points. This allows us to present metadata in a visually appealing format, moving beyond mere text and bringing the data to life.

xoxo from The Team Who Must Not Be Named

In a world of cutting-edge technology and modern SharePoint capabilities, sometimes it’s fun—and rewarding—to take a step back in time. For our quest to earn the coveted Retro Tech Badge, we decided to embrace some retro magic by implementing a nostalgic throwback: an early 2000s-style personality quiz!

The result? A delightful HTML-based quiz embedded in SharePoint that answers the all-important question: “What Jelly Bean Flavor Are You?”

Why Retro?

As part of our journey to explore deprecated or legacy technologies, we wanted to celebrate the quirks of simpler times while showing off some classic techniques that still work today. Think back to those vibrant, personality-packed quizzes from the early 2000s—quirky, colorful, and full of charm. By creating one of these in SharePoint, we combined a blast from the past with modern-day SharePoint flexibility.

Code:

<!DOCTYPE html>
<html>
<head>
  <title>What Jelly Bean Flavor Are You?</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; margin: 20px; background-color: #fef5e7; color: #5c3d2e;">
  <h1><font size="5">What Jelly Bean Flavor Are You?</font></h1>
  <p>Answer the questions to discover your inner jelly bean flavor!</p>

  <table align="center" style="margin-top: 20px;">
    <tr>
      <td>
        <p><b>1. What is your favorite time of day?</b></p>
        <input type="radio" name="q1" value="Coconut"> Morning<br>
        <input type="radio" name="q1" value="Watermelon"> Afternoon<br>
        <input type="radio" name="q1" value="Chocolate"> Evening<br>
        <input type="radio" name="q1" value="Cinnamon"> Late Night<br>
      </td>
    </tr>
    <tr>
      <td>
        <p><b>2. What is your go-to weekend activity?</b></p>
        <input type="radio" name="q2" value="Cinnamon"> Party with friends<br>
        <input type="radio" name="q2" value="Chocolate"> Movie night<br>
        <input type="radio" name="q2" value="Coconut"> Hiking or outdoors<br>
        <input type="radio" name="q2" value="Watermelon"> Relaxing at home<br>
      </td>
    </tr>
    <tr>
      <td>
        <p><b>3. Pick a color:</b></p>
        <input type="radio" name="q3" value="Watermelon"> Green<br>
        <input type="radio" name="q3" value="Coconut"> White<br>
        <input type="radio" name="q3" value="Cinnamon"> Red<br>
        <input type="radio" name="q3" value="Chocolate"> Brown<br>
      </td>
    </tr>
  </table>

  <button style="padding: 10px 20px; margin-top: 20px; background-color: #ffcc00; color: #5c3d2e; border: none; cursor: pointer;" onclick="showResult()">Find Out!</button>

  <p id="result" style="margin-top: 30px; font-weight: bold;"></p>

  <script>
    function showResult() {
      var answers = {};
      for (var i = 1; i <= 3; i++) {
        var radios = document.getElementsByName('q' + i);
        for (var j = 0; j < radios.length; j++) {
          if (radios[j].checked) {
            var flavor = radios[j].value;
            answers[flavor] = (answers[flavor] || 0) + 1;
          }
        }
      }

      var topFlavor = null;
      var maxCount = 0;
      for (var flavor in answers) {
        if (answers[flavor] > maxCount) {
          topFlavor = flavor;
          maxCount = answers[flavor];
        }
      }

      var resultDiv = document.getElementById('result');
      if (topFlavor) {
        resultDiv.innerHTML = '<font size="4">You are <b>' + topFlavor + '</b>! Sweet and full of flavor!</font>';
      } else {
        resultDiv.innerHTML = '<font size="4">Please answer all the questions to get your flavor!</font>';
      }
    }
  </script>
</body>
</html>

What Makes This Retro?

1. Use of <font> Tags: Instead of modern CSS, the <font> tag is used for styling, which has been deprecated for years.
2. Inline Styles: Styling is applied directly to elements instead of through a <style> block or external stylesheet.
3. Table-Based Layout: Questions are wrapped in a <table> for structure, which was a common practice in the early days of web development before <div>-based layouts became standard.
4. Direct DOM Manipulation: Instead of modern querySelector, it uses document.getElementsByName for gathering inputs.
5. Global JavaScript Functions: Functions like showResult are globally scoped, which was common before modern practices like modules or IIFEs (Immediately Invoked Function Expressions).

Badge-Claim Justification

• The code directly incorporates deprecated HTML elements and practices.
• The use of inline styles and table-based layout aligns with retro web development techniques.
• It adds charm and nostalgia to our SharePoint implementation while meeting the criteria for retro tech.

On popular demand, the Feature Bombing badge is back, and we’ve gone all in! Our SharePoint homepage has been transformed into a one-stop hub, where we’ve crammed in six amazing user features—all seamlessly integrated and designed to make sense. Here’s what we’ve packed in:

1. QuickLinks to Houses’ Common Rooms
   Need to jump into your House’s Common Room in Teams? No problem! With a single click, you’re transported to your House’s virtual hub.
2. Power App: This all-in-one application brings a variety of magical features right to your fingertips. Access essential tools for your daily adventures at Hogwarts and beyond:
3. DobbAI (Copilot)
   Our very own AI copilot, DobbAI, is here to assist with insights, suggestions, and to make your life easier—think of it as a virtual helper at your fingertips.
4. A React Calendar
   A fully interactive calendar ensures you stay on top of meetings, events, and deadlines. No more “oops, I forgot” moments!
5. Power BI Report
   Keeping data-driven decisions in the spotlight, we’ve integrated a Power BI report to provide at-a-glance insights right on the homepage.
6. Viva Engage Feed
   Stay socially connected with the Viva Engage feed. It’s your source for updates, posts, and conversations to keep the team spirit alive.
7. News WebPart
   Never miss a beat with the latest news updates dynamically displayed to keep everyone informed.

This isn’t just a feature dump—it’s a thoughtfully designed hub where every tool has a purpose, and everything fits together like a well-oiled machine. Whether it’s collaboration, planning, insights, or communication, our homepage ensures it’s all just a click away.

With six fully functional and relevant features packed into one screen, we believe we’ve gone above and beyond to earn the coveted Feature Bombing badge. And hey, we made sure it all makes sense!

Here is what it looks like:

Building robust and reliable applications is more than just writing code—it’s about ensuring that the entire development and deployment lifecycle is efficient, repeatable, and error-free. In this post, we’ll share how we applied ACDC principles while developing and deploying an SPFx web part.

Core Tech Stack

• SPFx: Framework for creating client-side web parts in SharePoint.
• React: For building the user interface.
• TypeScript: For type-safe development.
• Azure DevOps: For CI/CD pipeline implementation.

Applying Development Best Practices

Version Control with Git

To ensure collaboration and proper tracking of changes, We used a Git workflow that included:

• Feature Branching: Each feature or bug fix was developed on its own branch.
• Test and Main Branches
• Pull Requests (PRs): Changes reviewed through PRs to ensure quality and encourage peer review.
• Main Branch Protections: Enforced policies such as requiring PR reviews and passing CI checks before merging to main.

Code Quality Checks

Code quality was enforced through:

• ESLint and Prettier: Automated linting and formatting checks.
• TypeScript: Leveraged TypeScript to catch type-related errors during development.
• React Project Structure:

assets/: For static assets such as images or styles. This structured approach improves maintainability, readability, and scalability of the codebase.

components/: For reusable UI components.

services/: For logic interacting with APIs or SharePoint data.

utils/: For utility functions.

Overview of the Pipeline

CI/CD Pipeline: Automating Build and Release

The CI/CD pipeline was set up in Azure DevOps and included the following stages:

1. Build Stage

• Trigger: The pipeline runs automatically on every push to main.
• Tasks:
  • Install dependencies: npm install
  • Build the SPFx package: gulp bundle --ship
  • Package the solution: gulp package-solution --ship
  • Linting: Ensures no build-breaking errors.
  • Copy files from a source folder to a target folder
  • Publish build artifacts to Azure Pipelines

Our YAML for the main branch:

# Node.js
# Build a general Node.js project with npm.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '18.20.0'
  displayName: 'Install Node.js'

- task: Npm@1
  inputs:
    command: 'install'
    workingDir: 'SPFX.quidditchCal'

- task: gulp@0
  displayName: 'gulp bundle'
  inputs:
    gulpFile: SPFX.quidditchCal/gulpfile.js
    targets: bundle
    arguments: '--ship' 

- task: gulp@0
  inputs:
    gulpFile: 'SPFX.quidditchCal/gulpfile.js'
    targets: 'package-solution'
    arguments: '--ship'
    gulpjs: 'node_modules/gulp/bin/gulp.js'
    enableCodeCoverage: false

- task: CopyFiles@2
  displayName: 'Copy Files to: drop'
  inputs:
    Contents: '**/solution/*.sppkg'
    TargetFolder: '$(Build.ArtifactStagingDirectory)/drop'
    OverWrite: true
    flattenFolders: true

- task: PublishBuildArtifacts@1
  displayName: 'Publish Artifact: ClientsideSolutions'
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/drop'
    ArtifactName: ClientsideSolutions

2. Release Stage

• Artifacts: The SPFx .sppkg file is published as a pipeline artifact.
• Deployment Tasks:
  • Automatically upload the .sppkg file to the SharePoint App Catalog using a PowerShell script.

Different Stages depending on branch and environment:

Key ACDC Principles in Action

Automation

• Every build and deployment step is automated, reducing the chances of human error.
• Triggers ensure that builds happen on every push to main, keeping the solution production-ready.

Continuous Testing

• Static Code Analysis:
• TypeScript for type checking.
• ESLint to check for linting issues: consistent code quality adhering to standards.

Continuous Delivery and Deployment

• Artifacts are built and ready for deployment in every run.
• Automatic deployment to the SharePoint App Catalog ensures faster delivery to end-users.