Simple app layout with Office UI Fabric React

Office UI Fabric is a fairly new front-end framework developed by Microsoft to create web applications. At the moment it has components for: vanilla JavaScript, React, AngularJS, and iOS using Swift. I have been playing with it for a few weeks and I find it quite interesting. Especially if you are developing an application for an enterprise, and want to give your app a more “officy” (?) look. On companies that rely a lot on Microsoft Office solutions, this framework can help make your app more approachable to the end users.

Take into account that this framework is still in a “pre-v1” state, as defined on its github repo. So, some modification on the current code base is expected. Nonetheless, I have found it a very powerful tool, and I recommend you try it. The project is very active, and the maintainers are working very hard to reach 1.0. I spotted two minor bugs while playing withe the framework that were fixed in mere days.

Intro

The point of this article is to show how to combine the framework components with some basic CSS to build a simple app layout. I’ll do it by creating a new demo application, and show with some code example how to add them to your code to start working. If you want to check out the official documentation, you can find it here, and if you want to check the example code on this article go to this GitHub repo.

If you want to follow along, clone this repo tag to start working on a blank project: 01-blank-project. After cloning you should have a new blank “create-react-app” application with some minor modifications to the files inside the src folder. If you’ve never heard of “create-react-app” to build React applications you should check it out.

Setup

The first thing we need to do, after bootstrapping the project, is to install the Office UI Fabric React framework into our project using npm.

npm --save install office-ui-fabric-react

And we need to add a link tag on our index.html to import the ui fabric core styles, which includes the icons, animations, grid, and some other style rules.

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css">

That’s it. We can now start playing with it. If you want to run a quick check to see if it’s working just replace the contents of your Appcomponent with the following gist:

The end result should be similar to what you got on the following image:

Dialog and Button component example.

Layout

Office UI Fabric gives us a lot of cool components we can use to build our applications but we are still going to need some additional markup and css rules to position the components. We can do this in many ways, one of which could be to use the classes provided by the Office UI Fabric Grid. It works very similar to how the Bootstrap grid works (or any other grid framework for that matter).

Grid solutions usually do the job but sometimes you end up with a lot of extra markup that clutter your layout. It would be best if we could define the layout of each component ourselves.

For this project I want my layout to be composed of:

  • a navigation bar at the top of the page.
  • a sidebar menu.
  • a main content area.
  • and a footer at the end of the page.

There is one extra condition: the footer must always be at the end of the page, event if the content is not enough to push it down.

As I said before, we can accomplish this in a lot of ways, but I want the markup to be as clean as possible. Here is the base code of my App component which will hold all the rest of the UI elements.

If you check your page after making this chances to the App component you’ll be greeted to a blank page. Which is normal since we don’t have any content or styles to fill eachdiv . Let’s address that by crating some css rules to paint each div and fill them with an empty space so they can fill a portion of the page. We will remove this code after the main layout rules are written.

You can add those styles to the index.css file or on any other. Just remember to import them into the project. Here is the result.

Screenshot of the app component after adding the new css rules.

Apart for the incredible bad colour choices, now we can start working with our layout, and see how our modifications impact it.

Flexbox

To make each part look how we want, we’ll use the Flexbox Layout (Flexible box) module. flex is a fairly recent feature of css, that tries to solve some of the problems that arise while trying to position elements on the page. As its name implies, it’s meant to work with flexible layouts, even on those whose size is unknown.

This is not meant to be a tutorial on how to use Flexbox, we are just going to use it to fill our needs. For more information on it I suggest you read Chris Coyier’s article: A Complete Guide to Flexbox.

This are the rules we need to add to format our layout:

You’ll find some comments accompanying the css rules to learn a little bit of what each of them do. I found that is very simple to create layouts using Flexbox. If you take away all the comments the amount of lines we wrote were very few, and we didn’t need to modify our markup to position each element to were we wanted it.

Layout after Flexbox rules

Now we can start adding our Office UI components. I’ll use the examples found on the documentation for simplicity, though my examples we’ll be written in JavaScript instead of TypeScript. Here is the code for each of the components:

SidebarMenu

A good thing about this framework is that it exposes the interfaces for all its components. This can prove very useful during development to check if the props you are passing around align with what the component expects. Another property that most of these components share is that we can modify how they are built and work just by modifying an object. In this case the groups object. We can add, remove, and modify how the menu behaves, just interacting with this object, in any way we like.

NavBar

Just as we did when creating the basic layout, we can use Flexbox to align the Office UI components to position them how we want. Here is the css necessary to centre the logo text and the SerchBox inside theNavBar main div.

Footer

As with many other components library, Office UI offers some basic components like Link and Label that offer a basic API over some common elements. For example, the Link component has a focus() prop that you can use to set the focus on it.

Content

This component may look a little complex but it is not. It should probably be divided into smaller components but I wanted to show how the components provided by Office UI Fabric work together. Take into account that it is lacking some functionality to make it work as expected. It is meant just as an example.

First, we are using the Breadcrumb component as a navigator, and as the title of the content. Then we have a menu component, meant to interact with the selection list under it. Using the MarqueeSelection and the Selection component we produce an element that allows us to select multiple components just by dragging a selection box on top of them.

Wrap up

If you are looking for a UI framework for React, or for a suite of components to make your next application, I suggest you take a look at Office UI Fabric React. All the components are very well made and are aligned with the style of all the most recent Microsoft products. The documentation is excellent and the project is in heavy development at the moment to reach a stable 1.0 release.

I hope you take with you some ideas on how to work with this framework and how to use it on your applications. Again, you can find all the code for this project at this Github repo.

Please share any comment you have and feel free to correct any mistake I may have made. If you want to get in touch with me you can find me in twitter under the handle @guzmonne.

Thanks for reading!