I am currently in the process of integrating an embedded form into my process. I have a userTask and an example.html
In the usertask I reference the form via Form Key: operaton-forms:deployment/example.html, Type: Embedded or External Task Forms
When starting the instance I get the error code 404 not Found.
Is this not yet possible in operaton or could someone create an example for me?
My example.html (Camunda example):
<h3>Embedded Forms Quickstart</h3>
<form role="form"
name="variablesForm">
<div class="row">
<div class="col-xs-6">
<h2>Loan Data</h2>
<!-- Loan Type -->
<div class="form-group">
<label for="selectLoanType">Type of the loan</label>
<div class="controls">
<!--select box -->
<select id="selectLoanType"
required
class="form-control"
name="loanType"
cam-variable-name="loanType"
cam-variable-type="String"
ng-change="calculateLoan()">
<option value="mortage" checked>Mortage Loan (5%)</option>
<option value="cashAdvance">Cash Advance (10%)</option>
</select>
</div>
<!-- Custom validation message for select box -->
<p ng-if="variablesForm.loanType.$invalid" style="color: red">
Please select a loan type.
</p>
</div>
<!-- Loan Amount -->
<div class="form-group">
<label for="inputLoanAmount">Amount</label>
<div class="controls">
<input id="inputLoanAmount"
required
class="form-control"
cam-variable-type="Double"
cam-variable-name="loanAmount"
min="1000"
ng-change="calculateLoan()"
name="loanAmount"
type="number"/>
</div>
</div>
<!-- Runtime in Years -->
<div class="form-group">
<label for="inputLoanRuntime">Runtime (Years)</label>
<div class="controls">
<input id="inputLoanRuntime"
required
class="form-control"
cam-variable-type="Double"
cam-variable-name="loanRuntime"
min="2" max="30"
ng-change="calculateLoan()"
name="loanRuntime"
type="number"/>
</div>
</div>
<!-- calculate monthly payment -->
Projected monthly payment:
<p ng-if="monthlyPayment" class="alert alert-success">
{{monthlyPayment}}€ at {{interest}}% interest rate.
</p>
<p ng-if="!monthlyPayment" class="alert alert-danger">
Invalid selection.
</p>
<!-- The following code demonstrates use of custom scripting.
The 'cam-script' directive makes sure the the script is loaded and can bind to the angular $scope for the form.
Access to form fields is provided through $scope.variablesForm.
-->
<script cam-script type="text/form-script">
$scope.calculateLoan = function() {
var form = $scope.variablesForm;
if(!form.loanType.$valid || !form.loanAmount.$valid || !form.loanRuntime.$valid) {
$scope.monthlyPayment = undefined;
} else {
var loanAmount = form.loanAmount.$modelValue;
var years = form.loanRuntime.$modelValue;
var loanType = form.loanType.$modelValue;
var interestRate = 0;
if(loanType == "mortage") {
interestRate = 0.05;
} else if(loanType == "cashAdvance") {
interestRate = 0.10;
}
$scope.interest = 100 * interestRate;
// calculate monthly payment using special formula provided by Bobby G
$scope.monthlyPayment = Math.round((loanAmount * ((Math.pow((1+interestRate),years)*interestRate) / (Math.pow((1+interestRate),years)-1))) * (1/12));
}
}
</script>
</div>
<div class="col-xs-6">
<h2>Contact Data</h2>
<!-- Gender -->
<div class="form-group">
<label for="gender">Gender</label>
<div class="controls">
<!--select box -->
<select id="gender"
class="form-control"
cam-variable-name="gender"
cam-variable-type="String"
ng-change="calculateLoan()">
<option value="m" checked>Mr.</option>
<option value="f">Mrs.</option>
</select>
</div>
</div>
<!-- Firstname -->
<div class="form-group">
<label for="inputFirstname">First Name</label>
<div class="controls">
<input id="inputFirstname"
class="form-control"
required
type="text"
cam-variable-name="firstname"
cam-variable-type="String"
placeholder="John"
ng-minlength="2"
ng-maxlength="20"/>
</div>
</div>
<!-- Lastname -->
<div class="form-group">
<label for="inputLastname">Last Name</label>
<div class="controls">
<input id="inputLastname"
class="form-control"
required
type="text"
cam-variable-name="lastname"
cam-variable-type="String"
placeholder="Doe"
ng-minlength="2"
ng-maxlength="20"/>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="inputEmail">Email</label>
<div class="controls">
<input id="inputEmail"
class="form-control"
required
type="text"
cam-variable-name="email"
cam-variable-type="String"
placeholder="john.doe@camunda.org"
ng-minlength="2"
ng-maxlength="40"/>
</div>
</div>
<!-- Address -->
<div class="form-group">
<label for="inputAddress">Address</label>
<div class="controls">
<textarea id="inputAddress"
class="form-control"
cam-variable-name="address"
cam-variable-type="String"
rows="4"></textarea>
</div>
</div>
</div>
</div>
</form>