Microsoft Stitches an Office UI Fabric for Add-In Makers

No more ugly, off-putting Office add-ins. A new framework helps developers maintain a look and feel that is consistent with the new Office user experience.


Few things in personal computing are more jarring than when add-on software foists unfamiliar and cumbersome UI elements and workflows on users, bringing productivity to an unceremonious halt. Microsoft wants to help Office developers get in step with the rest of the company's productivity software ecosystem with the release of the Office UI Fabric framework on GitHub.

"Office UI Fabric is a responsive, mobile-first, front-end framework for developers, designed to make it simple to quickly create web experiences using the Office Design Language," explained Jeremy Thake, technical product manager for Microsoft Office 365, in a company blog post. Microsoft's own developers rely on the framework, he went on to reveal, and it "is used internally on products within Office 365—such as our suite branding,,, Delve and the Video Portal."

Partner members of the company's Preview Program are currently putting Office UI Fabric through its paces, and their commercialized wares will soon sport a new look, Thake said. "You will start to see the add-ins in the Office Store updated to use Office UI Fabric, which will increase the consistency of add-ins you use to increase your productivity day-to-day."

Developers with Web experience will have a leg up in terms of adapting their Office add-ins.

"It is very straight forward to integrate Office UI Fabric into a web application," noted Thake. "Simply add some JavaScript into your web application and reference the CSS file from the CDN in your HTML file." An 18-line template published within the blog post illustrates "the minimum recommended HTML structure" for an add-in using the framework.

Developers can also use Office UI Fabric to target various platforms and device classes. "It is designed to work across Office Clients where Office Add-ins are supported," said Thake. "Right now that is the Windows desktop, web browser, Mac desktop and iOS on iPad." And while the framework can also be used for SharePoint add-ins and Websites launched from App Launcher, he warned that it hasn't yet been optimized for those use cases.

Office UI Fabric includes two controls, or features that are commonly shared between Office apps, the People Picker Control and Detailed Persona Card. "There are more controls in the pipeline, including the Office 365 Web App Chrome Control for use with standalone web applications launched from the App Launcher and a File Picker control for use with OneDrive for Business and SharePoint files in the user interface," Thake pledged.

Finally, the company announced a plan to make certain that the supplied documentation, complete with example visuals, remains in sync with new releases on GitHub. "This is a new initiative for engineering, and the results so far have really shown the value in this collaborative approach between our internal teams (program managers, developers and technical writers) and our external communities," Thake said.

Pedro Hernandez

Pedro Hernandez

Pedro Hernandez is a contributor to eWEEK and the IT Business Edge Network, the network for technology professionals. Previously, he served as a managing editor for the network of...