Show bootstrap modal window inside a task form

Camunda 7 Topics Discussion & Questions
,
1

Hello,

I try to display a modal window from inside a tasklist form using bootstrap ( Modal · Bootstrap (getbootstrap.com)).
Opening the window works, but the whole browser window is then blocked / disabled and looks like this:

image
image1021×214 17.1 KB

The HTML code for the window looks like this:

  <div class="modal" tabindex="-1" role="dialog" id="modalMoveDocToProcess">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Dokument an anderen Prozess anhängen</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Speichern</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
        </div>
      </div>
    </div>
  </div>

And the window is shown by this JS code:

  function openDocMoveToProcessWindow(docRef) {
    jQuery('#modalMoveDocToProcess').modal({
      focus: true,
      keyboard:true
    });
  }

Possibly my own modal window interferes with the mechanism of camunda’s tasklist, which blocks a task form until the task has been claimed.

Does someone have an idea how to fix this?

2

Hi @Dierk,

once a while ago I created this example: code/snippets/embedded-form-development-example at master · camunda-consulting/code · GitHub

Don’t know if but I

Hope that helps, Ingo

3

Hello @Ingo_Richtsmeier,

thank for the sample code, it works now. I had to include the following libraries at the beginning of my html form file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Including these libraries via the tasklist script configuration did not work, bootstrap complained that jquery was not loaded yet, but maybe I can fix this as well.

I am still wondering whether or when the tasklist will be migrated to a new JS framework as AngularJS is out of support now, see this thread: Tasklist webapp / angularjs end of life - Optimize - Camunda Platform Forum

Are there any plans regarding this?

4

Hello @Ingo_Richtsmeier ! Hope you are doing well. I follow your example, but when I add form to the modal’s body, it seems that submit event is not thrown. I have no error in the console. Do have any ideas about how to fix the problem ? Sorry for my bad English, it is not my mother tongue. Have a nice day !

5