Form variables inside Bootstrap accordion broken

Hi,
I have a large form to start a process. To help the user expereince, I have divided the form up into sections and placed each section within an accordian-group within a Bootstrap accordian. The bootstrap accordian works fine and I am using embedded forms inside tasklist.

However, I have found that a form input field using say a cam-variable-name fails silently, ie the form submits without any error etc, however, no process instance variable is created. If I move the input field html declaration outside the accordion, then I do get the process variable.

Hence is this a known problem? Should I be able to use the forms sdk declarions inside of bootstrap constructs using embedded forms inside tasklist? Im using camunda 7.4.

As a work around, I can use ng-model and an on submit script and variable manager to create process variables…

regards

Rob

We do not use the JS part of bootstrap inside our UIs (but we use the https://angular-ui.github.io/bootstrap/).
I can’t say for sure, but I suspect the angular concepts of scope and isolatedScope to be the bottleneck here.

Maybe you could post (a stripped down) version of your form to get a better idea.

Heres a stripped down form. Fields outside the accordian group are fine, those inside fail silently…

<form class="form-horizontal" role="form" name="startForm">
    <div class="form-group">
        <label class="col-md-4 control-label">Page0</label>

        <div class="col-md-4">
            <input id="page0" cam-variable-name="PAGE0" cam-variable-type="String" type="text" class="form-control"/>
        </div>
    </div>

    <accordion close-others="true">
        <accordion-group heading="Page 1" is-open="Review_Form_Status.isFirstOpen"
                         is-disabled="Review_Form_Status.isFirstDisabled">

            <div class="form-group">
                <label class="col-md-4 control-label">Page1</label>

                <div class="col-md-4">
                    <input id="page1" cam-variable-name="PAGE1" cam-variable-type="String" type="text"
                           class="form-control"/>
                </div>
            </div>

        </accordion-group>
        <accordion-group heading="Page 2">
            <div class="form-group">
                <label class="col-md-4 control-label">Page2</label>

                <div class="col-md-4">
                    <input id="page2" cam-variable-name="PAGE2" cam-variable-type="String" type="text"
                           class="form-control"/>
                </div>
            </div>
        </accordion-group>
    </accordion>

    <script cam-script type="text/form-script">
        // custom JavaScript goes here

        camForm.on('form-loaded', function () {

            //
            // status attribute for form accordian
            //
            $scope.Review_Form_Status = {
                isFirstOpen: true,
                isFirstDisabled: false
            };
        });



    </script>
</form>`

Hi Vale,

reason Im interested in this is whilst I can use ng-model and Camunda variable manager as a work around, I haven’t figured out how to make it work for a file upload. The file upload example in the documentation assumes an existing process instance. In my case, I really want the file upload in a process start form…

Rob

Hi Rob,

the most probable cause for this behavior is, that the accordion directive creates angular scopes that are child scopes of the camForm. The embedded can only evaluate cam-variable-* directives that are directly in the scope of the form itself. If you create child scopes in the form (e.g. by using the accordion directive), you would have to manage the variables inside these scopes yourself, e.g. by using variable listeners.

Regarding the file upload in the start form: This should work as long as the input field is in the camForm scope. The invoice showcase contains such a scenario.

Does this help you?

Cheers
Sebastian

Thanks Sebastian,

Ive used file upload control in a camunda form. My challenge is how to perform a file upload in a start form using a scope other than cam-form scope. The example given in the forms reference uploads a form to an existing process using the REST API. Hence any hints on how to implement my own file upload on a start form?

regards

Rob

Re. File upload start forms vs. task forms
File upload works for start forms and task forms alike.
The Form sebastian linked to in his last post is a start form.

See also: https://docs.camunda.org/manual/7.4/reference/embedded-forms/controls/files/

Re. Nested Angular Scopes
The problem is that the Camunda Form SDK will only manage variables in the local scope (as Sebastian has pointed out).
In order to make the nested scopes work in your case, I could imagine doing the following:

<form class="form-horizontal" role="form" name="startForm">
  
  <!-- "declare" the variable using hidden field in the form scope -->
  <input type="hidden"
       cam-variable-name="VAR_NAME"
       cam-variable-type="String"
       value="testuser" />

    <accordion close-others="true">
        <accordion-group heading="Page 1" is-open="Review_Form_Status.isFirstOpen"
                         is-disabled="Review_Form_Status.isFirstDisabled">

            <div class="form-group">
                <label class="col-md-4 control-label">Page1</label>

                <div class="col-md-4">
                    <!-- bind to the variable in the nested scope -->
                    <input id="page1" ng-model="VAR_NAME" class="form-control"/>
                </div>
            </div>

        </accordion-group>
...
    </accordion>

See also: https://docs.camunda.org/manual/7.4/reference/embedded-forms/controls/hidden/

This could work. Please try it independently from the file upload issue.

Thanks Daniel,

Actually what Im finding works really well for me with nested scopes is I tend to use a single process variable which captures the entire form data structure as a JSON structure. Hence all I have to do is fetch it and submit it. (In addition, as its sensitive data, I can also use client side encryption, hence I can also choose to save it as an encrypted string). Anyway, once its a JSON object in angular scope, the ng-model on each field works really well.

The remaining challenge I have is I want to use the Camunda file control to upload a file into a File process variable. The catch is I want to use the control inside the accordian and thus the camunda file control wont work as its not in CamForm scope. Its the file upload, persist as a process instance variable and bind to a new process instance in the one submission that Im working through…

Rob

Oh yes, keeping the data together in a json object is smart.

Maybe @sebastian.stamm has an idea about how to deal with the file upload field…

Hi Rob,

basically you have two options: If its not in the start form, you could follow the Upload Large Files example to make it work.

If that does not work for you, you would have to load the selected file via FileAPI and add it to the variable manager manually. Maybe the implementation of the file handling for the cam-variable-* directives can help you with that: https://github.com/camunda/camunda-bpm-sdk-js/blob/master/lib/forms/camunda-form.js#L486-L521