How to view image file in User Task

Camunda 7 Topics Discussion & Questions
,
1

Hello,

I have a process using OCR in order to read data from an image that is attached as File variable to the process instance.

Now, since OCR is not completely reliable, the process consists of a validation task. If validation fails a human has to check the image and extract the data manually:

image

Now, I would love to show the image directly in the User Task korrigieren so users could view the image immediately when claiming the task.

I am scared that this might require some javascript magic, which gives me flashbacks. Before I travel down that road, I’d like to know: is it feasible? Is there probably already a built-in trick in Camunda Tasks that creates a view of an image?

Kind regards,
Markus

2

Hi @Noordsestern

You can take a look at the solution discussed here.
If that doesn’t work for you then, I’m sorry to have to report, but you’re probably gonna need to back your bags and head down the magic javascript road. That said, i’m sure there are lot of examples around. If you find a solution be sure to let us know

1 Like
3

Hi
This blog post may also be of interest…

regards

Rob

4

Hi @Rob,

Thank you! That is interesting! In addition, the underlying form seems to be exactly what I am looking for. Do you know if there is an example form like this somewhere public?

Regards,
Markus

5

Hi Markus,

Not sure about something in public, but I can share the Angular form for that blog post example;

<form role="form" name="reviewForm">
<input type="hidden"
       cam-variable-name="FACEMATCH_SIMILARITY"/>
<input type="hidden"
       cam-variable-name="FACEMATCH_SOURCE_CONFIDENCE"/>
<input type="hidden"
       cam-variable-name="FACEMATCH_TARGET_CONFIDENCE"/>
<input type="hidden"
       cam-variable-name="FACEMATCH_SOURCE_OVERLAY"/>
<input type="hidden"
       cam-variable-name="FACEMATCH_TARGET_OVERLAY"/>

<div class="panel panel-default">
    <div class="panel-heading"><strong>Similarity : {{FACEMATCH_SIMILARITY}}%</strong></div>
    <div class="panel-body">
        <div class="col-md-6">
            <div class="panel panel-default">
                <img src="{{ camForm.variableManager.variable('FACEMATCH_SOURCE_OVERLAY').contentUrl }}"
                     onerror="this.onerror=null;this.src='/FaceMatch/forms/images/blank-person.png';"
                     class="img-responsive"/>

                Source Image (Face Confidence : {{FACEMATCH_SOURCE_CONFIDENCE | number : 2}}%)
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <img src="{{ camForm.variableManager.variable('FACEMATCH_TARGET_OVERLAY').contentUrl }}"
                     onerror="this.onerror=null;this.src='/FaceMatch/forms/images/blank-person.png';"
                     class="img-responsive"/>

                Target Image (Face Confidence : {{FACEMATCH_TARGET_CONFIDENCE | number : 2}}%)
            </div>
        </div>
    </div>
</div>

<label>Review Assessment</label>
<select cam-variable-name="FACEMATCH_ASSESSMENT"
        cam-variable-type="String">
    <option>APPROVE</option>
    <option>DECLINE</option>
</select>

Its quite simple really, a combination of Angular and Bootstrap. The ‘secret sauce’ was to use hidden form fileds to force loading of the process variables. Note this technique worked with Camunda version 7.4 or so, but there is a chance tasklist has changed a little sinc then…

regards

Rob

1 Like
6

Thank you @Webcyberrob !

I just came to continue on embedding an image in a user task now.

I extracted the following snippet from your example which enchants my embedded form with a image stored in varialbe document of the current process instance:

<img src="{{ camForm.variableManager.variable('document').contentUrl }}" alt="You should have seen an image here.">

image
image2559×851 214 KB

1 Like
7

wow and very nice