SharePoint 7 min read

Your SharePoint List Can Be an App: Build a Multi-Tab HTML View

One HTML view, four tabs, summary cards and a chart you can click, all sitting on the list itself. How I designed the list, briefed Copilot in SharePoint and refined the view one change at a time.

Key takeaways

  • A SharePoint HTML list view can hold several tabs, each showing the same list a different way, with summary cards that stay visible on every tab.
  • Copilot in SharePoint builds the view from a plain-English prompt. Name the view and its reader, say which rows count, then give each tab one job and the columns it shows.
  • A view can only show what's in your columns, so design the columns, including calculated columns, before you write the prompt.
  • In my build, the click-to-filter chart didn't work the first time. Telling Copilot plainly that it hadn't applied, then restating the request, fixed it.
  • At the time of recording you can't edit or add items inside an HTML view. Edit and Add buttons open the standard SharePoint form in a new tab.

Your SharePoint list can now act like a mini app. One HTML view, built by Copilot in SharePoint from a plain-English prompt, can hold several tabs over the same data, summary cards across the top, charts you can click and buttons that open the item form, all sitting on the list itself.

The one I built sits on a Software Renewals list of 42 contracts (sample data), for the head of IT running a monthly renewal review with finance. Its four cards show live annual spend of $3,116,190, 21 renewals in the next 90 days, 6 auto-renew contracts already past their notice deadline and $369,355 a year in unused licences. Ordinarily, answering those four questions meant four filtered views, or an export to Excel every time someone asked.

Before you start

  • Copilot in SharePoint. You build these views through Copilot in SharePoint, so the person building one needs a Microsoft 365 Copilot licence.
  • The feature in your tenant. HTML views are still rolling out. If Dashboard isn’t under Add view, it hasn’t reached your tenant yet.
  • The basics. If you haven’t built an HTML view before, start with my guide to SharePoint HTML list views, which covers both ways in and five simpler scenarios.

Your metadata is now your user interface

For years, information architecture was the plumbing nobody saw. HTML views change that, because a view can only show what’s in your columns. If renewal date, owner and status aren’t columns, there’s no tab, no card and no chart for them.

So I designed the list around the four tabs before Copilot saw anything.

Tab The question it answers Columns it needs
Next 90 Days What renews soon, and have we decided? Renewal Date, Notice Deadline, Renewal Decision, Business Owner
Spend by Vendor Where does the money go? Vendor, Annual Cost, Projected Renewal Cost, Category, Department
Auto-Renew Risk What will roll over on its own? Auto-Renew, Notice Deadline, Renewal Decision
Unused Seats What are we paying for and not using? Licence Model, Licences Purchased, Licences Assigned, Unused Licence Cost

Three decisions made the biggest difference.

Calculate the figures in the list, not in the prompt. Five columns are calculated, so the view reads a number instead of working it out:

  • Notice Deadline: =[Renewal Date]-[Notice Period (Days)]
  • Unused Licences: =IF(ISBLANK([Licences Purchased]),"",[Licences Purchased]-[Licences Assigned])
  • Cost per Licence: =IF([Licences Purchased]>0,[Annual Cost]/[Licences Purchased],"")
  • Unused Licence Cost: =IF([Licences Purchased]>0,([Licences Purchased]-[Licences Assigned])*[Annual Cost]/[Licences Purchased],"")
  • Projected Renewal Cost: =[Annual Cost]*(1+[Expected Uplift (%)]/100)

The one exception is days remaining. SharePoint calculated columns can’t reliably use today’s date, so there’s no “days until renewal” column. The prompt asks the view to work it out live from Renewal Date and Notice Deadline instead.

Use choice columns for anything you’ll group by. Vendor, Category, Department and Renewal Decision are all choices. Spend by Vendor only adds up properly if every Microsoft contract says Microsoft, and free text won’t give you that.

Keep it to one list. Every tab reads the same rows. A contract gets updated once, and the cards and the tabs can’t disagree with each other.

If you run lists like this already, have a look at which questions people keep asking about them, then check whether the answer is sitting in a column. If it’s locked inside documents, autofill columns can pull it out first.

How do you brief Copilot for a view with tabs?

My prompt followed the same structure from top to bottom:

  1. Name the view and the person it’s for. “Create an HTML dashboard view called Renewal Review for the head of IT, who runs a monthly software renewal review with finance.”
  2. Say which rows count. Only contracts where Contract Status isn’t Cancelled or Expired.
  3. Put the summary up top. Four cards that stay visible on every tab, each named with what it counts.
  4. Give each tab one job. For each tab: which rows, the sort order, the columns to show, and what to highlight. On Auto-Renew Risk, any contract marked Cancel, Replace or Renew and Reduce whose notice deadline has already passed is flagged in red, because that decision can’t take effect before it renews.
  5. Set the rules for every tab. A search box, an Edit link on each row, Australian dollars with no decimal places, dates like 16 Nov 2026, and charts in plain HTML and CSS with no external libraries.

Paste it into Copilot in SharePoint on the list. The first version came back with the four cards, four tabs and the data already wired up.

Refine the view one change at a time

You don’t need a one-shot prompt. I took the styling step by step, with one change per follow-up: pill-shaped tabs, then my two brand colours as hex codes, then a count on each tab label, then the colours on the summary cards, then click-to-filter on the vendor chart, then an Add Contract button. The finished tabs read Next 90 Days (21), Spend by Vendor (40), Auto-Renew Risk (17) and Unused Seats (35).

Going one change at a time made a regression easy to catch. Applying the brand colours took the pill shape off the tabs. Colour was the only thing I’d asked for, so I knew exactly what had caused it, and one prompt asking for fully rounded pills put them back.

What to do when a change doesn’t apply

The click-to-filter request didn’t work the first time. After a refresh, clicking a bar did nothing.

I didn’t rewrite the prompt. I told Copilot “That hasn’t applied” and restated what I wanted. Its reply started “Sorry, I hadn’t applied the click behaviour”, and the next version had hover effects on the bars and filtered the table to the vendor I clicked. That fix left the bars blank, so the next prompt said so, and Copilot restored the fills with the bars still clickable.

Two short prompts, both fixed. No starting again.

Make it the default view

Open the view menu and choose Set current view as default. When I reopened the Software Renewals list from Site contents, the Renewal Review view loaded first.

You can’t edit or add items inside an HTML view at the time of recording. It’s a limitation right now, and it may change. You still get the functionality, though: the Edit links and the Add Contract button open the standard SharePoint form in a new tab. Keep a standard view such as All Items for anyone whose job is updating rows all day.

Which lists suit a multi-tab view?

Any list people ask several different questions of:

  • Risk register: a heat map, risks by owner, overdue actions.
  • Asset register: by location, warranties expiring, who has what.
  • Onboarding: by new starter, by week, what’s running late.
  • Contracts and licences: by renewal date, by vendor, seats nobody’s using.

For a list that needs simpler, single-purpose views, my first HTML list views guide has five worked scenarios.

Frequently asked questions

Can the summary cards stay visible on every tab? Yes. Ask for it in the prompt. My prompt asked for four cards that stay visible on every tab, and in the finished view they sit above the tab pills whichever tab is open.

Can an HTML view show days remaining from today’s date? Yes. My view works out days to renewal and days to the notice deadline when it loads, and labels the data as live with day counts recalculated when opened. Do it in the view rather than a calculated column, which can’t reliably use today’s date.

Can I add new items from an HTML view? Not inside the view yet. Ask Copilot for a button that opens the new item form, as I did with Add Contract. It opens the standard SharePoint new item form in a new tab,.

Do I need a brand skill to apply my colours? No. I gave Copilot two hex codes in a follow-up prompt and it applied them through the view, then to the summary cards in a second prompt. In the video I mention a brand skill as another way to do it, though I didn’t use one here.

Get these in your inbox. Three emails a week.

Practical thinking on organising your information and getting real work out of AI. Subscribers get the free SharePoint Skill course to start.