Question

Laserfiche Cloud Page Breaks via LFForm Object in HTML Inject (JS) and CSS

Laserfiche Laserfiche Cloud Forms Layout Designer

Updated July 27, 2023

asked on July 5, 2023 • Show version history

Hi all,

I'm pretty stuck on this one. What I'm trying to accomplish is to page break after a certain block element, so that the print output confines one table / block element per page.. For example, I'd like to use LFForms calls to retrieve table values, and then inject HTML into an HTML Field using the table data. The Data should be separated by Page Breaks. This is using LF Cloud.

// -- This Section is Going to try and implement page breaks
var contentPB = '<table class="tablePB"><tr><td> This text will go over the page and force a break because it ACTS large and in charge</td><td> We be demonstrating multiple elements</td></tr></table>'

for (i=0; i < 6; i++) {
  
  let tempPB = '<table class="tablePB"><tr><td> This text will go over the page and force a break because it ACTS large and in charge</td><td> We be demonstrating multiple elements</td></tr></table>'
  contentPB += tempPB
}
LFForm.changeFieldSettings( {fieldId: 5}, {content: contentPB} )

yields:

I've gotten so many mixed results I'm not really sure what is going on. I'm only trying to use one HMTL field because I don't believe the LFForm Object allows you to add fields. I've had it break the page 3 times per table/block element (and stop after that...?) and tried:

flipping between <div>, <p> and <table> tags
<div style="page-break-after: always">
.pagebreak { break-after: page } => <div class="pagebreak">

And so on.

Not sure what I'm doing wrong. Thanks!

EDIT: A Different Approach...

Rather than using a HTML Inject table, it seems like a Collection has produced the results I've wanted.

I could then apply the CSS class to distribute the sets:

.fl-collection.fl-component {height:auto;} // this helps with odd CSS calculations

// Helps me fit as many full badges per page
.fl-collection.fl-component .collection-set { page-break-inside: avoid;  }

-or-

// Forces one per page
.fl-collection.fl-component .collection-set { page-break-before: always!important;  }

I was able to utilize Javascript to inject HTML using LFForm.getFieldValue() from the arrays of the collection, but I didn't use this in the case where I needed the page breaks.

I'm still having issue using page breaks happening after the HTML Object (or anything after).

0 0

Answer

SELECTED ANSWER

replied on July 7, 2023 • Show version history

I would love if I could get the page break working within the single Custom HTML element.

For what it's worth, I did test this. This is how I would do pre-added Custom HTML elements without worrying about field IDs as this uses Class Name. This did work to add the page breaks after each item. I added 10 custom HTML elements to the form, giving them all the CSS Class Name of badgeField. Then I added this Javascript which grabs all fields with that badgeField class, hides them all, and then loops through the first six of them, updating them, and showing them. At the end, only the first 6 are shown and the other 4 are still hidden, and there is a page break between each of the six that are shown.

var badgeArray = LFForm.findFieldsByClassName('badgeField');
badgeArray.forEach(function (arrayItem) {
  LFForm.hideFields(arrayItem);
});

for (i=0; i < 6; i++) {
  
  var contentPB = '<table class="tablePB" style="page-break-after:always!important;"><td width="10%">row: ' + i + ' </td><td width="70%"> This text will go over the page and force a break because it ACTS large and in charge</td><td width="20%"> We be demonstrating multiple elements</td></tr></table>';
  LFForm.changeFieldSettings( badgeArray[i], {content: contentPB} );
  LFForm.showFields(badgeArray[i]);
}

10 fields in the designer:

But only six fields in the live form:

1 0

Replies

replied on July 7, 2023

I've been putting off reviewing your question because you mention using APIs - which I can help with, but it's complicated and time consuming. And I think you've probably put off a lot of other potential responses with that as well. But the more I review your question, the more I think it has nothing to do with any APIs. You are talking about using the LFForm Object (also known as the LFForm interface) within Javascript on the Forms Layout Designer. The LFForm Object is not really an API and is just confusing to refer to it that way. But I did keep coming back to your question, wanting to try to provide some assistance if I could...

I have tried to tackle your question about the page breaks, and I'm not having much success. Using your code and a little bit of CSS in addition, I can very consistently get page breaks to show after the Custom HTML element, but never within it, so never between the individual tables. Ultimately, Forms is going to try very hard to never break-up the contents of a specific Form element (to avoid things like labels being on one page and the field being on the next), and I haven't quite cracked the secret of what CSS style I would have to override in order to make it work.

So, now I'm wondering if there is an alternate way we can help you achieve your goals with this process.

First - I'm wondering if you are aware of that Custom HTML elements do not store values. That means that the edits you make to the Custom HTML element via Javascript on this form, only exist on this form while it is active. Once you submit that form, the value is gone and the Custom HTML element reverts to its original settings. It doesn't carry over changes to other forms on other user tasks, or the history of the form in the Monitor page, or the archival of the form to the repository. It will try to run your Javascript again on those other places, and depending on what the full Javascript is doing, it might work, and it might not. But what it is doing it completely re-running that Javascript each time the form is loaded, not populating and saving values within that Custom HTML element. Is that a problem for you and your process?

Second - The CSS you are trying to do for page breaks, is mostly for printing, it isn't going to change how the form looks on the screen, it isn't like the built-in pagination functionality of the Form Layout. Is that a problem for you and your process?

Third - If you definitely need to use Custom HTML elements, and the concern is not being able to add more via the LFForm object - are you able to just work with multiple Custom HTML elements, leaving them blank initially, and only populating them if they are needed?

If I'm way off the mark - then please provide some more information regarding your goals with this process, and hopefully myself or others will be able to provide better feedback and advice.

1 0

replied on July 7, 2023

But the more I review your question, the more I think it has nothing to do with any APIs. You are talking about using the LFForm Object (also known as the LFForm interface) within Javascript on the Forms Layout Designer.

Thank you for this critique! I just taught myself Javascript so some of the terminology is a bit of a whirlwind for me. I've made corrections in both the Title and Question.

Ultimately, Forms is going to try very hard to never break-up the contents of a specific Form element (to avoid things like labels being on one page and the field being on the next), and I haven't quite cracked the secret of what CSS style I would have to override in order to make it work.

I almost wondered if it had something to do with { display: flexbox } sorts of characteristics on the parents. Still trying to research CSS. I have managed some container specific Page Breaks in other Business Processes.

First - I'm wondering if you are aware of that Custom HTML elements do not store values.

100%: what I'm specifically trying to accomplishing is printing a badge (or two) per page using the previously acquired fields in my Business Process and do not need any more user input (this is the final step).

Second - The CSS you are trying to do for page breaks, is mostly for printing, it isn't going to change how the form looks on the screen

100%: I needn't affect the display, just the printing format.

Third - If you definitely need to use Custom HTML elements, and the concern is not being able to add more via the LFForm object - are you able to just work with multiple Custom HTML elements, leaving them blank initially, and only populating them if they are needed?

To be honest, I'm going a bit for extra credit to see how far I can push LF Forms (cloud). I have 10 separate HTML Objects, but I see the potential bottleneck if I want to replicate this process for 50 or 100 badges?

I prefer the idea of a very concise loop in one object to accomplish what I need. Your suggestion of pre-inserting many HTML object Fields does sound like the best worst-case scenario. However, I don't like the idea of field Id's getting all jumbled if I decide to add or delete different field types further in the draft.

Perhaps this is a case of the juice not being worth the squeeze? Thank you for your insight, Matthew!

0 0

SELECTED ANSWER

replied on July 7, 2023 • Show version history

I would love if I could get the page break working within the single Custom HTML element.

var badgeArray = LFForm.findFieldsByClassName('badgeField');
badgeArray.forEach(function (arrayItem) {
  LFForm.hideFields(arrayItem);
});

for (i=0; i < 6; i++) {
  
  var contentPB = '<table class="tablePB" style="page-break-after:always!important;"><td width="10%">row: ' + i + ' </td><td width="70%"> This text will go over the page and force a break because it ACTS large and in charge</td><td width="20%"> We be demonstrating multiple elements</td></tr></table>';
  LFForm.changeFieldSettings( badgeArray[i], {content: contentPB} );
  LFForm.showFields(badgeArray[i]);
}

10 fields in the designer:

But only six fields in the live form:

1 0

replied on July 7, 2023

Thank you! I think the Class Name approach should be make me less wary about confusing Field ID's.

I will have to keep in mind this LF Cloud limitation designing future Business Processes.

1 0

You are not allowed to follow up in this post.

Question

Question

Laserfiche Cloud Page Breaks via LFForm Object in HTML Inject (JS) and CSS

Answer

Replies

Sign in to reply to this post.