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

Hi,

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 -> https://developer.microsoft.com/en-us/fabric#/get-started 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

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 -> https://github.com/ahamedfazil/react-redux-ts-sp/tree/feature/OFFICE-UI-FABRIC

Happy Coding

Ahamed