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

Discussion

Discussion

How to Save or Download Form Content as PDF or TIFF when using Custom HTML Table in Forms

posted on December 15, 2014 Show version history

Hello everyone,

I'm using some Javascript to create a table (using a custom HTML element) in forms. table displays on the form with all of the inserted rows but the auto PDF and TIFF renditions do not show the information. Neither does the confirmation page.

 

I'm able to use the PDF Filler activity in workflow to create my own PDF as I'm also writing the data to a hidden text field but this is a work-around. Is there another way?

 

I'm using Forms 9.2 with the recent hotfix. Below is the code I'm using to populate the table. The table structure was created in the HTML element on the form. The java simply adds rows:

 

$('#q13 tr').last().after('<tr><td>' + itemNo + '</td><td>' + status +'</td><td>' + amount + '</td><td><a target="_blank" href="' + entryID + '">Review this Record in Web Access</a></td></tr>');

 

0 0
replied on December 17, 2014

Hmm, sorry for being a bit too vague, and I'm glad you have a workaround. I'll try to clarify below, if that helps. But before getting into that, the problem may be in how you're trying to reference the field. If you have a multiline field, you will need to look at both $('.HiddenData textarea').val() and $('.HiddenData .ro').text(). If either one has a value, use it to redraw your table. If you have a single line field, you would still need both of those jquery commands, but you would need to replace the "textarea" in the first one with "input" so that it would become $(".HiddenData input").val().

I also wanted to try and explain the whole process a little better this time. This would be for a situation where your web page loads without the table, and then after some user interaction or form event you create this dynamic table on your form.

  1. Create a hidden field (I'll assume a CSS class of "HiddenData") to store your data.
  2. Add code to the $(document).ready() function to check if HiddenData contains any content.
  3. If yes, run some additional code to fill your HTML table based on the content in HiddenData.
  4. Add whatever additional code you normally use to handle the user/form events, etc.
  5. Whenever you respond to an event that would cause the HTML table to update, be sure to also include code that will output updated information to the HiddenData field.

 

The idea behind this is that the form loads initially, there is no table content and so the HiddenData field is initially blank. As the user/form triggers an event which creates or updates the table, you both draw the table on the form AND update the hidden field with your content. When the user presses submit, all the form fields (including your now populated hidden field) get saved, the form gets reloaded, and now there will be content in that hidden field which will trigger your code in the ready() function to redraw the table.

0 0
replied on December 16, 2014

Hi Scott,

I think I follow what you're getting at. At them moment I've been posting a copy of the table data to a hidden field in a comma delimited format. Then reading into workflow and creating a PDF from it that way. It's working fine that way.

I tried reading the field value (after un-hiding it) to check but couldn't do it. Using the alert function, I was getting "undefined" or simply blank.

I've tried $('textarea#field27') also $('.fiieldWithText textarea'). I've also tried .val() and .text(). I've been able to read a single line input value though.

I'll park this for now as I have a solution (creating the PDF with workflow) so will park this query for now. Thanks for your help though.

-Ben

0 0
replied on December 15, 2014

This sounds like an issue I've run into before, where any content you dynamically add to a custom HTML field (or by just directly adding to the page using javascript) will not make it into the stored image due to the way the submission process works. Essentially during a submit event, Laserfiche converts all the fields to read only and reloads the web page before generating the image.

The only workaround I've seen is to find a way to run your javascript when the form loads (inside the $(document).ready() function), so that it will be regenerated properly when the page reloads during the submit process.

One way to force this to happen, even when you can't run your javascript directly on form load, is to use a hidden laserfiche field to store your content as HTML. Then when the page loads, check this hidden field for a value and regenerate your table content if there is any content there. An example of this can be found in the old BPM251 signature code:

$(document).ready(function () {

    function htmlEncode(value) {
        return $('<div/>').text(value).html();
    }

    function htmlDecode(value) {
        return $('<div/>').html(value).text();
    }

    /**When the page loads, check if the sig data (hidden) field has a value.
       If it has a value, decode it and put it in the image, and remove the
       signature pad and its buttons.**/
    var sigvalue = $('.sigdata textarea').val();
    var sigrovalue = $('.sigdata .ro').text();
    if (sigvalue != '' || sigrovalue != '') {
        var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
        var $img = $('<img class=imported></img>');
        $img.attr("src", decoded).appendTo('#sigimage');
        $('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
        $('.sigwarning').hide();
    }
});

The HTML encode/decode functions are just some simple wrappers that handle the string formatting with regards to certain special characters in HTML (&, <, >, etc...).  The key part at the bottom is that it checks the hidden ".sigdata" class element, looking for data in both its textarea and "ro" readonly  elements, for any information. If it finds something, then it loads the data onto the form. In this example, the data stored in the hidden field contained an image, which is loaded into the "src" attribute of a new image element. That element is then placed on the form at the "#sigimage" target.

I think you could adapt this code to meet your needs if you can understand what's happening there.

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

Sign in to reply to this post.