This article is the first in a series that will show you how to build responsive single page AngularJS applications in Office 365. In this installment, we’ll introduce the employee directory application (figure 1) we’re building and help you get your development environment setup.
Employee Directories are a common feature found on almost every intranet and often the experience of People Search in SharePoint or even finding people within Delve just isn’t right. The application will have a similar user experience to Delve to maintain a level of consistency with the Office 365 platform and the application will leverage People Search to provide a full-featured search experience complete with refinements, custom profile attributes and more. Things are always evolving in Office 365, but I hope this example will inspire you to start coding today!
Figure 1: In this series, you’ll learn how to create a fully responsive Employee Directory using Office 365 and AngularJS. Click here to watch the employee directory sample video
Getting ready to start
Traditionally, SharePoint development was performed on the server side in ASP.NET using the Farm Solution framework. Solutions extended the capabilities of the SharePoint by running .NET code on the same servers that hosted SharePoint sharing the memory and CPU without a safety net. Shortcomings in a developer’s code translated into performance issues or outages for the entire SharePoint environment. Farm solution development is not scalable and is not supported in Office 365.
If you’re a longtime SharePoint user, you may know that SharePoint forces files with the extension .htm to be downloaded. One can’t just host a bunch of HTML files in a document library and link to those files due to a setting known as strict file handing that forces the browser to download files of certain types including .htm. How then can we host our AngularJS apps inside a document library?
Figure 2: Delve is an .aspx page in the user’s My Site.
Let’s examine some of the new Microsoft experiences such as Delve that are written as SPAs. The URL for Delve is https://<tenantname>-my.sharepoint.com/_layouts/15/me.aspx (figure 2). One interesting thing that pops out is that Delve is hosted as a part of a user’s My Site. You should also notice that this single page application is hosted with an .aspx extension. ASP.NET web forms pages that make up the majority of the SharePoint user experience all are hosted with the .aspx extension and are therefore browseable. By renaming our HTML pages to have an .aspx extension, SharePoint will happily serve our application from any document library.
It’s really important to me that we can develop efficiently and not have a lot of hassle getting our application into Office 365. File upload does one file at a time, drag and drop doesn’t support uploading folders, and SharePoint Designer doesn’t qualify as a modern editing experience.
Figure 3: Add a document library to SharePoint and let OneDrive sync the files to your PC
OneDrive for Business sync agent enables two-way replication between SharePoint document libraries and your PC. After creating a document library that will host your application, simply click the Sync button (figure 3) and let OneDrive create a local copy of your library. As you add files and folders locally, OneDrive will automatically sync your files up to Office 365 within a few seconds. Once you have a local copy, you can really use any editor you like.
My editor of choice is Visual Studio Code (figure 4), which you can download at no cost from https://code.visualstudio.com and is available on Linux, Mac OSX or Windows. Once you’ve installed Visual Studio Code, from the File menu choose Open Folder and select the folder that OneDrive sync created on your local file system. Code will show the directory structures on the left and enable a rapid development cycle as OneDrive automatically publishes changes back to SharePoint.
From an application lifecycle management perspective this makes dev, test and prod scenarios easy as you are just syncing up a set of files. It’s easy to have one library serving as development and other libraries hosting more mature versions of your application.
Figure 4: Viewing the Contoso team site in Visual Studio Code.
In this article, we covered why AnguarJS applications can be a great choice for development of user experiences on Office 365 services. We discussed how we can leverage a SharePoint document library for hosting and how OneDrive for Business sync and Visual Studio Code can enable a highly productive work environment. In the next article, we’ll build the shell of our application and integrate the Office 365 suite bar.