Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


 
 

Create Office 365 Apps Using Office UI Fabric and React

Posted by Sandeep Chanda on Aug 30, 2016

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, integrating seamlessly to provide the unified Office experience. The fabric's components are designed for the modern responsive UI, allowing 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 (
        <div>
            <DocumentCard>
                <DocumentCardPreview
                    previewImages={[
                        {
                            previewImageSrc: require('./logo.svg'),
                            width: 318,
                            height: 196,
                            accentColor: '#ce4b1f'
                        }
                    ]}
                    />
                <DocumentCardTitle title='React Inside a Card'/>
                <DocumentCardActivity
                    activity='Created Aug 27, 2016'
                    people={
                        [
                            { name: 'John Doe' }
                        ]
                    }
                    />
            </DocumentCard>
        </div>
    );
  }
}

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:

<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.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.

TAGS:

Office 365, Office apps, React


Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date