How to use Office UI fabric in react-redux application for better UI

Ahamed Fazil Buhari
Senior Developer
September 14, 2018
Rate this article
[Total: 0    Average: 0/5]


When we are creating custom form especially when you use this form in any Microsoft technology site like SharePoint, then it’s pretty much important to take care of the UI which should match with your site. Happily, Microsoft has given lot more ready-made components with good design which matches with Microsoft standards, please visit Office UI Fabric to get to know more.

Please follow the installation instruction from here -> I skip the installation steps since it’s already provided by Microsoft. We will look more into implementation phase.

Let’s say, I have simple form with the following fields

First Name<texbox>
Last Name<textbox>
About Me<Multiple line of text>

I have already created and added necessary package for the react-redux-typescript, please follow my previous article to know more about basics How To Use Redux In React (Typescript) – Adding Important Packages and React Redux Typescript Folder And File Structure For Developers. I will provide link to my github repository with full solution at the end of the article.

In this react application, I done the concept of spinner till you get response from the server, form design using office ui fabric layouts and its components.

First and foremost we need a state to capture all the data, so I created an interface for state called IAppState

 export interface IAppState {
   isInitialized: boolean;
   isFetched: boolean;
   firstName: string;
   lastName: string;
   aboutMe: string;

And I specified this in main Store.

 export default interface IStore {
     app: IAppState;
     user: IUserState;


Once the store is updated, we need to create an Action and Reducer for this new state. Once this whole redux architecture is done, we can go ahead with design using UI fabric. In the below screenshot you can see in which order I updated the files


Please make sure sp-rest-proxy is running to call SharePoint from your dev environment,


Simple form with UI fabric components


Once I enter the values, our redux store will be updated. Here, on submit button click I just show the entered values in the right panel for easy understanding.


Please refer full code (working condition) from github (branch name: feature/OFFICE-UI-FABRIC) for better understanding ->

Happy Coding


Category : SharePoint, SPFx

Author Info

Ahamed Fazil Buhari
Senior Developer
Rate this article
[Total: 0    Average: 0/5]
Ahamed is a Senior Developer and he has very good experience in the field of Microsoft Technologies, especially SharePoint 2013, 2016 and O365, Azure, ASP.NET, SQL Server, IIS and client more

Leave a comment