Embedded form and JSON objects: problem with enabling Save button (i.e. store event)


#1

Basically, I noticed that the ‘Save’ button remains disabled when changing a field of type ng-model. However, if I add a typical cam-variable-name field into the same embedded form, the Save button is enabled on change with this field (cam-variable-name). And, once the save button enable/disable begins working, the ng-model field also begins sending events to enable save on field change.

Here’s the div section for the ng-model field - and, this binds and displays data perfectly… just doesn’t enable the save button if contents change:

<div class="control-group">
  <label class="control-label">ng-model: customer.value.firstname</label>
  <div class="controls">
      <input 
    type="text" 
    ng-model="customer.value.firstname"            
    class="form-control" />
  </div>
</div>

Didn’t see any errors in the console…

My workaround is to use some temporary process variables - using cam-variable-name. And, these fields work simply as temporary place-holders to help workaround the save button enabling issue.

But… is there a patch (if this is a bug) or alternate work-around? I noted a similar issue in JIRA. Initially assumed a code-error on my side. However, I’m following the examples closely (if you notice I even use the ‘customer’ json var).

  • Thanks.

#2

Quick work-around is to use a temporary process variable, “cam-variable-name”, to hold the value for embedded form display. This works with the embedded form’s built-in buttons: save/complete.

Here is the source at github - these files are evolving… so, for example only at this stage. There’s lots of ‘cruft’ in the code at this time… but, you’ll get the idea.

Note that I’m naming the temporary camunda variable “customer_value_firstname” - this help with keeping track of variables.
Also, only using this work-around for JSON fields I’ll be changing/editing within the form.
A more formal angularJS work-around will happen… later.

   <!-- Save button work-around, I'll push the field value into this form and 
         use the 'save' event to better manage updates for both server and form -->
   <div class="control-group">
      <label class="control-label">cam-variable-name: customer_value_firstname</label>
      <div class="controls">
         <input 
            type="text" 
            id="customer_value_firstname"
            cam-variable-name="customer_value_firstname"            
            cam-variable-type="String" 
            class="form-control" />
      </div>
   </div>

I then take advantage of Camunda’s built-in events during embedded form life-cycles.
Field setup: id="customer_value_firstname"

var customer_value_firstname = $('#customer_value_firstname', camForm.formElement);

Load the actual JSON process variable I’m using. However I’m not directly displaying this JSON process var’s field values for editing. Using a temporary field for that.

variableManager.fetchVariable('customer');

Set scope for the JSON object - noting that we’re not directly displaying ng-model since it has trouble with using button events. My examples will show some JSON display for debugging only:

$scope.customer = variableManager.variableValue('customer');

Then apply the value into the temporary, though displayed, field:

      var value = $scope.customer.value.firstname;
      customer_value_firstname.val(value);

And, finally pushing the temp field value into the JSON process var during the store event.

  • same approach for submit event.
$scope.customer.value.firstname = $scope.customer_value_firstname;

#3

Do you have a link or an ID of the JIRA issue? It probably makes sense to mention this thread there to give it a bit more visibility.


#4

haven’t added a JIRA ticket… was checking to see if I had a code-error.
Looks like an issue though. I ran a few attempts and setting the state of the form - couldn’t make it work.

I’ll add a JIRA ticket later today - or, you can go ahead and enter one in.


#5

created:
https://app.camunda.com/jira/browse/CAM-7645