Create a document from an embedded task form

steftriant · May 26, 2019, 2:01pm

I’ve been reading your suggested way here but I have some questions:

First of all, I downloaded the free version of jspdf. How can I include and use it in my embedded task form ?
As far as the coding is concerned, must I use the jQuery framework (like the example here) ? If yes, how can I include this framework in my Camunda project ? I’ve never used it.
As far as the custom script is concerned, the required property “customScripts” is already included as a comment in the config.js file.
I can’t understand here which AngularJS module names must be added as dependencies and where.
Generally, could you please guide me a bit in the content of the config.js file ?

Many thanks,
Steve

martin.stamm · May 27, 2019, 2:49pm

All your questions come down to the custom scripts, so I’ll guide you through that first:

You download the libraries and place them in the app/tasklist/scripts directory of your webapp. Then you add them in the app/tasklist/scripts/config.js. Here is an example how you would add JQuery:

  customScripts: {
    ngDeps: [], // can be left empty
    deps: ['jQuery'], // The variable which you use to reference the library
    paths: {
      'jQuery': 'scripts/jquery-XXX' // The filename without .js 
    }
  }

The library is then available for use in Tasklist and embedded forms. You might need to do a hard refresh (ctrl+F5 in chrome) to see the changes.

If this does not solve your question, let me know.

KR
Martin

steftriant · May 27, 2019, 4:25pm

Hi @martin.stamm. jspdf downloaded library includes the following:

Have I to place in the suggested directory all the available js files ?

steftriant · May 27, 2019, 4:43pm

martin.stamm:

Here is an example how you would add JQuery:

  customScripts: {
    ngDeps: [], // can be left empty
    deps: ['jQuery'], // The variable which you use to reference the library
    paths: {
      'jQuery': 'scripts/jquery-XXX' // The filename without .js 
    }
  }

@martin.stamm, could you please clarify the last line of the code ? Where does XXX is referenced and whose file must I write the name ?

Could you please take a look at my following screenshot (from my config.js file) and tell me if I’ve written sth wrong ?

Thank you very much,
Steven

martin.stamm · May 28, 2019, 6:48am

That’s the name of your javaScript file. For example, if you downloaded jquery-3.4.1.js, you would put 'jQuery': 'scripts/jquery-3.4.1'

steftriant · May 29, 2019, 4:38pm

@martin.stamm by saying “place the libraries”, you mean all the downloaded folder of the jspdf or some specific js files ?

Inside my downloaded jspdf folder, there isn’t any jquery-XXX.js file
Could you please tell me where can I find it ?

Thanks a lot,
Steven

martin.stamm · June 4, 2019, 10:57am

Hi,

the JQuery is an example of a library you might want to add. Please replace the names and filepaths with the libraries you want to use

steftriant · June 11, 2019, 8:10am

Hi @martin.stamm,

Eventually, I decided to follow a different approach as far as the generation of the document.
My purpose here is to convert the following filled-in html form to a pdf document via a Service Task Java call.

Could you tell me please if I must get this html form as a file with a Rest Api Call like this one firstly ?

Thanks a lot,
Steve

steftriant · September 1, 2019, 4:41pm

Hi @martin.stamm,

As far as our recent discussion here is concerned, I managed to dynamically (on the submission of the form) generate and save in a directory path of my choice the PDF document

But, could I please ask for an additional help here ?
I would prefer to automatically download this document rather than simply save it.
From another thread here Dynamic cam variable name - #6 by steftriant I read that cam-file-download directive can only work on the initial load of the form and not on the submission like in my case.
Have you got any idea please on how could I overcome this issue ? I didn’t take any answer there.

Thanks a lot in advance,
Steve

martin.stamm · September 2, 2019, 1:16pm

Hi @steftriant,

Do you generate the file in the browser using JS? Might I see the code part where you save it currently?

If you want to perform an action on form submission (such as a download), you can use the camForm.on('submit', function(){}) directive, as described here: https://docs.camunda.org/manual/latest/reference/embedded-forms/lifecycle/#event-listeners

steftriant · September 2, 2019, 4:32pm

Hi @martin.stamm

First of all, thank you very much for your feedback
The PDF document is generated in the browser (on the submission of the task form) by using a Java library called openhtmltopdf.

Yes, of course the code part where the document is saved is the following :

System.out.println(fieldNames.toString());
      	try (OutputStream os = new FileOutputStream("/tmp/out.pdf")) {
            PdfRendererBuilder builder = new PdfRendererBuilder();
            builder.useFastMode();
            builder.useFont(new File("/tmp/SourceSansPro-Regular.ttf"), "source-sans");
            builder.withHtmlContent("<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html><html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/><meta charset=\"UTF-8\" />"+
            "<style>"+
           		"@font-face {"+
   					"font-family: 'source-sans';"+
            		"font-style: normal;"+
            		"font-weight: 400;"+
            		"src: url('file:///tmp/SourceSansPro-Regular.ttf');"+
            		"-fs-font-subset: complete-font;"+
            	"} *{font-family: 'source-sans';} "+
			"</style></head><body><div></div><table style=\"width:100%;\" border=\"1\">"+
				"<tr>"+
					"<td>Τοπικός Διαχειριστής</td>"+
					"<td>Κατηγορία</td>"+
					"<td>Περιγραφή</td>"+
					"<td>URL Αρχείου</td>"+
					"<td>Τιμή (€)</td>"+
					"<td>Ποσότητα</td>"+
					"<td>Σύνολο</td>"+
				"</tr>"+pdfHTMLtrs+
				"</table></body></html>","");
            builder.toStream(os);
            builder.run();
        } catch(Exception e) {
		
		}

I’ve defined the

/tmp/out.pdf

as the directory path for the generated pdf here.

Could you please guide me a bit on the required piece of code into the “submit” Event Listener ?
My generated doc isn’t previously declared as a process variable, so can I use the cam-file-download directive on the submission of the form ?

Best regards,
Steve

martin.stamm · September 3, 2019, 6:57am

Hi @steftriant,

thank you for the information! I see that you use Java to create the PDF, so I believe that it is created on server side? I’m not a Java expert, so please correct me if I get something wrong.

So I can better get a better overview, can you please check: Is the PDF created on the server’s or on the client’s file system? How do you trigger the execution of the Java Code (e.g. Task Event Listener)?

Best Regards
Martin

steftriant · September 4, 2019, 1:05pm

Hi @martin.stamm,

thank you for your feedback!
I’m not also very experienced in Java but from what I read here
https://www.quora.com/Is-Java-a-client-side-or-server-side-program
I imagine that since Java is considered to be a server-side language, you’re right.
I will ask a developper to be sure about your question with the file system and I will let you know of course
The Java class file (with the code for the creation of the pdf) is called by a “Complete” Task Listener in Modeler, yes

Best Regards,
Steve

martin.stamm · September 4, 2019, 1:39pm

Hi @steftriant,

From what you wrote it seems to me that you create the PDF on the server. Before we can download it, you have to make it accessible to the Process Engine, e.g. by saving it as a process variable via the java API[1] instead of writing it to the file system.

Once you have that you can create a download link in a separate user Task.

Best Regards
Martin

[1] https://docs.camunda.org/manual/7.11/user-guide/process-engine/variables/#set-and-retrieve-variables-overview

steftriant · September 6, 2019, 1:45pm

Hi @martin.stamm,

I took a first look at your attached link and it seems very interesting, thanks a lot

Can I please ask you sth if you know ?
For created files which must be saved as process variables via the java API, the Typed Value API is considered to be more suitable ?
And do you know please what does it mean that “Files can be persisted as BLOBs in the database” ?

Best Regards,
Steve

martin.stamm · September 6, 2019, 2:44pm

Hi @steftriant,

I will try my best

I have not worked with this part of the API yet, but from the documentation it seems that you need to use the Typed Value API to set metadata like filenames.

A BLOB is a Binary Large Object, so you can put any data you want in there.

Best Regards
Martin

steftriant · September 16, 2019, 11:15am

Hi @martin.stamm,

I followed your suggested method and it’s ok

Inside the Java code which is called via the “Complete” Task Listener, a new file value (with its metadata) is created (as described in the Typed Value Java API in the Docs here https://docs.camunda.org/manual/7.11/user-guide/process-engine/variables/#file-values) and in the succeeding html task form, the relative file can be downloaded via Camunda’s cam-file-download directive.
Thanks a lot again for your valuable hint

Best regards,
Steve

LittleDeveloper · November 9, 2020, 2:20pm

Hello Mr. @martin.stamm ,

Personally, when I use JQuery, I do not use a library call variable. I only use the $ symbol to use jquery.

Moreover, if I want to use another library, how do I know the name of this famous variable that references my library?

Thanks for your help and have a nice day

martin.stamm · November 9, 2020, 2:47pm

Hey @LittleDeveloper

First: If you have problems with the Custom Scripts, please consider opening a new thread. Don’t necro-bump unrelated ones. Check https://forum.camunda.io/faq for our contribution guidelines.

Second: What excactly do you mean with “variable that references my library”? The post you are replying to shows a requireJS definition. You can rename jQuery to foobar in the config if you want to. It just loads a JS file. Check the requireJS documentation and Custom Script Documentation for more details.

Cheers
Martin

system · January 30, 2024, 11:43am