Skip to content
Branch: master
Find file History
yanavasileva chore(license): update license terms
* update license headers
* add NOTICE file
* remove APPENDIX in LICENSE
* mention License in README

Related to CAM-10124
Latest commit 6cfb8e9 Apr 10, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
config docs(usertask): add embedded react example Apr 9, 2019
src/main chore(license): update license terms Apr 10, 2019
README.md docs(usertask): add embedded react example Apr 9, 2019
pom.xml docs(usertask): add embedded react example Apr 9, 2019

README.md

Using React Forms with Tasklist

React is a popular library to build user interfaces. If you want to use react to build custom Tasklist forms, you can use this example as a starting point. We adapted the React Multiple Inputs Example and integrated it into a process.

Overview

How can I add React to my Tasklist?

  1. Download React and reactDOM into the app/tasklist/scripts/react of your webapp.
  2. Add loadReact.js to the same folder. This will add React and ReactDOM to the global scope
  3. Add everything as a custom script in app/tasklist/scripts/config.js. If you use the production build of react, change the path accordingly.
  customScripts: {
    ngDeps: [],
    deps: ['loadReact', 'react', 'react-dom'],
    paths: {
      'loadReact': 'scripts/react/loadReact',
      'react': 'scripts/react/react.development',
      'react-dom': 'scripts/react/react-dom.development'
    }
  }

That's it, you can now use react in your custom forms.

How can I get access to process variables?

All process variables will be managed with the camForm.variableManager. You need to load existing and create new variables. How this is done is described in detail in the Embedded Forms Reference.

Keep in mind that you also have to update the variables this way if they change. You can do this in the componentDidUpdate() method of you form component.

componentDidUpdate() {
    $scope.$$camForm.$dirty = true;
    camForm.variableManager.variableValue('isGoing', this.state.isGoing);
    camForm.variableManager.variableValue('numberOfGuests', this.state.numberOfGuests);
}

Can I use JSX?

Yes you can. Just use any JSX preprocessor as you would with any other React project.

How to use this example

  1. Checkout the project with Git
  2. Build the project with maven
  3. Deploy the WAR file to the Camunda Workflow Engine
  4. Add React to Camunda Tasklist as described above
  5. Open Camunda Tasklist and start a process instance for the process named "React Example"
You can’t perform that action at this time.