Using Bootstrap tabset in embedded form

Camunda 7 Topics Discussion & Questions
,
1

Hi,

I am trying to add a tabset to an embedded form using the standard Bootstrap method:

 <form role="form" name="invoiceForm"
       class="form-horizontal">
 <tabset>
     <tab heading="Static title">

 div class="form-group">
     <label class="control-label col-md-4"
            for="name">Name</label>
     <div class="col-md-8">
       <input cam-variable-name="name"
              cam-variable-type="String"
              id="name"
              class="form-control"
              type="text"
              required />
     </div>
   </div>
   </tab>
   <tab heading="title 2" active="tab.active">
        content
   </tab>
   <tab select="alertMe()">
       <tab-heading>
           <i class="glyphicon glyphicon-bell"></i> Alert!
       </tab-heading>
         I've got an HTML heading, and a select callback. Pretty cool!
   </tab>
</tabset>

</form>

The tabs come out just fine, but the cam-variable-name binding fails.
If I remove the tabset, the process variable name shows up in the input, but as soon as I wrap the form-group in the tabset, the variable is blank.

Anyone have any ideas?
Thanks,
Greg

2

Hi Greg,
this thread may be of interest.

regards

Rob

3

Thanks,

This thread does appear to suggest a reason.
Kind of screwy since JS and angular will look in parent scopes if a variable is not declared in the current scope.

But, at least I have a hack to use.

Greg

4

A related question, I am using an embedded form on a task.
Some of the form variables already exist in the process.
For regular input fields, the cam-variable-name mapping works fine and the form fields are pre populatd.
However, for select and textarea the fields are blanked out.

I know the variables are properly set because in the Angular context I can see the “originalValue” is what I expect to see, but the current value is empty.

Yes, I can hack around this, but it seems to be a pretty fundamental issue.
Anyone else seeing this?

Thanks
Greg

5

Hi Greg,

there is an open bug report regarding the select field. I could not find anything for the textarea, though. Feel free to open an issue in JIRA :slight_smile:

Cheers
Sebastian

6

Thanks Sebastian, I have created this Jira for the text area.

1 Like
7

Hi @gdharley…
I’m facing the exact same problem… Could you give some help of how to hack to make it work ?

8

If I remember correctly, I loaded the variable manually on the variables-fetched event using the code below:

camForm.on('variables-fetched', function() {
  // access to all process variables after the form has loaded
  var variables = variableManager.variables;
  $scope.selectedState = variables.state.originalValue;

});

I then bound the select ngModel to selectedState:

<div class="col-md-8">
  <select cam-variable-name="state"
          cam-variable-type="String"
          id="state"
          ng-model="selectedState"
          class="form-control">
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      ...
      ...
      <option value="WY">Wyoming</option>
  </select>
</div>

Hope this helps.
Greg

1 Like
9