Integrate Embedded Forms in BPMN

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>

Working now :sweat_smile:

Correct Form Key (If embedded form is within the deployment) embedded:deployment:example.html

2 Likes