Add field to PDF page header

Forms
1

How can I add a SharePoint field or control value to the page header template? Using your code examples in the documentation, I have the following HTML control added to the form.

<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: left"></div>
            <div style="float: right">[Title]</div>
        </div>
        <div class="footer">
            <div style="float: left"></div>
            <div style="float: right">Page #:pageNum# of #:totalPages#</div>
        </div>
    </div>
</script>

[Title] is added to the upper left corner of the PDF instead of the value of the SharePoint field 'Title'.

How can I access the form's field/control values from within the HTML that is called by the fd.exportToPDF() function?

2

Hello @EasyCom,

You can define any custom Javascript in the template, for this add it between hash tags:

<script type="x/kendo-template" id="page-template">
            #
                var title= fd.field('Title').value

            #
    <div class="page-template">
        <div class="header">
            <div style="float: left"></div>
            <div style="float: right">#=title#</div>
        </div>
        <div class="footer">
            <div style="float: left"></div>
            <div style="float: right">Page #:pageNum# of #:totalPages#</div>
        </div>
    </div>
</script>
3

What's the syntax for defining multiple variables? Are the comma delimited? Semicolon? Carriage Return? ...

4

I get an error in the console "fd is not defined".

5

@EasyCom,

Semicolon, it is a general JavaScript code. The example:

<script type="x/kendo-template" id="page-template">
            #
                var title= fd.field('Title').value;
                var date = new Date();

            #
    <div class="page-template">
        <div class="header">
            <div style="float: left"></div>
            <div style="float: right"> Title: #=title# Date: #=date#</div>
        </div>
        <div class="footer">
            <div style="float: left"></div>
            <div style="float: right">Page #:pageNum# of #:totalPages#</div>
        </div>
    </div>
</script>

Define fd globally in the JavaScript editor:

window.fd = fd;

image