Category Archives: Office Clients

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!

Pluralsight course: Introducing Office UI Fabric

My Pluralsight course Introducing the Office UI Fabric went live yesterday.  It’s a quick hit (clocking in at just over an hour) intro to all of the goodness Fabric has to offer.  Here’s the Table of Contents:

  1. Introducing Office UI Fabric
  2. UI Elements
  3. Components
  4. Fabric Futures

If you’re new to Fabric, this is the place to start as it gives a great overview of the what and why of Fabric.

My next course (on track to be out in March or early April) – Developing with the Office UI Fabric – goes further into the how of Fabric, covering details on the components, working with Fabric in Angular, Building and Contributing to the project and much more.  Most of the Developing course is demos, just a handful of slides.

Office Fabric UI Snippets for VS Code

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

Update for Release 1.0: http://blog.mannsoftware.com/?p=2371

Release Date: Feb 26, 2016

Status: Beta

Provided By: Sector 43 Software (David Mann)

Details: s43.io/FabricSnippets

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

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


These snippets are a first go at making 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 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.

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

The following components are not currently supported by the snippets:

  • Facepile
  • People Picker
  • Persona
  • Persona Card

They’ll be coming in the next release.

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

Announcing Fabric Explorer

Update March 3, 2016: http://blog.mannsoftware.com/?p=2171


 

Microsoft released the Office UI Fabric in August of 2015.  It is essentially “Bootstrap for Office, Office 365 and SharePoint” plus more.  It allows you to quickly and easily build a user interface for your add-in or app that looks and feels like Office, SharePoint, or Office 365.

Fabric Explorer is a Chrome Extension I wrote which allows you to explore the UI Elements of Fabric  within a live web page right inside Chrome.  The extension is featured heavily in my upcoming Pluralsight course Introducing Office UI Fabric (coming out in the next week or so) and will also be used in part two – Developing with the Office UI Fabric (due out in March).

Here is a screenshot of Fabric:

2016-02-11_9-22-43

You can see a demo of it in action here: https://youtu.be/e8v-Zw1iRZs.  The extension itself is available in the Chrome Web Store: https://chrome.google.com/webstore/detail/fabric-explorer/iealmcjmkenoicmjpcebflbpcendnjnm .

I’ll probably update it with some additional functionality in the next few weeks, so feel free to provide suggestions in the Comments.  See updates at top of post.

Using Custom Templates in Office 2013 Preview

This is not as intuitive as it seems like it should be.  I hope it gets better in RTM.

Like many companies, Aptillon has a series of Word and PowerPoint templates that we use as the basis for many of our documents.  In previous versions of Office, simply placing the *.dotx or *.potx files into a specific folder (by default C:Users[UserName]AppDataRoamingMicrosoftTemplates would automagically make them show up as available templates (the UI varied slightly across Office products, but was pretty consistent overall.)

Apparently that changed in the Preview of Office 2013.  Placing the files in that location has no effect.  Instead, you need to configure each application to give it a Personal Template location.  You can do that by opening the application (PowerPoint in this example), clicking File|Options|Save and specifying a path for the Default personal templates location setting:

Any template files you place in that folder (in the above example, D:Templates) will now be available for use from File|New|Custom|Templates:

 

Word works similarly.  I didn’t try any of the other Office applications, but I would assume that they are similar.