Put the current date and time in footer of the printed form?

[t4nu]

Hi,
Is there a way to put the current date and time in the footer section (PDF footer), something like the page number and total number?
I have tried put the id in <span> tag, and try to change that id text from within the jquery, but seems nothing happen.
Thanks in advance for the help.

[Steve]

Hi,

You can do this by adding the @bottom-right CSS to your stylesheet. By using the @bottom-right attribute you can specify the content that you would like put in that position of the margin. Note that you can also position content in the footer in top-left, top-middle, top-right, bottom-left etc...

The example below will display a header in the top right with a fixed String of "Header" and the current date in the bottom right:

Create a form

1) Create a form giving it a name of your choice.

2) Add a Text control and give it a name of 'pdfmargin'.

3) Add the text below to the text control and check the Contains HTML check box.

Code: Select all

<div class='header'>Header</div>
<div class='footer'>&&MYDATE</div>
<div class='content'>Page1</div>
<div>Page2</div>

4) Right click the control and set to hidden.

5) Add a new field to the form called MyDate.

6) Add a button to the form below the control adding some text e.g Print Me

Create a script

7) Right click the button and click the Events menu item.
Add a new script and give it a name e.g printme
9) Add the following code to the script:

Code: Select all

importPackage(com.ebasetech.xi.api);
importPackage(com.ebasetech.xi.services);

controls.pdfmargin.show();
fields.MyDate.value = new Date();

form.generatePdf();
controls.pdfmargin.hide();

10) Save the script

Add some style

11) Click on the Form Properties

12) Click on the Web Resources tab

13) Add the following to the HTML++ text box:

Code: Select all

<style>

div.header &#123;
    display&#58; block; text-align&#58; right; 
    position&#58; running&#40;header&#41;;
&#125;
div.footer &#123;
    display&#58; block; text-align&#58; right;
    position&#58; running&#40;footer&#41;;
&#125;
div.content &#123;page-break-after&#58; always;&#125;
@page &#123;
     @top-right &#123; content&#58; element&#40;header&#41; &#125;
&#125;
@page &#123; 
    @bottom-right &#123; content&#58; element&#40;footer&#41; &#125;
&#125;

</style>

14) Close form properties and run the form

15) Click print button.


This should print out a PDF with a header and footer on two pages.

[t4nu]

Wow a really detail instruction.
Thank you very much Steve, I will try it.
Hope this can solve my problem.

Hi,

You can do this by adding the @bottom-right CSS to your stylesheet. By using the @bottom-right attribute you can specify the content that you would like put in that position of the margin. Note that you can also position content in the footer in top-left, top-middle, top-right, bottom-left etc...

The example below will display a header in the top right with a fixed String of "Header" and the current date in the bottom right:

Create a form

1) Create a form giving it a name of your choice.

2) Add a Text control and give it a name of 'pdfmargin'.

3) Add the text below to the text control and check the Contains HTML check box.

Code: Select all

<div>Header</div>
<div>&&MYDATE</div>
<div>Page1</div>
<div>Page2</div>

4) Right click the control and set to hidden.

5) Add a new field to the form called MyDate.

6) Add a button to the form below the control adding some text e.g Print Me

Create a script

7) Right click the button and click the Events menu item.
Add a new script and give it a name e.g printme
9) Add the following code to the script:

Code: Select all

importPackage(com.ebasetech.xi.api);
importPackage(com.ebasetech.xi.services);

controls.pdfmargin.show();
fields.MyDate.value = new Date();

form.generatePdf();
controls.pdfmargin.hide();

10) Save the script

Add some style

11) Click on the Form Properties

12) Click on the Web Resources tab

13) Add the following to the HTML++ text box:

Code: Select all

<style>

div.header &#123;
    display&#58; block; text-align&#58; right; 
    position&#58; running&#40;header&#41;;
&#125;
div.footer &#123;
    display&#58; block; text-align&#58; right;
    position&#58; running&#40;footer&#41;;
&#125;
div.content &#123;page-break-after&#58; always;&#125;
@page &#123;
     @top-right &#123; content&#58; element&#40;header&#41; &#125;
&#125;
@page &#123; 
    @bottom-right &#123; content&#58; element&#40;footer&#41; &#125;
&#125;

</style>

14) Close form properties and run the form

15) Click print button.


This should print out a PDF with a header and footer on two pages.