From Prompt to Message Board: Build a SharePoint message app in under 5 Minutes!

A live message board, automatic updates, and interactive details—all created with Copilot without writing a single line of code.

What if your next intranet improvement started with a simple description? In this video, I demonstrate how to build a custom notification and message board app with Copilot in under five minutes. Then I embed it into an existing SharePoint page using the Smart HTML application page Integrator web part.

The result is a compact, interactive board that keeps company messages visible exactly where employees already work.

HTML apps now feel at home in SharePoint

SharePoint can now render raw HTML pages directly within the SharePoint chrome, without distracting document-preview controls. Here, “chrome” means the familiar SharePoint surroundings, such as the site header and navigation. Your HTML content becomes part of that experience, with the focus on the app itself.

This opens up useful possibilities for custom dashboards, information panels, and interactive message boards. Copilot helps create the experience from a plain-language description, while SharePoint provides the familiar place to use it.

To bring an HTML app into a page that already contains other content, my Smart HTML application page Integrator web part provides the next step: embedding the app alongside your existing text, images, links, and web parts.

Start with a simple SharePoint list

The message board gets its content from a SharePoint list. In the demonstration, I create a list called Message Demo with four straightforward fields:

  • Title: A short headline for the message.
  • Message: The full announcement or notification text.
  • More information: A link to additional details.
  • Category: A choice such as Info, Warning, or Critical.

I then ask Copilot to generate 20 sample entries, giving us realistic company announcements to work with. This makes it easy to see how the finished board handles different messages before adding real content.

Describe the app—Copilot builds it 😎

The custom message board app is built with Copilot in under five minutes, without any coding skills. The key is a clear prompt describing both what people should see and how the app should behave.

A prompt following the approach shown in the video could look like this:

Create a live HTML app showing the 10 newest messages from the Message Demo list. Choose a suitable icon for each message based on its category. Display the icon, creation date, and title in each row. When someone hovers over a message, show a detail panel with all its information, including the more-information link. Refresh the messages automatically every 10 seconds and use the SharePoint site's theme.

Copilot generates the app and provides a link to open it. In the demonstration, the first result already includes the requested layout, category icons, and interactive detail panel.

You define the experience in everyday language. Copilot handles creating the HTML app.

A compact board with useful details

The generated app combines an easy-to-scan overview with information available on demand:

  • The 10 latest messages keep recent announcements in view.
  • Category-based icons help readers distinguish information, warnings, and critical notices.
  • Dates and headlines make the list quick to scan.
  • Hover details reveal the full message without leaving the page.
  • Automatic refresh every 10 seconds keeps the display connected to changes in the source list.

Content owners maintain messages in the SharePoint list, and the app presents them to readers in a more engaging format.

Embed it with the Smart HTML application page Integrator

The Smart HTML application page Integrator web part enables users to embed HTML apps directly into existing SharePoint pages. This brings the message board into the context of an intranet homepage, department page, or project workspace.

In the video, I add it to a page that already contains plenty of other content:

  1. Open the SharePoint page in edit mode.
  2. Add the Smart HTML application page Integrator web part to the desired section.
  3. Open its properties and choose Browse for file.
  4. Select the generated HTML app from the document library.
  5. Apply the selection and save the page.

The message board appears within the existing layout, and its hover details continue to work. Employees can read announcements alongside the other information on the page.

Change the list and watch the board update

To test the live connection, I edit a message title in the source list. The embedded board picks up the change during its automatic refresh cycle, without manually reloading the SharePoint page.

That makes this approach useful for maintenance notices, HR reminders, office announcements, and project updates. Editors update the list; readers see the refreshed information on their familiar SharePoint page.

To follow the demonstration, you need access to the relevant Copilot and HTML capabilities in SharePoint, permission to create the list and edit the page, and the custom integrator web part available on your site. Microsoft documents the native HTML page setup and Copilot authoring requirements in its HTML pages guide.

Watch the video to see the complete workflow: create the list, let Copilot build the app in under five minutes, and embed it with the Smart HTML application page Integrator.



Kommentare

Beliebte Posts aus diesem Blog

SPFx: Be prepared for the Content Security Policy (CSP) in SharePoint Online

Power Automate: Abrufen von SharePoint Listenelementen mit ODATA-Filter

SharePoint Online: Optimale Bildgrößen für Seiten (Teil 1)