devxlogo

Create Office 365 Apps Using Office UI Fabric and React

Create Office 365 Apps Using Office UI Fabric and React

Multiple teams within Microsoft are working aggressively to create open source frameworks and the Office team is not far behind. They have already created an open-source toolkit called the Office UI Fabric that helps you easily create Office 365 Apps or Office Add-ins. They integrate seamlessly to provide a unified Office experience. The fabric’s components are designed for the modern responsive UI. This allows you to apply the Office Design Language to your own Web and mobile form factors.

One key aspect of the fabric is its support for UI toolkits that you are familiar with such as Node, Angular, and React. The Office UI Fabric React provides React-based components that you can use to create an experience for your Office 365 app. The idea is to let developers leverage their favorite tool in creating Office Apps.

Getting Started

Open Visual Studio (make sure you have Node.js v4.x.x and Node Tools for Visual Studio installed) and create a blank Node.js Web application.

After the basic template is created, right-click on your project and click Open Command Prompt to launch the Node command console. In the Node command console, first install the React components using the command:

npm install –g create-react-app

followed by:

create-react-app card-demo

If there are no errors in creating the app, navigate to the app folder using the command cd card-demo and then start the node app using the npm start command. The following figure illustrates that your React app is now running successfully:

Next, run the following command to install the Office UI Fabric components-

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

Now switch back to your Visual Studio solution and you will see a new folder created. Include the folder and its components in your project.

Open the App.js file and replace the contents with the following code:

import React, { Component } from 'react';import logo from './logo.svg';import './App.css';import {    DocumentCard,    DocumentCardPreview,    DocumentCardTitle,    DocumentCardActivity} from 'office-ui-fabric-react/lib/DocumentCard';class App extends Component {  render() {    return (

); }}export default App;

Notice that we have imported the Document Card UI components from the Office UI Fabric and replaced the contents of the render function with a sample Document Card that displays the React logo inside the card. Save the changes. Now open the index.html file and include a reference to the Office UI Fabric CSS:

Save changes. Switch to the Node console and run npm start. You will see the browser launched with the following card displayed.

While the toolkit is still in preview, it reflects how easy it is to create Office 365 apps using the language of your choice.

devxblackblue

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

About Our Journalist