Print - Print the form as a PDF
The Print action allows you to open the current form in print preview. The form can then be saved as a PDF. The "Print" action can, for example, be triggered by the user via a button. Another option is for the "Print" action to be triggered by the server, for example, if a form has been successfully submitted. If you do not want the header and footer to appear in the printout, you can show or hide them in “More Settings” or “Additional Settings” right next to the print preview in the pop-up window. The print preview differs from the normal view because background images are disabled by default. These can be re-enabled below the header and footer field. To change the print preview in general, you can use the CSS command `
@media print {}` to define rules that apply only to printing. These rules can be easily added to the other custom rules. This allows you, among other things, to hide buttons that are not relevant for printing.
Examples
Printing a Form
Example print.json
{
"metaData": {
"id": -1,
"name": "Print Form",
"version": 1,
"author": "Virtimo AG"
},
"configuration": {
"defaultLanguage": "de"
},
"components": [
{
"type": "container",
"label": "Print",
"layout": "vertical",
"components": [
{
"type": "button",
"action": "print",
"label": "Print Button"
},
{
"type": "textfield",
"value": "1"
}
]
}
]
}Printing with a Customized Style
In the following example, the style is customized for printing. The title is green when printed, and the print button is hidden.
Example printWithChangedStyle.json
{
"metaData": {
"id": -1,
"name": "Print Form",
"version": 1,
"author": "Virtimo AG"
},
"configuration": {
"styles": {
"css": "@media print {.x-button {display: none} .x-paneltitle {color: green}}"
}
},
"components": [
{
"type": "container",
"label": "Print",
"layout": "vertical",
"components": [
{
"type": "button",
"action": "print",
"label": "Print Button"
},
{
"label" : "First Textfield",
"type": "textfield",
"value": "1"
},
{
"label" : "Second Textfield",
"type": "textfield",
"value": "Hello"
}
]
}
]
}