React with JSBridge

React is a free and open-source front-end JavaScript library for building user interfaces based on components.

Resco Mobile CRM application functionality can be extended using HTML + JavaScript code which means you can use almost any JavaScript library, including React. Here are a few steps you need to follow to make it work.

Create React application

Open the terminal (command line) and execute this line to create a new React application (replace my-app with any name which most suits your application):

npx create-react-app my-app --template typescript

Install JSBridge

To install JSBridge, still in the terminal, go to the folder created in the previous step (my-app) and execute this command:

npm i @resconet/jsbridge

Add homepage to package.json file

Open the package.json file located in the my-app folder with any text editor and add this line to it. This ensures that all the asset paths are relative to index.html:

"homepage": "./",

Example of a modified package.json file:

{
  "name": "sample",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.1",
    "@resconet/jsbridge": "^16.0.4",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.38",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Write your React application

Now you can write the code for your application.

JSBridge

To communicate with the client application, JSBridge becomes handy. Please refer to the JSBridge guide to learn more about it.

Import

To be able to use it in your code, import the JSBridge library in the import section of the source code files where you want to use it:

import "@resconet/jsbridge"

Usage

Now you can add code to communicate with client application, e.g., to read account’s name:

const [name, setName] = useState(""); 
useEffect(() => { 
    MobileCRM.UI.EntityForm.requestObject( 
      function (entityForm) { 
        const entity = entityForm.entity; 
        setName(entity.primaryName); 
        return true; 
      }, 
      function (err) { 
        MobileCRM.bridge.alert("An error occurred: " + err); 
      }, 
      null 
    ); 
  }, [])

See the sample code to see the full code.

Build your React application

To build your React application, go back to the terminal and again, in your application’s folder, execute this command:

npm run build

Add your React application to MobileCRM

Once the build of your React application succeeds, you can add it to your mobile project and try to run it in the Resco Mobile CRM application.

Pack the build

Your built React application is now in the build folder in your application’s folder. To easily upload it to your mobile project, zip the content of the build folder.

Add to mobile project

1. Start Woodford.
2. Edit the app project where you want to add your React application.
3. Select Offline HTML from the Project menu.
4. (Optional) We recommended to store your React application in a dedicated folder. Click New Folder, enter a name, then click OK.
5. Go to the folder where you want to store the React app.
6. Click Upload and select the build zip file (or drag the zip file into the Offline HTML folder).
7. Save all changes.

After successful upload, your folder should look like this:

Add React application to an iframe

You can add and run your React application to any iframe, but in this tutorial, we show how to use it on the account entity form.

1. Select Account from the Project menu and click Show UI to display the list of views, forms, and charts.
2. Edit a form, or create a new one.
3. On the Tabs pane, double-click Iframe to add it to your form.
4. Set up your iframe:
   
   • Enter a name.
   • To fill the URL, click Browse and select index.html in your build folder, then click OK.
5. Click OK to close the iframe configuration.
6. Save all changes and publish the app project.

When you synchronize your app, your account form should now have an extra tab displayed using React.

Debugging

To debug your React application, follow the guide about debugging offline HTML. If the build of your React application contains map files, you should be able to see and debug React code.

Sample application

If you don't want to start developing from scratch, you can download the sample React application used in the screenshots above. It uses Material UI’s text field to edit the account’s name. It uses JSBridge to read and write data and colorize text fields according to the app's theme.

1. Download the sample from here.
2. Unzip the zip file.
3. In the terminal, go to the application’s folder and install the required dependencies using the npm i command.
4. Continue from section Build your React application.

Was this information helpful? How can we improve?