Create PDF

The PDF export of a form is created automatically by the HybridForms service and stored as attachment file of a form data list item.
The filename is fixed: "form.pdf".

As specified in the "Operation Manual", creation of PDF files can be disabled by setting the "PDF" flag to false.

PDF Header and Footer

When the PDF is generated, each page will have a default header and footer area.

For the header, the displayed default is the name of the form definition ("TemplateName) placed on the left hand side of the pages.

pdf.header

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 text-right"><span class="TemplateName"></span></div>
    </div>
</div>

The default footer contains three values:
the name of the user, who last edited the form, on the left,
the date of the last change in the center and
the page numbering - current page plus the total number of pages of this document.

pdf.footer

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 text-right"><span class="TemplateName"></span></div>
    </div>
</div>

Note: The used date format is defined by the HF.Culture setting in the HF.Formdefinition.

Customizing Header and Footer

To create your own header and/or footer layout upload specially named files to your HF.Formdefinition. For the header, the file has to be named pdf.header, for the footer, the file needs to be named pdf.footer.
Open the files with an HTML editor, just as you are used to, as these files are simple HTML code snippets.

Example files

The files contain only code snippets, please don't provide complete HTML-files.

Note

The starting div of the snippets should contain the class "container-fluid" to integrate the snippets to your form template correctly.

Inside the row you can insert further divs containing the content to print in your header/footer and define the size of each div by a CSS class ("col-xs-#" - range from 1 to 12). Assure that the sum of your defined CSS columns (`"col-xs-#") in a row does not exceed 12.

Default pdf.header

<div class="pdf-header-footer pdf-header container-fluid">
    <div class="row">
        <div class="col-xs-12 text-right"><span class="TemplateName"></span></div>
    </div>
</div>

Custom example - pdf.header:
In this example a field value ("field_id") is inserted, styled as heading <h1> and styled by a custom CSS class green defining the font color.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6 green"><h1><span class="field_id"></span></h1></div>
        <div class="col-xs-6 text-right"><img src="{{HFFormPath}}/xxxx-wohnen-LOGO.png" height="50" alt="XXXX Wohnen" /></div>
    </div>
</div>

Customized header

Note

The CSS classes "text-right" and "col-xs-#" are predefined CSS classes and don't have to be implemented in your custom CSS files.

Default pdf.footer

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <span class="Editor"></span>
        </div>
        <div class="col-xs-6 text-right">
            <span class="Modified datetime"></span>
        </div>
    </div>
</div>

Custom example - pdf.footer:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            XXXX Immobilien Verwaltungs GmbH
        </div>
        <div class="col-xs-6 text-right">T: +43 316 xxxxxx</div>
        </div>
    </div>
        <div class="row">
        <div class="col-xs-6">
            Glacisstraße 69, 8010 Graz
        </div>
        <div class="col-xs-6 text-right">  
            E: <a href="mailto:office@xxxxwohnen.at">office@xxxxwohnen.at</a></div>
        </div>
    </div>
</div>

Customized footer

Warning

Do not upload any files with an ".html" extension in the form definition beside the form definition HTML-file itself, it will break the form.

Adding form values

To get the field values from the form values, or print fields like editors name, simple add <span> tags, and give them a class name exactly matching the name of the control from the form definition.

Example

<span class="Author"></span>
(<span class="Modified datetime"></span>)

The content of the SharePoint Author field will be inserted into the <span> tag.

When printing date fields, you have to add an extra class "datetime" to indicate the tag should be treated as date and printed according to the current culture. To format the printed date please add the date-format attribute (e.g. date-format="MMM dd yyyy", date-format="HH:mm").

All formats supported: http://docs.telerik.com/kendo-ui/framework/globalization/dateformatting

To overrule the locale used for date formatting, you can add the "date-locale" attribute. The default locale is the form culture.

Note

The "Now" variants are only printed by addition of date-format!

Beside the fields from your form definition, you can use the following fields:

• Author – the user that created the form
• AuthorEmail – email of this user (if any)
• Created – Creation date of the form item (datetime)
• Culture – the HF.Culture field of the form definition
• Editor – the user that last changed the form
• EditorEmail – email of this user (if any)
• ItemID - HF.ItemID field
• Modified – Date of the last modification of the form item (datetime)
• Now date – Date of the last PDF creation date
• Now datetime – Date of the last PDF creation date and time
• Now time – Date of the last PDF creation time
• StageID - the id of the current form stage
• StageLabel – the label of the current form stage
• Status – value of the HF.Status field
  • New, Edit, Approved, Deleted, Group, Archived
• TemplateID – HF.FormID of the form definition
• TemplateName – the name of the form definition
• Title – the form "Title"

Adding variable content

Images or text used besides the form field values are usually "static" content.
By calling a JavaScript function it is possible to include content based on variables.
The JavaScript function can be implemented by declaring a HFCustomString in your pdf.header or pdf.footer file.

HTML

<div class="pdf-header-footer pdf-header container-fluid">
    <div class="row">
     <div class="col-xs-8"><h2>HybridForms® – Software for Mobile Business</h2></div>
        <div class="col-xs-4 text-right" style="margin-top:10px">{{HFCustomString:HFFormdefinition.DemoTrainingHelpers.pdfReturn}}</div>
    </div>
</div>

TypeScript

export function pdfReturn() {
    const changelogo = HybridForms.API.FormControls.getCtrl('radiov5').val();
    let url = '';

    if (changelogo === true) {
        url = HybridForms.API.FormDefinition.getAttachmentPath('form-logo_1.png') + '/form-logo_1.png';     
    } else {
        url = HybridForms.API.FormDefinition.getAttachmentPath('form-logo_2.png') + '/form-logo_2.png';  
    }

    if (url) {
        return(`<img src="${url}">`);
    } else {
        return('<h4>No logo</h4>');
    }
}

In this example the logo is changed depending on the RadioBox value:

Info

Images have to be available besides the form template definition at your server.

Adding custom images to Footer or Header

You can upload images to the form definition and use those files. To reference those files in the HTML, you have to use a special placeholder in the URL.

Example

<img src="{{HFFormPath}}/companylogo.png">

Controlling the PDF output

General settings

The form variable <var data-hf-name="PdfSettings" ...></var> controls titles and page breaks.

There are several configuration options

Property	Options/Type	Description
data-hf-hide-form-title	boolean	Show/Hide form title in the PDF output.
data-hf-hide-page-title	boolean, Array	Show/Hide page titles in the PDF output. It can have an array of page ids to only hide specific page titles.
data-hf-hide-tab-title	boolean, Array	Show/Hide tab titles in the PDF output. It can have an array of tab ids to only hide specific tab titles.
data-hf-remove-page-break	boolean, Array	Add/Remove page break after each page in the PDF output. It can have an array of page ids to only remove page breaks after specific pages.

...
<form>
    <var data-hf-name="PdfSettings"
        data-hf-hide-form-title="true"
        data-hf-hide-page-title='[
            "controls-page"
        ]'
        data-hf-hide-tab-title="true"
        data-hf-remove-page-break='[
            "controls-page"
        ]'>
    </var>
</form>
...

Style options

Add CSS classes to your HTML template to control the visibility of form elements and page breaks.

Hide form elements

Add the CSS class "pdf-hide" to any HTML element inside your template to exclude these elements from the generated PDF.

<h1 class="pdf-hide">
    <span class="nolandscape">  
        <span data-win-control="HFWinJSCtrl.ObserveField"  
                data-win-options="{ fieldId : 'protokoll_typ' }">  
        </span>  
    </span>
    <span class="noportrait">  
        <span data-win-control="HFWinJSCtrl.ObserveField"  
                data-win-options="{ fieldId : 'protokoll_typ' }">  
        </span>  
    </span>
</h1>

Info

Previous implemented / recommended classes (i.e. "hide-in-pdf" or "hide-in-view") are still supported, so no adaption is needed.

Control page break inside rows

Add the CSS class "pdf-avoid-pagebreak" to avoid a page break inside a container.

HTML

<div class="grid column1">
    <div class="r1 c1 pdf-avoid-pagebreak">
        ...
    </div>
</div>

CSS

.pdf-avoid-pagebreak {
    break-inside: avoid;
}

Add the CSS class "pdf-allow-pagebreak" to allow a page break inside a container.

HTML

<div class="grid column1">
    <div class="r1 c1 pdf-allow-pagebreak">
        ...
    </div>
</div>

CSS

.pdf-allow-pagebreak {
    break-inside: auto !important;
}

Control page break inside FormControls

Add the CSS class "pdf-inherit-pagebreak" to a control element to inherit a page break property from its parent.

HTML

<div class="grid column1">
    <div class="r1 c1 pdf-avoid-pagebreak">
        <textarea id="docs_textarea" class="pdf-inherit-pagebreak" 
            data-win-control="HFWinJSCtrl.TextField" 
            data-win-options="{ 
                label : 'Docs' 
            }"></textarea>
        ...
    </div>
</div>

CSS

.pdf-inherit-pagebreak {
    break-inside: inherit !important;
}

Custom CSS style rules

To add custom CSS rules only available in PDF there are two classes to use as parent. .hf-formview for styling FormView and PDF output and .hf-formpdf for styling PDF only.

It is recommended to use .hf-formview.

Info

.hf-formgeneratorview and .hf-formgeneratorpdf are deprecated but still supported.

.hf-formview .only-for-pdf {
    background-color: red;
}

Adding page numbers

Use the HF.Flag "PDF.PageCounter": true|false to enable/disable page numbers in your form definition at the server, the default value is set to "true".

Info

The page numbers are always placed in the right corner of the footer, so keep this in mind by customizing your footer.

Debug PDF output

Use the HF.Flag "FormDev.PDFDebug": true|false in an index.json of a FormDefinition to open PDF in a browser window. Check for JavaScript errors or layout problems in the original PDF output.

Info

When the flag is enabled, there is no PDF file created.

Adding multiple PDF files

HybridForms can be forced to generate multiple PDF files by adding additional files with ".pdfhtml" extension to formdefiniton.

It has to be a valid formdefiniton page structure with the same form control ids like the main HTML-file but it can be restyled or the layout can be changed.

The additional PDFs are attached to the form in the documents attachment section after approval. They are given the name of the original ".pdfhtml" formdefiniton template.