SharePoint Online - Custom Applications & Forms with React

A - OBJECTIVE: to highlight several important notes required for custom developments at SharePoint Online using React: 

1. Useful third-party products: Nintex Forms (limited) and Nintex Workflows for Office 365. 

2. Useful framework & libraries: 

• React (with the concept of components, which can be rendered as a control, a section, or a whole webpart).
• State management with Mobx (or Redux): Mobx is preferred because the custom application at SharePoint Online is not a large-scaled application, and Mobx is more straightforward.
• Form controls (e.g. People Picker, Textbox, etc): Office UI Fabric React/Angular can be considered together with PnP SPFx Controls.
• Data Create/Read/Edit/Delete actions: SharePoint PnP Framework is a good option, or you can write your own ajax API calls (reference here).

3. Visual Studio Code is recommended as a code editor to develop custom applications.

Note: SharePoint 2010/2013 Designer Workflow (free of charge) can be used to some extent (apart from the commercial Nintex workflow) if you want to trigger special action automatically (e.g. send email).


B - PROBLEMS & SOLUTIONS:

To list all potential or encountered technical errors or operational issues:

1. Nintex Forms: if your form has a number of controls (e.g. > 30 controls) and business rules (e.g. > 50 rules), Nintex Forms will probably take about 10+ seconds to load as at December 2018 (hopefully Nintex will improve this matter in future). Therefore, a custom form (e.g. using React) is a good alternative.

2. Library Version: it is recommended to fix the UI Fabric version (in package.json) because the automatically updated version can lead to a conflict in your control code later.

e.g. npm install mobx@3.1.2 --save









3. Real-time Code Error Notification: you should always run gulp serve in the terminal so that the code editor (i.e. Visual Studio Code) can highlight any error immediately soon after you save the code.  

4. Set State (default React webpart) does not support multiple setState in the default React webpart (i.e. only the first setState call takes place). Therefore, we need to use an additional library (i.e. Mobx) to address this matter.

5. Caching (PnP Caching) can be simply used by adding .usingCaching() in the PnP functions and this temporary data can be saved in either local storage (i.e. local caching - to store all configuration data) or session (to store user credentials). However, this caching can cause an issue if the form needs to refresh data frequently (e.g. cascading dropdown list may not be updated as expected).
.

C - DEVELOPMENT & DEBUGGING:

Debugging:

a. React Extension is available at Chrome and is useful to debug the Typescript files.

b. Hosted Workbench can be configured to run and test your code at SharePoint Online workbench (separated from the deployed solution):

c. Debugging can be done from the code editor (i.e. simple mark the breakpoint and use F5):

Development:

1. Reusable modules (e.g. repeater, custom cascading dropdown, etc) should be packaged as a component which will used in the main component.

2. All declared and dependent libraries used in your code can be installed once using the command npm install in the integrated terminal.

3. When Mobx is used, the tag @action must be added if an observable object/variable is updated to keep track of the observable item.

4. ReactDOM is a useful library to manipulate DOM elements in React approach:

5. Real-time value update for a certain control in the form requires a React function componentDidMount():

Note: this React summary is useful as a reference.

D - DEPLOYMENT: 

1. During production deployment, it is best to clean the package to generate a small solution 

2. The solution is packaged as follows in the Terminal:
gulp bundle --ship
(wait)
gulp package-solution --ship


3. The SharePoint solution package .sppkg must be deployed to the library sites/AppCatalog and all users who use the solution must have the access right to the AppCatalog.