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


Ahamed Fazil Buhari
Senior Developer
Published On :   14 Sep 2018
Visit Count
Today :  5    Total :   296



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

First Name

<texbox>

Last Name

<textbox>

About Me

<Multiple line of text>

Save

<button>

Cancel

<button>

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

clip_image002

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

clip_image004

Simple form with UI fabric components

clip_image006

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.

clip_image008

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

Categories