How to use ng-include within embedded forms?

[Melissa Palmer]

Hi 

How does one make sure of the AngularJS  ng-include within embedded forms? 

I have been using something similar to the following: 

 <div ng-include="'mytemplates/approval_options.html'"></div>

Which works very well, I do see the contents of approval_options.html within my form. However approval_options.html includes a select similar to:

<div class="form-group">

    <label for="decision-field">Decision</label> <select required cam-variable-name="decide" cam-variable-type="String">

        <option value="">-- select one --</option>

        <option value="approve">Approve</option>

        <option value="decline">Decline</option>

        <option value="amend">Amend</option>

    </select>

</div>

Problem is that now when displaying of this page.. within Chrome I can see the following error: 

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'select', can't be found!

http://errors.angularjs.org/1.2.16/$compile/ctreq?p0=ngModel&p1=select

    at http://localhost:8080/bpm/app/tasklist/scripts/deps.js:4:8842

    at m (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:5:682)

    at g (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:5:2424)

    at s (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:4:30629)

    at s (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:4:30646)

    at http://localhost:8080/bpm/app/tasklist/scripts/deps.js:4:30298

    at ia.link (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:7:12069)

    at g (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:5:2388)

    at s (http://localhost:8080/bpm/app/tasklist/scripts/deps.js:4:30629)

    at http://localhost:8080/bpm/app/tasklist/scripts/deps.js:4:30298 <select required="" cam-variable-name="decide" cam-variable-type="String">

And when submitting the form the decide variable is never set correctly. 

(NOTE: our bpm app is the camundawebapp for tasklist/admin/cockpit war file just renamed)

Thanks

Melissa

[Sebastian Stamm]

Hi Melissa,

ng-include loads the contents of approval_options.html asynchronously. That means that the contents of the included file are not available when the form is initialized. Therefore you can not use the cam-variable-* directives, that determine which variables to load and setup the angular bindings.

You can declare custom fields in the included file and use the form lifecycle events in your main form file to manage the variables, as described in the documentation [1]. Be aware that ng-include also creates a new scope, which may not be easily accessible from the form scope.

Cheers

Sebastian

[1]: http://docs.camunda.org/latest/api-references/embedded-forms/#custom-javascript-participating-in-the-form-lifecycle-implementing-custom-fields

[Daniel Meyer]

Hi Melissa,

is your usecase that you want to have reusable form templates?

Example:

* "Reuse one form fragment for providing user data in multiple forms"

You could also think about server-side templating. Just an idea...

Daniel

[Melissa Palmer]

Hi Daniel 

Yes that is exactly my use case. 

Specific use case here is:  I have processes named "Finance Approval" and "Team Lead Approval" which both include different approval user task nodes, where the buttons on these two should be exactly the same. These two processes can then be reused as subprocess anywhere in other process flows.  

Oh right... yes that does sounds like a better idea. Now... where do I start with server-side templating? 

The setup I currently have is:  using the Camunda webapp (tasklist etc.) built using maven war overlay. All processes have been setup to us embedded forms. 

Thanks

Melissa

[Melissa Palmer]

I'm about to start looking into this one again... Is anyone able to point me in the correct direction as to where to start with server-sire templating in the tasklist setup with embedded forms? Thanks in Advance Melissa

On Wednesday, 11 February 2015 10:14:13 UTC+2, Melissa Palmer wrote:

[Sanja Gagovic]

Hey, did you solve it? I am facing the same issue now and I am not sure what is the best way to solve it?