Page Breaks (when printing form)

[Paul Lynch]

Hi Alex,

I have a form with a few tabs. When you create and edit you fill in these tabs.

But on the Displayform.aspx. I have all these separate tabs sections laid out in one giant tab. Then I added button to Print the page.

My problem is that when I print (in Chrome) the page breaks are pretty random. They sometimes cut off text or section titles halfway through.

I guess I need to manually enter some “page breaks” somewhere but not sure exactly how.

The CSS or Class name is tabH1

And I think I need to add something like this

.tabH1 {page-break-before: always;}

But I am not sure if this is correct or where to add it.

[Paul Lynch]

Btw if I add the “Print Tab” option in DFFS, it will print the whole form, but it drops all the formatting so where you have long questions in the form, the text wraps up so small it is really hard to understand the form.

[Alexander Bautz]

I’m actually not sure if this will work because it’s all inside a table and I’m not sure you can force a line break in a table.

Please note that for the CSS to affect the printout (when using the Print active tab setting) you cannot load an external CSS file or use classes from SharePoint in general – all CSS must be in the Custom CSS tab.

Alexander

[Paul Lynch]

Ok thanks that is good knowledge.

So potentially I can add CSS to the “Print Active Tab” by placing it in the “Custom CSS Tab” and change the format to make it look pretty?

[Alexander Bautz]

Yes

Alexander

[Paul Lynch]

It seems to drop all formatting though when I click on the DFFS print button. I’m not sure how to grab the CSS classes from the print preview in order to add them into the CSS tab.

Also I notice the vLookup table disappears/do not render.

So guess that option is out?

[Alexander Bautz]

I’m not sure I understand – can you show me some screenshots of the tab you try to print and how the actual printout looks?

Alexander

[Paul Lynch]

Sure I will post

1) original form in browser (chrome)
2) Browser standard “print page” button (print preview) – shows up vlookup (but cuts off text due to HTML table).
3) DFFS print tab button – showing up as generally unformatted text, also does not show up the vlookup table from the form. Does not cut off text though!

Attachments:

1. 

   Original_Report_page.png
   

2. 

   report2_chrome_print_page.png
   

3. 

   pdf1.png
   

[Paul Lynch]

Sorry I need to update, actually in IE, the DFFS Print tab is picking up and showing the vLookup table (just Chrome that isn’t).

[Paul Lynch]

I think rather than page breaks, I think using the DFFS print tab is the way forward here.

Main issue now then is that text is cut off when I go to print the form. (see image).

Is there a way I can use CSS to limit or resize the form/tab to ensure no text is cut off e.g. forcing a max-width of the form?

Ideally I’d also like to be able to put the headings in bold and increase the width of the left questions columns (but no CSS seems to work when I print).

Attachments:

1. 

   form_dffs_print.png
   

[Alexander Bautz]

If the form is wider than ~720 pixels it will not print in a portrait page. You might be better off design a dedicated print tab in DFFS and layout the form in a narrower layout. If not you can try changing to landscape mode when printing. In Chrome you can use some CSS to force landscape like I have show below.

Here are some examples:

@media print{
    // Set label column width
    .ms-formlabel{
        width:200px;
        white-space:normal;
    }
    // Set table width to try narrowing the form when printing
    .dffs-print{
        max-width:720px;
    }
    // Chrome - set landscape mode
    @page {
      size: landscape;
    }
}

Alexander

[Paul Lynch]

Thanks Alex, I’ve been away trying to figure this out. I just want to clarify two things;

For my Dispform.aspx – I have a single TAB with all the fields listed in sections that I want to print. I guess this is as close to a custom print tab as I will get?

If I click in browser to print page in this tab/page, it keeps all the formatting fine (in landscape as you say). But each page cuts certain lines of the text. It appears, this is one large table so you say there is no way to add page breaks in between the sections headers via HTML. I cannot have text cut in half when printing.

If the text breaks cannot be resolved, then I guess it rules out printing via the browser?

This only leaves the option to print via the “DFFS print tab option” – this shows everything, no page breaks/text cut in half.

It just doesn’t look great. It’s black and white (when you use browser to print page, you get all the formatting like coloured zones etc..)

Also if you have a very long question in column 1, then yes/no answer in column 2. The first column is quite small and wraps the text.

Just to confirm – you cannot format this way of printing.

If the above two things are confirmed, I think I have exhausted every avenue and will just have to use the DFFS print tab unformatted.

Thanks and Happy New Year!

[Paul Lynch]

Sorry one more question.

DFFS installer, lets you install it for the
NewForm.aspx
EditForm.aspx
DispForm.aspx

I created a new/custom editform.aspx (form) in SharePoint Designer. The idea is to use DFFS to make all the editable fields READ only, so I can print it. Seems to fix most formatting options.

If I manually dump the loader and overlay on my new editform2.aspx page, into CEWPs it doesn’t seem to work. I’m basically copying everything that’s on the real Editform.aspx page and hoping it wil load.

Perhaps because it is not actually called “EditForm.aspx or the default edit page?

Is this even possible?

[Alexander Bautz]

Thanks for the beer! – I’m away until January 2 but will get back to you as soon as I get back.

Best regards,
Alexander

[Alexander Bautz]

Sorry for the late reply.

Unfortunately DFFS will not run in a custom form created in SPD.

I have looked at another method of printing the form and have created this snippet that I need you to try out for me.

Please note that I have commented out a few lines because it relies on functionality not yet released, but you should be able to test it anyways. Just drop it in Custom JS in your DispForm and hit the print button to the right of the last tab. If you are not running SP 2013 / 2016 / online you must change the path variable in the function to point to your default SP style sheet location.

I have updated the code snippet in a new comment below.

PS: If you are NOT running Google Chrome you need to enable “print backbrounds and images” in the print dialog for the background color and images to print correctly. This is a one time setting, but it cannot be forced with JS.

Let me know how this works out.

Alexander

• This reply was modified 5 years, 10 months ago by Alexander Bautz. Reason: removed code snippet

[Alexander Bautz]

It looks like this doesn’t behave properly in Internet Explorer – I’ll do some testing and post an updated version of the snippet.

Alexander

[Alexander Bautz]

I have updated the code snippet to work in Firefox and Internet Explorer / Edge (please note that Edge does NOT support printing background colors and images). Add this snippet to the Custom JS of your DispForm:

spjs.dffs.printCurrentTab = function () {
    jQuery("body").append("<iframe id='dffs_print_form'></iframe>");
    var iframe = jQuery('#dffs_print_form'), path = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/" + _spPageContextInfo.currentLanguage + "/styles/themable/", b = [];
    // Add default SP style sheets
    b.push("<link rel='stylesheet' type='text/css' href='" + path + "forms.css' />");
    b.push("<link rel='stylesheet' type='text/css' href='" + path + "corev15.css' />");
    // Add default DFFS style sheet
    b.push("<link rel='stylesheet' type='text/css' href='" + spjs_path + "/css/dffs_frontend.css' />");
    // Add DFFS Custom CSS
    b.push("<style type='text/css'>" + unescape(spjs.dffs.data.dffsDataObj.customCSS) + "</style>");
    // Load files included above Custom CSS - this requires DFFS v4.4.3.59 (not released yet so it has been commented out)
    jQuery.each(spjs.dffs.data.requireCSSArr, function (i, cssfile) {
        b.push("<link rel='stylesheet' type='text/css' href='" + cssfile + "' />");
    });
    // The below line will try to force Chrome so include backgrounds and colors to you don't have to turn it on in the print dialog
    b.push("<style type='text/css'>body{-webkit-print-color-adjust:exact!important;color-adjust:exact!important;}</style>");
    // Add formtable HTML
    b.push("<table class='ms-formtable'>" + jQuery(".ms-formtable").html() + "</table>");
    iframe.ready(function () {
        var contentWindow = document.getElementById("dffs_print_form").contentWindow;
        contentWindow.document.write(b.join(""));
        contentWindow.document.close();
        setTimeout(function () {
            var printOK = contentWindow.document.execCommand('print', false, null);
            if (!printOK) {
                contentWindow.focus();
                contentWindow.print();
            }
            setTimeout(function () {
                jQuery("#dffs_print_form").remove();
            }, 500);
        }, 500);
    });
};

Please let me know how this works out.

Alexander

[Alexander Bautz]

Here is an updated snippet:

spjs.dffs.printCurrentTab = function () {
    if (spjs.dffs.data.selectedTab === "") {
        return;
    }
    jQuery("body").append("<iframe id='dffs_print_form'></iframe>");
    var iframe = jQuery('#dffs_print_form'), path, b = [];
    // Add default SP style sheet
    if (_spPageContextInfo.webUIVersion >= 15) {
        path = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/" + _spPageContextInfo.currentLanguage + "/styles/themable/";
        b.push("<link rel='stylesheet' type='text/css' href='" + path + "corev" + _spPageContextInfo.webUIVersion + ".css' />");
    } else {
        path = _spPageContextInfo.webAbsoluteUrl + "/_layouts/" + _spPageContextInfo.currentLanguage + "/styles/";
        b.push("<link rel='stylesheet' type='text/css' href='" + path + "corev4.css' />");
    }
    // Add default DFFS style sheet
    b.push("<link rel='stylesheet' type='text/css' href='" + spjs_path + "css/dffs_frontend.css' />");
    // Add DFFS Custom CSS
    b.push("<style type='text/css'>" + unescape(spjs.dffs.data.dffsDataObj.customCSS) + "</style>");
    // Load files included above Custom CSS
    jQuery.each(spjs.dffs.data.requireCSSArr, function (i, cssfile) {
        b.push("<link rel='stylesheet' type='text/css' href='" + cssfile + "' />");
    });
    // vLookup CSS
    b.push("<style type='text/css'>" + unescape(spjs.vLookup.data.css) + "</style>");
    // The below line will try to force Chrome so include backgrounds and colors to you don't have to turn it on in the print dialog
    b.push("<style type='text/css'>body{-webkit-print-color-adjust:exact!important;color-adjust:exact!important;}</style>");
    // Header
    if (spjs.dffs.data.dffsDataObj.tabs.printHeader !== "") {
        pHead = spjs.dffs.buildValStr(unescape(spjs.dffs.data.dffsDataObj.tabs.printHeader));
        pHead = spjs.dffs.translateStringWithJSON(pHead);
        b.push(pHead);
    }
    // Add formtable HTML
    b.push("<table class='ms-formtable dffs-print'>" + jQuery(".ms-formtable").html() + "</table>");
    // Footer
    if (spjs.dffs.data.dffsDataObj.tabs.printFooter !== "") {
        pFoot = spjs.dffs.buildValStr(unescape(spjs.dffs.data.dffsDataObj.tabs.printFooter));
        pFoot = spjs.dffs.translateStringWithJSON(pFoot);
        b.push(pFoot);
    }
    iframe.ready(function () {
        var contentWindow = document.getElementById("dffs_print_form").contentWindow;
        contentWindow.document.write(b.join(""));
        contentWindow.document.close();
        setTimeout(function () {
            var printOK = contentWindow.document.execCommand('print', false, null);
            if (!printOK) {
                contentWindow.focus();
                contentWindow.print();
            }
            setTimeout(function () {
                jQuery("#dffs_print_form").remove();
            }, 500);
        }, 1000);
    });
};

Alexander

[Paul Lynch]

Just wanted to say a big thanks Alex this code did the trick!

[Author]

Posts