<form class='form-horizontal'> <div id='reactContainer' /> <script cam-script type='text/form-script'> // Fetch Variables and create new ones camForm.on('form-loaded', function () { camForm.variableManager.createVariable({ 'name': 'approved', 'type': 'Boolean', 'value': false, isDirty: true }); camForm.variableManager.fetchVariable('amount'); camForm.variableManager.fetchVariable('creditor'); camForm.variableManager.fetchVariable('invoiceID'); camForm.variableManager.fetchVariable('invoiceDocument'); camForm.variableManager.fetchVariable('category'); }); camForm.on('variables-applied', function () { renderReactForm(); }); // Render React here function renderReactForm() { const container = document.getElementById('reactContainer'); const e = React.createElement; class DisplayGroup extends React.Component { render() { return e('div', {className: 'form-group'}, [ e('label', {className: 'control-label col-md-4', key: 'label'}, this.props.label), e('div', {className: 'col-md-6', key:'container'}, e('input', { className: 'form-control', value: this.props.value || '', readOnly: true })) ]); } } class Approval extends React.Component { constructor(props) { super(props); this.state = { value: false, }; this.handleInputChange = this.handleInputChange.bind(this); } handleInputChange(event) { const target = event.target; const value = target.type === 'checkbox' ? target.checked : target.value; camForm.variableManager.variableValue('approved', value); // Activate 'save' button $scope.$$camForm.$dirty = true; this.setState({ value: value }); } render() { return e('div', null, [ e('h3', {key: 'h3'}, 'Do you approve this Invoice?'), e('br', {key: 'br1'}), e('div', {className: 'form-group', key: 'InvoiceDocument'}, [ e('label', {className: 'control-label col-md-4', key: 'label'}, 'Download Invoice'), e('div', {className: 'col-md-6', key: 'div'}, e('a', {href: this.props.invoiceDocument.contentUrl}, 'invoice.pdf')) ]), e('br', {key: 'br2'}), e(DisplayGroup, { label: 'Amount: ', value: this.props.amount.value, key: 'Amount' }), e(DisplayGroup, { label: 'Creditor: ', value: this.props.creditor.value, key: 'Creditor' }), e(DisplayGroup, { label: 'Invoice Category: ', value: this.props.category.value, key: 'Category' }), e(DisplayGroup, { label: 'Invoice Number: ', value: this.props.invoiceID.value, key: 'InvoiceID' }), e('br', {key: 'br3'}), e('label', {className: 'control-label col-md-4', key: 'ApprovalLabel'}, 'I approve this Invoice'), e('div', {className: 'col-md-6', key: 'ApprovalContainer'}, e('input', { className: 'form-control', name: 'approved', type: 'checkbox', checked: this.state.value, className: 'form-control', onChange: this.handleInputChange }) ) ]); } } const root = ReactDOM.createRoot(container); root.render(e(Approval, camForm.variableManager.variables)); } </script> </form>