What If Your SharePoint Pages Could Do More?

While hosting HTML files inside a SharePoint document library is nothing new, the ability to render interactive data within SharePoint HTML pages now allows you to bring static information alive for users.

Static vs. Dynamic

Every web page is fundamentally constructed from HTML markup, which your browser renders as a web page. By itself, HTML is fairly “static,” meaning it doesn’t change. Generally speaking, “what you see is what you get.” HTML becomes much more interactive when it’s used with JavaScript. Two ways JavaScript can bring pages to life include:

  • Allowing a page to load data from external sources. (For example, when you load a map in Google Maps and drag your mouse to a new location, JavaScript is used behind the scenes to pull in a new fragment of the map to display.)
  • Allowing users to interact with elements on the page, such as “when a user clicks this button, make that image appear” or “add the number from this text box to the number in that dropdown menu.”

Unfortunately, due to the security risks of allowing JavaScript to execute inside SharePoint, some years ago, Microsoft removed the ability to add JavaScript to modern SharePoint pages using “out of the box” editing tools. This left HTML pages hosted in SharePoint as static files, greatly limiting their value.

Renewed Interest in HTML Pages

Until now, the primary purpose of creating an HTML page was to deliver content through a website. HTML pages were generally generated using sophisticated tools or created by experienced web developers. However, with the proliferation of AI tools, it’s now very easy to use natural language to create an HTML web page. Additionally, HTML is an easy data source for AI engines to read and consume. We are now seeing renewed interest in using HTML beyond traditional websites.

JavaScript in a Sandbox

Due to this new need to host HTML pages in SharePoint, Microsoft has now provided a way to use a limited set of JavaScript commands within SharePoint-hosted HTML pages. Each HTML page has its own “sandbox” environment, where JavaScript commands that only reference the current page can be executed and any commands that might access external data sources will be blocked from execution.

This means that you generally cannot create full-fledged dashboards that connect to external data sources and access real-time information as you would with a tool like Power BI or a traditional, dynamically coded website. However, it is possible to create self-contained web pages with the data needed for an interactive experience, moving beyond static information to content that users can explore.

There are a number of exceptions to this blanket rule, primarily around referencing files stored in Microsoft 365, such as Excel files, SharePoint lists, and videos. See the online help documentation for a detailed list of which external data can and cannot be referenced.

Use Cases

So what are examples of when this could be useful?

  • Interactive Onboarding Guides:
    Help new hires explore a first-week roadmap, reveal tips, and check off tasks as they go. Include the guidance directly in the page so they can work through it without connecting to another system.
  • Policy Decision Trees:
    Turn a lengthy policy into a guided series of questions, such as which purchasing process applies to a particular request. Reveal the relevant guidance based on the user’s answers.
  • Training Quizzes and Practice Activities:
    Let employees test their knowledge with multiple-choice questions, matching exercises, or realistic scenarios. Provide immediate feedback and explanations without needing to submit answers to a training system.
  • Project Planning Calculators:
    Help teams estimate effort or resource needs by entering values such as the number of tasks and expected hours per task. Calculate results immediately using assumptions included on the page.
  • Filterable Resource Directories:
    Make a curated collection of resources easier to explore with keyword search and filters for topic, department, or experience level. Include the resource information in the page rather than retrieving it from a live directory.
  • Interactive Reports and Data Snapshots:
    Turn a fixed set of project or survey data into an interactive report with filters, sortable tables, and expandable details. Clearly display the snapshot date so readers know the information is not updating in real time.
  • Service or Product Comparison Tools:
    Help employees compare approved tools, service packages, or equipment options side by side. Let them select their needs and highlight suitable options using criteria built into the page.

For an example of a self-contained web page that could easily be hosted in an HTML page in SharePoint, check out this Copilot Cowork Cost Estimator. This tool uses formulas that are self-contained, but the page itself is highly interactive.

Example: Interactive Chart

For our first example, we will take this very basic Excel spreadsheet, which lists available Microsoft courses and their categories.

We upload the spreadsheet to a SharePoint library and enter the following prompt into Copilot in SharePoint:

“Create a new HTML page based on the number of courses listed in this spreadsheet. Create a bar chart for the number of classes for each category. When you click on each bar (category), show a filtered list of those classes below the bar chart.”

Copilot creates a new page with the requested chart and filtering functionality.

When a user clicks a category bar, the list displays only the courses in that category.

Example: Flowchart

In this example, we start with a basic Visio diagram.


We convert it to a page using a simple prompt: “Create an interactive HTML page based on this Visio Chart.”

Users can click Exchange, SharePoint, or Teams to display information about that workload.

Editing Your HTML

You can use Copilot to generate your HTML and edit it directly in the browser using SharePoint’s built-in Code Editor.

Uploading HTML

Although this article focuses on using Copilot to create HTML pages in SharePoint, you can also use another AI code generator to build an HTML page and upload it to SharePoint like any other document.

Conclusion

Your next useful tool might start with a prompt, not a development project. Whether it’s a quiz, a calculator, or a guide that helps someone find the right answer, an interactive HTML page can turn information people read into something they use. Start small, test the results, and build within SharePoint’s limits. Don’t just publish information; put it to work.

Learn More

To learn more, check out the announcement at SharePoint HTML Pages with Copilot: Create, Upload, Edit and Publish in the Tech Community, as well as the online documentation at Create, upload, edit, and publish HTML pages in SharePoint in Microsoft Support.