PDF in Form embedded

Camunda 7 Topics Discussion & Questions
,
1

HI,

I explain you my problem. I have a file in my process instance. It’s a binary variable, in Cockpit I can easly download my PDF.
i follow this to store in the database :
https://docs.camunda.org/manual/7.8/user-guide/process-engine/variables/#file-values

But in my embedded form I want to display this pdf or open a new page that contain this pdf.
i try this simple :
< iframe src="data:{{ camForm.variableManager.variable(‘justificatifFile’).value }} " >

but it still not work, when i use the console.log to see the content of my variable justificatifFile it’s undefined…

Can I have some Help please ?

Thanks.

2

Hi @Patrice,

The Value of the Variable is not fetched into the frontend as those can be really big files. Instead you get a path to download the contents with camForm.variableManager.variable(‘justificatifFile’).contentUrl

If you need the file data of the pdf, fetch the data with a script and continue from there. Some resources that might help you are:
https://docs.camunda.org/manual/latest/reference/embedded-forms/javascript/lifecycle/#fetching-additional-variables
https://docs.camunda.org/manual/latest/reference/embedded-forms/javascript/examples/#load-additional-resources

3

@martin.stamm Thanks for you’r reply.
I already fetch the variable like this

	variableManager.fetchVariable('justificatifFile');

I try this :

inject([’$http’, ‘Uri’, function($http, Uri) {
camForm.on(‘form-loaded’, function() {

    $http.get(Uri.appUri("engine://engine/:engine/task/" + camForm.taskId + "/form")).then(function(result){
      $scope.contextPath = result.contextPath;
    });
  });
}]);

and in the form

< img ng-src="{{contextPath}}/JUSTIFICATIF.pdf" />
but i have this error : TypeError: Cannot read property ‘value’ of undefined

i try also
< div class=“form-group”>
< label class=“control-label”>Piece d’identitee :
< div class=“controls”>
< a href="{{ camForm.variableManager.variable(‘justificatifFile’).contentUrl }}" target="_blank">Camunda variable
< /div>
< /div>
But when I click nothing happen

4

Hi @Patrice,

we have page in our demo archetype to display the PDF document in an embedded form.

You can either create a project from the camunda-archetype-demo (https://docs.camunda.org/manual/7.11/user-guide/process-applications/maven-archetypes/)

or have a look here:

Hope this helps, Ingo

5

Thank you @Ingo_Richtsmeier i check and i give you me feedback :slight_smile:

6

@Ingo_Richtsmeier
I’m trying your solution but I have 1 question in your example this line :
< object data="{{contextPath}}/file-variable?taskId={{taskId}}&variableName=document" type=“application/pdf” style=“width:100%; height:585px;” >

refer to a variable named document. I suppose this variable is a process instance variable, but what it’s the type ? a Byte value or a File value ?

You can see for me how the variable appear in Cockpit

Untitled
Untitled2822×96 3.8 KB

this is my error :

:8080/forms/task-form.html/file-variable?taskId=cdec3228-fbe2-11e9-97ca-000c299b2f61&variableName=justificatifFile:1 GET http://localhost:8080/forms/task-form.html/file-variable?taskId=cdec3228-fbe2-11e9-97ca-000c299b2f61&variableName=justificatifFile 404

7

Do you have an updated url for this example? The repo is not longer available

8

Hi @SlappyAUS,

the archetypes are rearranged. You can find the forms here: camunda-archetypes/camunda-archetype-spring-boot-demo/src/main/resources/archetype-resources/src/main/resources/static/forms at master · camunda/camunda-archetypes · GitHub

Hope this helps, Ingo

9