Angular.js directives in embedded forms

[wolfga...@lindner-group.com]

Hi folks,

currently I'm trying to make a form with partially dynamic content. The form is a personel request and there are three radio buttons called "Team Extension", "Replacement" and "Other".
So if the user presses "Team Extension", i would like to have two more radio buttons show up named "Part Time" and "Full Time".
If "Other" is selected, i want a textarea to appear to state the "other" reason.
If the third option "Replacement" is selected, i want none of that to appear.
Since i cannot use css or JavaScript in the embedded forms, i tried to use angular.js directives, namely ng-if, instead.
Since this didn´t work, i tried to use any ng-directive without any luck, meaning angular.js does not seem to work. A completed various angular.js tutorials successfully, so i do not think the error is in the source.
Finally my questions:
1. Should angular.js directives work in embedded forms?
2. Is it at all possible to make embedded forms somewhat dynamic?

Thanks for reading
Answers would be much appreciated

[wolfga...@lindner-group.com]

Good Morning,

additionally the ng-directives from this getting started with embedded forms tutorial (https://github.com/camunda/camunda-bpm-examples/tree/master/usertask/task-form-embedded) don´t seem to work either. I´m using the prepackaged Camunda BPM 7.1.0 Final with the Built-In Tomcat and Database, no modifications made on my part.

[Daniel Meyer]

Hi Wolfgang,

it should be possible to use custom Javascript inside embedded forms.

See for instance: 

https://github.com/camunda/camunda-bpm-examples/blob/master/usertask/task-form-embedded/src/main/webapp/start-form.html#L58

Maybe you can post the source of your form here so that we can have a look at it ?

Thanks!

Daniel

[wolfga...@lindner-group.com]

Hi Daniel,

that exact form you postet did not work with my former camunda installation. Today, I did set up a new one, with vanilla tomcat and our company database for testing and for some reason now it works just fine. This is very odd since I unpacked the prepackaged Tomcat 7 release from the camunda homepage multiple times and set it up according to the getting started tutorial, to make sure, that I did not make a mistake setting the server up.
The thing about custom scripts was indeed my fault, since I read that somewhere and just belived it...

[Daniel Meyer]

Hi Wolfgang,

thanks for your feedback, this is very valuable to us!
You say that you tested the demo form I linked to before and it did not
work. Is there anything that could help us reproduce that? Maybe you
used a different browser?

Cheers,
Daniel

[wolfga...@lindner-group.com]

Hi Daniel,

the browsers i used were Firefox 28.0, Firefox 29.0 and Internet Explorer 11.
This may be important, i could reproduce the error with that form again. I'm rather new to camunda & angular so perhaps its just my mistake, but it seems, that angular directives combined with formfields are only evaluated when the fields are required.
I reproduced that with the start-form modifying it like this:

    <!-- Gender -->
    <div class="control-group">
     <label class="radio inline">
        <input form-field type="radio" name="gender" value="m">
        Mr.
      </label>
      <label class="radio inline">
        <input form-field type="radio" name="gender" value="w">
        Mrs.
      </label>
      <p ng-if="variablesForm.gender.$invalid" style="color: red">
        Please select gender.
      </p>
    </div>

What i wanted to happen was, that the form shows a red "Please select gender" as long as no gender is selected, but this didn´t happen.
But when i made the radio buttones "required" it suddenly worked.
Now im trying to verify that with my other "faulty" forms.
Again, i'm very new to this, so im sorry if that is supposed to be like this and the error was on my part.

Thanks
Wolfgang

[Daniel Meyer]

Hi Wolfgang,

thanks a lot for this feedback. We really appreciate users taking the time to share their questions and solutions.

Our form field directive does currently not work for your usecase. It is not an angular-js problem but the way our form-field directive works prevents you from using the radio button. 

The problem is that you have to give both radio buttons the same name because the "name" attribute is required by the form-field directive.

Maybe you want to try it with a select box:

      <!-- Gender -->

    <div class="control-group">

      <select name="gender" required ng-model="gender">

        <option value="m">Mr.</option>

        <option value="w">Mrs.</option>

      </select>

      <p ng-if="variablesForm.gender.$invalid" style="color: red">

        Please select gender.

      </p>

      <p ng-if="variablesForm.gender.$valid" style="color: green">

        OK!"

      </p>

    </div>

Regards,

Daniel

[wolfga...@lindner-group.com]

Hi Daniel,

actually it worked with the radion buttons, when i made both input-fields required.
Markup:

    <!-- Gender -->
    <div class="control-group">

     <label class="radio inline">
        <input form-field type="radio" name="gender" value="m" required>

        Mr.
      </label>
      <label class="radio inline">

        <input form-field type="radio" name="gender" value="w" required>
        Mrs.
      </label>

      <p ng-if="variablesForm.gender.$invalid" style="color: red">

        Please select gender.
      </p>
    </div>

What i can´t get to work now is, showing different messages depending on the selected value ("m" or "w"). There i will try the select box you proposed.
The other thing i´m trying merely out of curiosity is, to make something like this work:
<input form-field type="text" name="test" ng-model="test" required>
<p> You typed {{test}} </p>
Up until now, my form does not longer show "{{test}}" but it doesn´t show the actual value. Sorry if the solution to this is obvious, im really a angluar newbie - and the more i play with it i´m starting to think i´m more of a jsf guy ;)

Thanks so far
Wolfgang

[Fer]

Hello,

Instead of {{test}}, use {{formVariable('test')}} and it should work for process variables. It was answered here:

https://groups.google.com/d/msg/camunda-bpm-users/180IO5zxLdk/ZlZ46ZWNz30J


Best regards.

[wolfga...@lindner-group.com]

Hi Fer ,
first of all thanks for your reply.
But unfortunately it does not work, at least not in an embedded form.
Markup:
        <div class="control-group">
            <label class="control-label" for="test">Test input</label>
            <div class="controls">

                <input form-field type="text" name="test" ng-model="test" required>

                <p> You typed {{formVariable('test')}} </p>
            </div>
        </div>

Regards,
Wolfgang