You are viewing limited content. For full access, please sign in.

Question

Question

Print - Save to Repository CSS

asked on October 30, 2018

Is there any way to simulate the PDF view of form within the browser?  In particular, I'm having a lot of difficulty trying to get my PDF forms to look correct when saving to the repository.  I've read many Laserfiche Answers about how to use things such as @media print in the CSS, but find it very frustrating to get the PDF to look the way I want on print. 

Is it possible to replicate the PDF view in a development tool that would allow the inspection of the elements and CSS?  I don't like having to run the form...save the output...open the PDF to see if my CSS changes had any effect.

As a side note, how do I get a textarea (multiline textbox) to span the width of an outputted PDF saved to the repository or emailed?

0 0

Answer

SELECTED ANSWER
replied on October 30, 2018

tl;dr: Set the form as the starting form, then check the "Show submitted form" option under the On Event Completion tab. Then you can inspect the readonly version of the form you see on the thank you page.

--

When you submit a form, Laserfiche Forms re-renders it behind the scenes using the data you submitted, but makes some changes to the HTML. If you are JavaScript savvy, you can read exactly what it is doing by opening the printForm.js file in Laserfiche Forms\Forms\js\form directory and copy-pasting its contents to pretty-printer (like this one). Specifically, the ConvertFieldsReadOnly function is the one doing this work (it is triggered from _PrintFormLayout.cshtml located at Forms\Views\Form).

An easier way is to examine the output directly by setting the form as the starting form of the process, and then using the "display submitted form" option in the Message Start event. Then when you submit the form, you see your submitted (and saved) form on the thank you page. You can then inspect the DOM and determine what styles you need to apply in your CSS. You'll note many changes, such as `input` fields rendered as `divs`, and so on.

Here's the thing though: the "readonly" submitted version of the form is fed to a third-party tool called wkhtmltopdf, which takes the html and converts it to PDF. This is the best html-to-pdf converter out there, but it's still not perfect. It uses an older rendering engine that doesn't support some of the more modern HTML5 features (like flexbox), which results in sometimes slight, sometimes not so slight discrepancies between what you see on the thank you page and what is actually stored. So don't expect a perfect conversion, especially if you have some "adventurous" CSS rules. smiley

4 0
replied on October 31, 2018

Thanks for the great info Ege.  This has always been a frustration for me.  Your explanation really helps.  I'm still hoping that Laserfiche can make some enhancements in this area in order to make designing/formatting the final PDF a less tedious process.

0 0

Replies

replied on March 5, 2019

Thanks for the feature idea. I've included this idea in our Forms feature ingestion portal for review. You'll likely still have to use JS and CSS tailored specifically to editable forms vs read-only forms, but the preview idea for the generated form is a good one. 

3 0
You are not allowed to follow up in this post.

Sign in to reply to this post.