Hello,
Is there a tutorial or a complete guide on how to add embedded forms in Camunda Run?
Thank you
Hi @ams
You can deploy and run Camunda Forms in the same way that you can deploy and run Embedded forms.
Check out this for more details: Camunda Platform Tutorial: Building a Process and Adding Forms in Camunda Run - YouTube
1 Like
Hi @Niall
Does this include .html files as well or only .form?
I’ve tried to include a .html form from the examples Camunda provided and it didn’t work.
I’d like to create a form that includes text fields, radio buttons and file fields (to be uploaded) and attach this form to a task on my model.
Is it possible on Camunda Run or do I have to setup a maven project?
Thank you
This should work. What exactly are you doing and what exactly is the error that’s happening
I included the form I got from here:
`
Embedded Forms Quickstart
<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 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 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 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 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 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 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 class="form-control" required type="text" cam-variable-name="email"
cam-variable-type="String" placeholder="john.doe@camunda.org" ng-minlength="2"
ng-maxlength="20" />
</div>
</div>
<!-- Address -->
<div class="form-group">
<label for="inputAddress">Address</label>
<div class="controls">
<textarea class="form-control" cam-variable-name="address" cam-variable-type="String"
rows="4"></textarea>
</div>
</div>
</div>
</div>
When I visit the task to view the form I get this error:
Form failure: Unexpected token < in JSON at position 0
Okay I changed the path and now it works.
This way can I handle file uploads in the forms?