Print - printout of the form in a pdf

The Print action allows the current form to be opened in a print view. The form can then be saved as a pdf. The Print action can be activated, for example, via a Button button. Another option is for the print action to be triggered by the server if, for example, a form has been successfully submitted. If the header and footer are not desired in the print view, they can be shown or hidden in the pop-up window in "More settings" or "Other settings" directly next to the print view. The print view differs from the normal view as background graphics are switched off by default. These can be shown again under the field for the header and footer. To change the print view in general, you can use the Css command

@media print {}

Regeln definiert werden, die nur für den Druck benutzt werden. Diese Regeln können den anderen benutzerdefinierten Regeln einfach angefügt werden. So können unter anderem für den Druck nicht relevante Buttons ausgeblendet werden.

Examples

Print a form

Example print.json
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"
        }
      ]
    }
  ]
}

Print with customized style

In the following example, the style is customized for the print. The title is green when printing and the print button is hidden.

Example printWithChangedStyle.json
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"
        }
      ]
    }
  ]
}

Keywords: