Two SharePoint Lists, One Interactive App—Built with Copilo

Can Copilot build an HTML app that brings together two connected SharePoint lists? Yes—and this video demonstrates exactly that. Using a training catalogue and a participant registration list, I create an interactive app that helps employees explore training offers, view registered participants, and start their own registration.

The key ingredient is a lookup column connecting the two lists. Copilot uses this relationship to bring the right information together in one interface. With the Smart HTML application page Integrator web part, the finished app becomes part of an existing SharePoint page.

A practical example: Employee Training and Registration

Many companies manage internal training in SharePoint. One list holds the available courses, while another records who has registered for each session. This is also the starting point for the demonstration.

SharePoint list	Purpose
Training offers	Stores course titles, descriptions, and start and end dates.
Training registrations	Stores participants and links each registration to its training.

A lookup column acts as the connection: each registration refers to an existing training offer. One course can therefore have several associated registrations, and the app can display the participants belonging to that particular course.

The Highlight: Copilot works with two connected lists

In this demonstration, Copilot successfully creates an HTML app that uses both SharePoint lists and their lookup relationship. The result combines training information with the corresponding participant records in a single dashboard.

The process starts in Copilot Chat in SharePoint. I explain what each list contains, describe their connection, and ask for an interactive overview with expandable participant panels.

A prompt for this scenario could look like this:

Create an interactive HTML dashboard using my Training Offers and Training Registrations lists. The registrations list contains a lookup column linking each registration to a training offer. Show all training offers and add a collapsed participant panel to each one. When the panel opens, load the participants assigned to that training using the lookup relationship.

Use your actual list and column names when describing your own scenario. Clearly explaining the relationship gives Copilot the context it needs to connect the information correctly.

From a training overview to an interactive experience

The initial dashboard provides the foundation. With additional prompts, I extend the app step by step—without manually writing the HTML or JavaScript shown in the demonstration.

• Browse training offers: Employees see the available courses presented as training cards.
• View registered participants: An expandable panel displays the people associated with the selected training through the lookup connection.
• Explore course details: An information icon opens an overlay with additional information, including the training description and schedule.
• Start a registration: A “Register now” button opens the SharePoint registration form, where the employee can enter their information.

Employees can discover a course, check its details, see who has already registered, and move directly to the registration form—all starting from the same overview.

Embed the App with the Smart HTML application page Integrator

The Smart HTML application page Integrator web part enables users to embed HTML apps into existing SharePoint pages. This makes the generated training app easy to place within an intranet page employees already visit.

The video demonstrates a straightforward setup:

1. Open the SharePoint page in edit mode.
2. Add the Smart HTML application page Integrator web part.
3. Open the web part properties and browse for the generated HTML file.
4. Select the file from the SharePoint document library and apply the settings.
5. Save the page draft and check the embedded app.

The training dashboard now appears directly within the page. Its detail overlays, participant panels, and registration buttons remain accessible from the embedded app.

This is what makes the web part particularly useful: the HTML app can sit alongside introductory text, instructions, news, and other SharePoint page content.

Build, Test, and Refine through Conversation

The video also shows an important part of working with Copilot: building an app is an iterative process. The first registration button does not work as expected. After I describe the problem, Copilot adjusts the navigation, and the button opens the registration form successfully.

Later, adding the information overlay disrupts the participant display. Another follow-up prompt leads to a correction, and the participants appear against the right courses again.

Test the complete app after each change. Open the details, check the participant panels, and try the registration button. The demonstration shows how plain-language feedback can help refine the result, while practical testing confirms that everything still works together.

What could you build with your connected lists?

Training management is one example. The same idea could inspire apps for events and attendees, projects and tasks, or customers and their related requests.

Watch the video to see Copilot turn two SharePoint lists connected by a lookup into an interactive training app—and see how the Smart HTML application page Integrator brings it into a SharePoint page.