Office Fabric Jumpstarts Your Add-in Efforts
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
Over the last 5 years (give or take a year), Microsoft has invested heavily in a new extensibility that places Office squarely within the wide-open world of modern development. And to make life easier for everyone (developers and users alike), Microsoft has tools to help you build good-looking and solid user interfaces. This tool is Office UI Fabric, 'the official front-end framework for building experiences…seamlessly into Office and Office 365'.
What Is Office UI Fabric?
Like the official description above says, it's a front-end framework that allows you to build UIs for your Office Web-based add-ins. By using Fabric, you are using the same UI elements & controls used by the Office team. Thus, your add-in looks like a natural part of the Office UI instead of some beastly Franken-UI that can be typical of developer designs.
Said another way, Fabric is the official design language of the Office UI. It is the formal definition of colors, styles, shapes, layouts, typography, etc.
Why does it exist (what problem does it solve?)
I try to view things from Microsoft's point of view. They don't just spend money just because, they try to be strategic with it. Thus, as I see it, Fabric solves two problems:
1. Poor User Experiences
Developers tend to focus on the functionality of the applications. Design is functional at best and all-too-often, the user needs a shot of whiskey and high-level of patience to figure out how to use the application. Fabric solves the problem of the add-in being an ugly freak-of-nature. Properly implemented and followed by a developer, Fabric goes a long way to making the add-in easy to use (but there are no guarantees).
2. Developer Adoption of the Add-in Model
By releasing a framework that makes it easy to build a good-looking UI, developers can build a useful add-in without the negative UI comments from their user base.
Think about this, how many times have you built something cool and powerful only to have the users turn their nose and complain about the UI? You built something useful but the users hate it because it's ugly. Sure, they missed the forests for the trees but maybe, so did you?
Fabric makes it easy to build a custom user interface (and experience) in Office and SharePoint. You can spend the majority of your cycles on the actual business rules — the things that really matter!
What's Included with Fabric?
As I mentioned earlier, Fabric provides UI elements and components. These include items in the following categories:
- Color schemes
In addition, Fabric has a few frameworks to match your needs:
- Fabric Core — includes only the base styles (icons, fonts, colors) used by Microsoft. Core does not include controls.
- Fabric React — If you are using React, use this version of the Fabric controls.
- Fabric Angular — If you are using Angular, you will want to use this community-driven project that provides angular-based, Fabric controls.
- Fabric iOS — Contains both styling and components in native Swift. It also contains some extras components unique to iOS.
How to Get Going Today
The best thing to do is to read Microsoft's documentation on MSDN. Learn how to reference Fabric in your project and how to make use of its assets. I recommend the following articles:
- Use Office UI Fabric 2.6.1 in Office Add-ins
- Use Office UI Fabric JS in Office Add-ins
- Use Office UI Fabric React in Office Add-ins
These should whet your appetite. Good luck out there!