Camunda: PDF In User Task Form

How to embed a PDF in a User Task form, from a process variable

What is Camunda?

Camunda BPM is an open-source workflow and decision automation platform. Camunda BPM ships with tools for creating workflow and decision models, operating deployed models in production, and allowing users to execute workflow tasks assigned to them.

It provides a Business Process Model and Notation (BPMN) standard compliant workflow engine and a Decision Model and Notation (DMN) standard compliant decision engine, which can be embedded in Java applications and with other languages via REST.

However , we are concerned with the HTML forms embedded in a User Task

The Problem

Camunda has documentation on how to include an image file from a process variable inside a User task form as follows;

<div class=”col-md-6"> <img src=”{{ camForm.variableManager.variable(‘PORTRAIT’).contentUrl }}” class=”img-responsive”> </div>

But it does not work for a PDF file. This is unfortunate as a common use case is to upload a PDF file as a variable and then have a preview option on a subsequent form. Sooo how???

The Solution

I solved the issue by using fetch within the cam script section of the form. I am basically fetching a process variable that contains the PDF and converting it to a blob.

Then I use <embed> to display it.

The Cam Script/JS

<script cam-script type="text/javascript">


camForm.on('form-loaded', function () {
        fetch("http://localhost:8181/camunda/api/engine/engine/default/task/" + camForm.taskId + "/variables/ACORD_FORM/data").then(function (response) {
            return response.blob();
        }).then(function (myBlob) {
            var objectURL = URL.createObjectURL(myBlob);
            document.querySelector('#pdf-frame').src = '';
            document.querySelector('#pdf-frame').src = objectURL;
            objectURL = URL.revokeObjectURL(myBlob);
        });

});
</script>

The HTML

<embed  class="col-sm-12" style="height:100vh;width:100%" type="application/pdf" id="pdf-frame">

Thank you for reading! Feel free to make any other suggestions or recommendations for future challenges. Leave a few claps if you enjoyed it !