TaskForm embedded vs. generated for dynamic forms and validation

[Melissa Palmer]

Hi 

I have a few questions around Task Forms. I am wanting to achieve the following: 

- Have dynamic TaskForms displayed to users. For example a screen with an EntityType select would display completely different options on the UI when onchange is fired. 

1) Looking at the docs between version 7.1 and 7.2 the whole section on "Extending the Task Form Scope with Custom Behavior" has been removed... is there a reason for this? What's the recommended way forward for setting up custom behavior within forms? 

2) Is it possible to use a combination of the embedded and generated forms in some way? ie: I'd like as a developer to be able to use the properties type within eclipse to configure validation setup for fields within a form. However I also need to ensure that its possible to have dynamic forms? 

3) Following the example at [1] I'm unable to get the  ng-if="variablesForm.loanType.$invalid" to work what's the trick with this? Code within my embedded for currently is as follows (not that neither the green/red paragraph sections ever display): 

{<form role="form" name="form">

<div class="form-group">

<label for="empId-field">Emp ID</label> 

<input required name="empId" cam-variable-name="empId" cam-variable-type="String" class="form-control" ng-pattern="/\d{2}-\d{2}/" />

<!-- Custom validation message for select box -->

<p ng-if="variablesForm.empId.$invalid" style="color: red">Please select a empId type.</p>

<p ng-if="variablesForm.empId.$valid" style="color: green">empId type is correct.</p>

</div>

<div class="form-group">

<label for="amount-field">Amount</label> 

<input cam-variable-name="amount" cam-variable-type="Float" class="form-control" />

</div>

</form>}

4) is it possible to externalize (to a separate js file) the {<script form-script type="text/form-script">} sections? I want to ensure a separation of the HTML and Javascript

5) In the current modeler when you add form fields .. there is a properties section. When adding properties in the XML you get {<camunda:properties> <camunda:property id="dfg" value="dfg"/> </camunda:properties>} what is this for and how is it used?

6) Is there a way to have strings for labels/validation errors coming from a properties file. (for ease of changing and/or translations?) 

Thanks in Advance

Melissa

[Daniel Meyer]

Hi Melissa,

1) The section on how to work with custom javascript can be found here: 

http://docs.camunda.org/latest/api-references/embedded-forms/#custom-javascript

2) Yes that is possible. You can have an embedded form (set the camunda:formKey="" attribute) and when it is submitted, use <formField ..> definitions in BPMN Xml for backend validation. You need to make sure that the id of the form field corresponds to the variable name provided in the cam-variable-name="" attribute in the HTML form.

Example:

BPMN Process

<bpmn2:userTask id="UserTask_1" camunda:formKey="app:embedded:forms/someForm.html">
  <bpmn2:extensionElements>
    <camunda:formData>
      <camunda:formField id="firstname" type="string">

        <camunda:validation>

          <camunda:constraint name="validator" config="com.asdf.MyCustomValidator" />

        </camunda:validation>

      </camunda:formField>
    </camunda:formData>
  </bpmn2:extensionElements>
</bpmn2:userTask>

HTML Form

<input type="text"
           cam-variable-name
           cam-variable-type="String"></input>

3) The validation is plain angular JS. (See "Custom Validation" in https://docs.angularjs.org/guide/forms).

The error seems to be that you reference the wrong form name:

Your form is named "form":

<form name="form">

Which means that it has to be like this:

<p ng-if="form.empId.$invalid" style="color: red">Please select a empId type.</p>

5) The properties are currently not used. You can use it for adding custom properties that you can then retrieve using API.

6) You could load a json file using Javascript and use it for propviding the labels in the form?

I'll follow up on loading the script from an external source.

I hop this helps...

Regards,

Daniel

[Melissa Palmer]

Hi Daniel, thanks for the speedy response, yes this does help, but does bring me to more questions. 

- Thanks for the updated link. 

- I've correct problems with using ng-if, that's working as you suggest now. However the ng-if $invalid sections show up before the user is able to even enter anything into the screen. I think I am missing another important concept here?. 

- Ok I managed to get camunda:formField and validation working... questions on this still include: 

   -- Is there a way to use the label in the embedded task form, I don't want to have conflicting labels in the camunda:formField from what is within HTML ? 

   -- When you say: "BPMN Xml for backend validation" ok so by using the validation set on camunda:formField within the BPM it's backend validation rather than client side. Using something like AngularJS "ng-pattern=" would give us client side validation. Is it not best practice to preform client side validation... can the BPMN Xml not be used for client side validation in any way?

   

Thanks

Melissa

[Melissa Palmer]

Hi Daniel, 

Wondering if you are still able to help me with the questions of? 

   -- is it possible to "load the script from an external source." rather than having it within the embedded html page? 

   -- Is there a way to use the label in the embedded task form, I don't want to have conflicting labels in the camunda:formField from what is within HTML ? 

   -- When you say: "BPMN Xml for backend validation" ok so by using the validation set on camunda:formField within the BPM it's backend validation rather than client side. Using something like AngularJS "ng-pattern=" would give us client side validation. Is it not best practice to preform client side validation... can the BPMN Xml not be used for client side validation in any way?

Thanks

Melissa