in SharePoint, SharePoint 2013

Using Office UI Fabric in SharePoint Add-ins

Microsoft officially announced Office UI Fabric this week. In case if you are wondering what Office UI Fabric is:

The front-end framework for building experiences for Office and Office 365.

Fabric is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It’s easy to get up and running with Fabric—whether you’re creating a new Office experience from scratch or adding new features to an existing one.

It is now easy to build your SharePoint add-ins, or any web application for that case and apply the beautiful Office UI styles, typography and icons. The Office UI Fabric with SharePoint Add-ins FAQ covers some guidance/questions around applying Fabric styles in SharePoint add-ins.

I took the liberty to apply Office UI Fabric styles to the default ASP.NET MVC template in Visual Studio which is also used as the default MVC web application project for your provider-hosted SharePoint add-in in Visual Studio. The result is beautiful!

SharePoint Add-in with Office UI Fabric

SharePoint Add-in with Office UI Fabric

The project is available in OfficeDev GitHub repo:

You can use this template as a starter project to build your SharePoint add-ins. The project uses both Office UI Fabric styles and components, namely the NavBar and Button components.

How to Run this Sample

To run this sample, you need:

  1. Visual Studio 2015
  2. Office 365 Developer Subscription

Step 1: Clone or download this repository

From your Git Shell or command line:

git clone https://github.com/OfficeDev/FabricSharePointAddin-Template.git

Step 2: Build the Project

  1. Open the project in Visual Studio 2015
  2. Simply Build the project to restore NuGet packages
  3. In the Solution Explorer, click on FabricSharePointAddin.SharePoint project
    1. In the Properties Window, scroll to reveal the Site URL property and enter your SharePoint developer site URL:

      Site URL Property

      Site URL Property

For those who are wondering how the layout is structured, here is a picture that shows the layout plan:

SharePoint Add-in Layout

SharePoint Add-in Layout

Step 3: Build and Debug your web application

Now you are ready for a test run. Hit F5 to test your add-in.

 

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.

  1. Hi,
    I am fairly new to Visual Studio development and was trying to get this app deployed to my DEV site. My sharepoint admin has created a DEV site with sideloading permissions for Apps and i use that as the Site URL when deploying the apps from Visual Studio 2015. I am running into issues with the MVC Web Apps when the IIS server is configured for localhost and i don’t have any IIS server running on my machine. When i change the server to an External Host and give the URL of my DEV site, it deploys but throws a 404 as it tries to re-direct to my localhost and obviously cannot connect.
    How do i get around to this issue?
    Thanks,
    Vimal