print
The "Print" action allows you to open the current form in a print preview. The form can then be saved as a PDF. 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," located 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 user-defined rules. This allows you, among other things, to hide buttons that are not relevant for printing.
Overview
action("print")-
Action to be performed. No `
payload` needs to be specified for this action.
Examples
Print a form
Example print.json
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
},
"components": [
{
"type": "container",
"label": "Print",
"components": [
{
"type": "button",
"action": "print",
"label": "Print Button"
},
{
"type": "textfield",
"value": "1"
}
]
}
]
}Print with 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
{
"$schema": "https://forms.virtimo.net/5.0.x/schema.json",
"metaData": {
"id": 0,
"version": 0
},
"configuration": {
"styles": {
"css": "@media print {.x-button {display: none} .x-paneltitle {color: green}}"
}
},
"components": [
{
"type": "container",
"label": "Print",
"components": [
{
"type": "button",
"action": "print",
"label": "Print Button"
},
{
"label" : "First Textfield",
"type": "textfield",
"value": "1"
},
{
"label" : "Second Textfield",
"type": "textfield",
"value": "Hello"
}
]
}
]
}