Andrew Connell

Sharing my SharePoint Hosted Apps as a SPA UX Templates

So, you've decided you want to build a single page app (SPA) as a SharePoint-Hosted App. One question will have to address is how you want to implement the user experience of your app. There are plenty of options... some are tempted to use the awesome libraries jQuery UI or Bootstrap to name just two of those. However I do prefer to make the UX of my SPA to match the SharePoint UX as much as I can when it's a SharePoint-Hosted App. I prefer this approach because my users are already coming from SharePoint so I can take advantage of the fact my users are already familiar with SharePoint's UX and thus, I don't have to train them on how to use the quick launch for my navigation, or the header contains the title of the page as a breadcrumb, or list and detail pages work the same way. To support this, I've created a couple snippets of HTML that leverage the markup & CSS classes that Microsoft used in creating the UX. These are the same templates I used to create my recently published course in Pluralsight... My upcoming new Pluralsight course, Building SharePoint Apps as Single Page...

So, you’ve decided you want to build a single page app (SPA) as a SharePoint-Hosted App. One question will have to address is how you want to implement the user experience of your app. There are plenty of options… some are tempted to use the awesome libraries jQuery UI or Bootstrap to name just two of those.

However I do prefer to make the UX of my SPA to match the SharePoint UX as much as I can when it’s a SharePoint-Hosted App. I prefer this approach because my users are already coming from SharePoint so I can take advantage of the fact my users are already familiar with SharePoint’s UX and thus, I don’t have to train them on how to use the quick launch for my navigation, or the header contains the title of the page as a breadcrumb, or list and detail pages work the same way.

To support this, I’ve created a couple snippets of HTML that leverage the markup & CSS classes that Microsoft used in creating the UX. These are the same templates I used to create my recently published course in Pluralsight…

My upcoming new Pluralsight course, Building SharePoint Apps as Single Page Apps with AngularJS , demonstrates how to create SharePoint Hosted Apps as Single Page Apps and uses these templates.

Here are two screenshots from a list & detail view:

I’ve posted all my templates as public Gists so you can grab them and use them in your projects. There’s no magic here… it’s all just copy-paste from the SharePoint markup & CSS:

Here’s what one of them looks like, the Working On It snippet:

Andrew Connell
Developer & Chief Course Artisan, Voitanos LLC. | Microsoft MVP
Written by Andrew Connell

Andrew Connell is a web developer with a focus on Microsoft Azure & Microsoft 365. He’s received Microsoft’s MVP award every year since 2005 and has helped thousands of developers through the various courses he’s authored & taught. Andrew’s the founder of Voitanos and is dedicated to delivering industry-leading on-demand video training to professional developers. He lives with his wife & two kids in Florida.