Category Archives: Fabric

Fabric Snippets for VSCode Updated

Office Fabric UI Snippets for VS Code

Release Date: Dec 9, 2016

Version: 1.2.0*

Provided By: Sector 43 Software (David Mann)

Based on: Fabric JS release 1.2 (Nov 4, 2016)

Status: Stable


(* : Release numbers are now synchronized with the version of Fabric upon which they are based)

These snippets are intended to make the components from the Office UI Fabric project easier to use. In general, the HTML and Javascript is taken directly from the Office UI Fabric GitHub repository, with some tweaking.

All of the core snippets have a trigger that starts with uif so you can see what’s available by simply typing uif and looking at the Intellisense popup shown by VS Code. These snippets were originally developed for my Pluralsight course.

In some cases, the snippets are a combination of shortcut and learning tool. For example, some snippets contain both the markup and the JS code required by the component. Consider these a starting point – you will need to tweak the code to suit your needs, but the snippet at least gets everything you need onto the page.

Installation Instructions

  • Open the file VSCodeFabricSnippets.txt from the GitHub repo (direct link: https://raw.githubusercontent.com/Sector43/FabricSnippets/master/VSCodeFabricSnippets.txt
  • Select all of the contents and copy it to the clipboard
  • In VS Code, click File | Preferences | User Snippets and select HTML from the Language dropdown
  • Paste the contents from the GitHub file into the html.json file that is now open in VS Code
  • Save the html.json file and close it

The snippets are now available when you are editing an HTML file in VS Code.

Installation and usage is shown in the short video here: https://youtu.be/VsfUTwgNdgg Note that while this video is for the previous release of the snippets, installation and usage are essentially the same.

Known Issues

  • None

Generating Visual Studio Snippets

Paul Schaeflein contributed a small console application that will generate a Visual Studio .snippet file for each snippet in the VSCode snippet file. It doesn’t handle replaceable parameters (which are actually removed from the 1.2.0 release of the VSCode snippets anyway) but it gets most of the drudgery work done. The code is available in the SnippetConverter folder of the repo.

Reporting Bugs

Please report issues here: https://github.com/Sector43/FabricSnippets/issues

Fabric Explorer v2 Published

Version 2.0.1 of my free Chrome Extension which can help you to explore, learn and use the Office UI Fabric has been published to the Chrome webstore.  More details on Fabric Explorer and the companion project FabEx Playground are available on GitHub:

If you already have the extension installed, it should update itself to the new version within a few hours.  If not, you can always select the Developer Mode checkbox from the Chrome Extensions page (chrome://extensions/) and click the button to update extensions immediately.

With these complete, I’m hoping to get my updated Fabric course published to Pluralsight by early December.

Office UI Fabric Snippets 1.0 Release

Update for Release 1.2: http://blog.mannsoftware.com/?p=2491

Office Fabric UI Snippets for VS Code

Release Date: March 25, 2016

Status: 1.0

Provided By: Sector 43 Software (David Mann)

Project: https://github.com/Sector43/FabricSnippets

Based on: Fabric release 2.01 (Feb 5, 2016)


These snippets are intended to make the Office UI Fabric easier to use. In general, the HTML is taken directly from the Office UI Fabric GitHub repository, with some tweaking.

Snippets generally fall into one of two flavors:

  • Simple Components: these have no JavaScript elements and so the snippet just expands into the correct HTML to render the component
  • Complex Components: these aren’t really “complex” they simply have some JavaScript associated with them. In these cases, there is a snippet for the component and one for an example of the JavaScript required to make the component work.

All of the core snippets have a trigger that starts with uif- so you can see what’s available by simply typing uif- and looking at the Intellisense popup shown by VS Code. These snippets were originally developed for my Pluralsight course so there are a handful of snippets that I built for the demos in that course. I’ve left them in just in case they provide value, or if you’re following along with the course. Here’s the info on them:

  • htmlShell – Creates the shell of an HTML page with the proper doctype for Fabric
  • jsAddPeoplePickerResult – sample code for adding a result into the Peoplepicker
  • gridRefRow – adds a single grid row with each cell set to 1 column wide. Useful for building a grid below and having a reference to see how many columns each cell takes up
  • gridDemoStyle – some style overrides used to differentiate the sample grid in the course
  • gridDemoRows – inserts the sample markup for a three column grid used as a demo in the course
  • callOutPositioning – sample styles for positioning a callOut
  • callOutPositioningJS – sample code for showing the callout in the demo
  • spinnerDemo – sample markup for working with the Spinner component
  • commandBarDemo – sample code for adding a ContextualMenu to a CommandBar
  • progressDemo – sample code and markup for the Progress Indicator demo

Installation Instructions

For the time being, installation is manual. Once I’ve ironed out any bugs, I’ll make a true VS Code extension and deploy it to the Extension Gallery. At that point, I’ll also create a Visual Studio Extension and deploy that to the Visual Studio Gallery as well. If there is interest, I’ll convert the snippets to other editors – Sublime is one I’m considering, but am open to other suggestions as well.

To Install:

  • Open the file VSCodeFabricSnippets.txt from the GitHub repo (direct link:https://raw.githubusercontent.com/Sector43/FabricSnippets/master/VSCodeFabricSnippets.txt
  • Select all of the contents and copy it to the clipboard
  • In VS Code, click File | Preferences | User Snippets and select HTML from the Language dropdown
  • Paste the contents from the GitHub file into the html.json file that is now open in VS Code
  • Save the html.json file and close it

The snippets are now available when you are editing an HTML file in VS Code. (NOTE: Snippets in VS Code only seem to work if the HTML file is open as part of a folder, not if you just open a standalone file. I’m looking into whether this is really true, and if so whether it is by design or a bug)

Installation and usage is shown in the short video here: https://youtu.be/VsfUTwgNdgg

Known Issues

  • None

Next Steps

  • Updating for latest Fabric release (currently 2.2.0)
  • Creating Visual Studio snippets

Please report other issues here: https://github.com/Sector43/FabricSnippets/issues

Developing with Office UI Fabric Course is Live

The second and final course in my series on the Office UI Fabric is now live: http://s43.io/FabricCourse2.  Following on from the introduction in the first course, this course dives in to hands-on working with Fabric as a developer.  It is very light on slides and heavy on demos.

Here’s a look at the Table of Contents:

  1. Getting Started with Office UI Fabric (including an introduction to the Fabric Snippets)
  2. Handling Multiple Resolutions with the Responsive Grid
  3. Building Forms
  4. Improving User Interactions with Display Components
  5. Enhancing Layout and Navigation
  6. Building Fabric and Contributing to the Project
  7. Using Fabric in Angular
  8. Resources and Fabric Futures

Obviously, I’m a little biased, but I think the course covers everything you need to know as a developer to use Fabric in your own applications, sites and add-ins.  I cover every component in Fabric, showing the HTML and JavaScript necessary to make it work as well as a deep dive on all aspects of the responsive grid and then cover the Fabric project itself on GitHub and the community project ngOfficeUIFabric for using Fabric in Angular.

Enjoy!