Embedded forms in Camunda Run

Camunda 7 Topics Discussion & Questions
1

Hello,

Is there a tutorial or a complete guide on how to add embedded forms in Camunda Run?

Thank you

2

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
3

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

4

This should work. What exactly are you doing and what exactly is the error that’s happening

5

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

6

Okay I changed the path and now it works.

This way can I handle file uploads in the forms?

7

I managed to make it work.

I followed the details provided here.

Thank you!

8