Hide/Show elements in a pdf with node-red-contrib-pdfmake

[Lena]

Hello,
I´m searching for a method to show/ hide elements in a pdf.
I would like to create a pdf with 5 different "Data-Groups" the user can decide in the dashboard which data should be includes in the pdf report. Every data group includes text, an image and a table. I´m working with the node-red-contrib-pdfmake and it´s actually possible to create the whole pdf with all 5 "Data-Groups", but I don´t know how to hide the Data-Groups the user decided not to show...

Thank for your help in advance!

[Steve-Mcl]

@Lena

it´s actually possible to create the whole pdf with all 5 "Data-Groups", but I don´t know how to hide the Data-Groups the user decided not to show...

As I am certain you know, if you exclude them from the payload, they wont get rendered in the PDF.

So I guess your problem is how to exclude these items in the PDFMake document definition by some kinda checkbox in the dashboard?

Or is the question how to get a set of true/false values from dashboard to allow you to include/exclude values in a payload?

Can you state exactly what the difficulty is & perhaps provide a demo flow with demo data.

[Lena]

Hi Steve,

This is the part of the dashboard where the user can decide which parts should be included in the pdf-report:

This is still working, I get for every part an boolean value if it should be included or not

Now my example flow, I changed the pictures that are included in the file to the picture from the pdfmake-example and I changed the variable values in the table to static values so that the flow is also working when you open it. And I only included 2 parts instead of 5:
ExampleFlowPDF.json (3.9 KB)

And this is the pdf that is created from the pdfmake-node:

Now the question I have is, what I have to do to show only the part "Scanner-Data" or only the part "WMS Response-Times"? So you are right I don´t know how to include/ exclude the data from the payload, actually I´m using json-format and a normal "if-condition" is not working...

[Steve-Mcl]

@Lena

Now the question I have is, what I have to do to show only the part "Scanner-Data" or only the part "WMS Response-Times"?

The answer is the same ...

@Steve-Mcl

if you exclude them from the payload, they wont get rendered in the PDF

If you look at the example template, you can see it is simply building a document definition in JSON for the PDFMake library.

So using that knowledge, you can build the document definition in JavaScript instead. This permits yo to easily include or exclude the parts you need.

---

Instead of waffling on, I built you a demo - please read every part and try to understand how it fits together. Make use of debug nodes (with its name and the option Show Full Message set) to help you understand what is going on.

[{"id":"5e3f0b7a02fa01d3","type":"inject","z":"950e6f56f9415563","name":"with scanner rates only","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"options","v":"{\"scannerRates\":true,\"WMS\":false}","vt":"json"},{"p":"options.PDF_filename","v":"scanner_rates_only.pdf","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":280,"y":820,"wires":[["e39a0be0dfceaadf"]]},{"id":"8c3c18a291351b87","type":"file","z":"950e6f56f9415563","name":"","filename":"","appendNewline":false,"createDir":false,"overwriteFile":"true","encoding":"none","x":1040,"y":1000,"wires":[[]]},{"id":"180dd179aefe9344","type":"pdfmake","z":"950e6f56f9415563","name":"","outputType":"Buffer","inputProperty":"payload","options":"{}","outputProperty":"payload","x":820,"y":940,"wires":[["60122ecc21057c46"]]},{"id":"fd4c36991e9e3d74","type":"function","z":"950e6f56f9415563","name":"build document definition","func":"//setup base document definition\nconst docdef = {\n    \"pageSize\": \"A4\",\n    \"pageOrientation\": \"portrait\",\n    \"pageMargins\": [\n        40,\n        60,\n        40,\n        60\n    ],\n    \"info\": {\n        \"title\": \"awesome Document\",\n        \"author\": \"john doe\",\n        \"subject\": \"subject of document\",\n        \"keywords\": \"keywords for document\"\n    },\n    \"content\": [\n        // {\n        //     \"text\": \"PDF Shift-Report\",\n        //     \"style\": \"header\"\n        // },\n        // \"This report gives an short overview, of the last work-shift data.\",\n        // {\n        //     \"text\": \"Scanner-Data\",\n        //     \"style\": \"subheader\"\n        // },\n        // {\n        //     \"text\": \"The following chart and table give an overview about the scanner-rates. Both include the global mean values of all scanners that are connected to the edge (including all PLCs).\"\n        // },\n        // {\n        //     \"image\": \"data:image/jpeg;base64,{{{payload}}}\",\n        //     \"width\": 200\n        // },\n        // \"\\n\",\n        // {\n        //     \"table\": {\n        //         \"body\": [\n        //             [\"Timestamp\", \"GRRate\", \"NRRate\"],\n        //             [\"2021-01-26 14:30\", 20, 80]\n        //         ]\n        //     }\n        // },\n        // \"\\n\",\n        // {\n        //     \"text\": \"WMS Response-Times\",\n        //     \"style\": \"subheader\"\n        // },\n        // {\n        //     \"text\": \"The following chart and table give an overview about the WMS Response-Times. Both include the global mean values of all dispo-points that are connected to the edge (including all PLCs).\"\n        // },\n        // {\n        //     \"image\": \"data:image/jpeg;base64,{{{payload}}}\",\n        //     \"width\": 200\n        // },\n        // \"\\n\",\n        // {\n        //     \"table\": {\n        //         \"body\": [\n        //             [\"Timestamp\", \"Response<300\", \"Response<500\", \"Response<1000\", \"Response>1000\"],\n        //             [\"2021-01-26 14:30\", 10, 30, 50, 20]\n        //         ]\n        //     }\n        // }\n    ],\n\n    \"styles\": {\n        \"header\": {\n            \"fontSize\": 18,\n            \"bold\": true\n        },\n        \"subheader\": {\n            \"fontSize\": 15,\n            \"bold\": true\n        },\n        \"center\":\n        {\n            \"alignment\": \"center\"\n        }\n    }\n\n}\n\n//Add the contents - some parts will be conditionally added based on msg.options\n\n//header\ndocdef.content.push({\n    \"text\": \"PDF Shift-Report\",\n    \"style\": \"header\"\n})\ndocdef.content.push(\"This report gives an short overview, of the last work-shift data.\");\n\n\nif(msg.options.scannerRates) {\n    docdef.content.push(\"\\n\");\n    docdef.content.push({\n        \"text\": \"Scanner-Data\",\n        \"style\": \"subheader\"\n    })\n    docdef.content.push({\n        \"text\": \"The following chart and table give an overview about the scanner-rates. Both include the global mean values of all scanners that are connected to the edge (including all PLCs).\"\n    })\n    docdef.content.push({\n        \"image\": \"data:image/jpeg;base64,\" + msg.image1,\n        \"width\": 200\n    });\n    docdef.content.push(\"\\n\");\n    docdef.content.push({\n        \"table\": {\n            \"body\": [\n                [\"Timestamp\", \"GRRate\", \"NRRate\"],\n                [\"2021-01-26 14:30\", 20, 80]\n            ]\n        }\n    })\n}\n\n\nif (msg.options.WMS) {\n    docdef.content.push(\"\\n\");\n    docdef.content.push({\n        \"text\": \"WMS Response-Times\",\n        \"style\": \"subheader\"\n    })\n    docdef.content.push({\n        \"text\": \"The following chart and table give an overview about the WMS Response-Times. Both include the global mean values of all dispo-points that are connected to the edge (including all PLCs).\"\n    })\n    docdef.content.push({\n        \"image\": \"data:image/jpeg;base64,\" + msg.image2,\n        \"width\": 200\n    })\n    docdef.content.push(\"\\n\");\n    docdef.content.push({\n        \"table\": {\n            \"body\": [\n                [\"Timestamp\", \"Response<300\", \"Response<500\", \"Response<1000\", \"Response>1000\"],\n                [\"2021-01-26 14:30\", 10, 30, 50, 20]\n            ]\n        }\n    })\n}\n\nmsg.payload = docdef;\n\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":610,"y":940,"wires":[["180dd179aefe9344"]]},{"id":"f83e0693f95d2eed","type":"ui_form","z":"950e6f56f9415563","name":"","label":"Report builder","group":"59ca7a7993cc116d","order":2,"width":0,"height":0,"options":[{"label":"Scanner Rates","value":"scannerRates","type":"switch","required":true,"rows":null},{"label":"WMS","value":"WMS","type":"switch","required":true,"rows":null},{"label":"File name","value":"PDF_filename","type":"text","required":true,"rows":null}],"formValue":{"scannerRates":false,"WMS":false,"PDF_filename":""},"payload":"","submit":"Generate PDF","cancel":"cancel","topic":"topic","topicType":"msg","splitLayout":"","className":"","x":260,"y":760,"wires":[["4d68407a0d5240cc"]]},{"id":"713771ac87030b2d","type":"inject","z":"950e6f56f9415563","name":"with wms only","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"options","v":"{\"scannerRates\":false,\"WMS\":true}","vt":"json"},{"p":"options.PDF_filename","v":"wms_only.pdf","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":250,"y":880,"wires":[["e39a0be0dfceaadf"]]},{"id":"33afcb6b39b19813","type":"inject","z":"950e6f56f9415563","name":"with both options","props":[{"p":"payload"},{"p":"topic","vt":"str"},{"p":"options","v":"{\"scannerRates\":true,\"WMS\":true}","vt":"json"},{"p":"options.PDF_filename","v":"full_report.pdf","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":260,"y":940,"wires":[["e39a0be0dfceaadf"]]},{"id":"4d68407a0d5240cc","type":"change","z":"950e6f56f9415563","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":760,"wires":[["e39a0be0dfceaadf"]]},{"id":"60122ecc21057c46","type":"change","z":"950e6f56f9415563","name":"","rules":[{"t":"set","p":"filename","pt":"msg","to":"options.PDF_filename","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1010,"y":940,"wires":[["8c3c18a291351b87"]]},{"id":"6916d88c69ef7ff5","type":"file in","z":"950e6f56f9415563","name":"Load image1","filename":"node_modules/node-red-contrib-pdfmake/examples/sample.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":570,"y":820,"wires":[["8d113cba4c779a37"]]},{"id":"87770206a41b2433","type":"file in","z":"950e6f56f9415563","name":"Load image2","filename":"node_modules/node-red-contrib-pdfmake/examples/sample.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","allProps":false,"x":570,"y":880,"wires":[["219ff06506af7f12"]]},{"id":"6e6a62b7ba464d2e","type":"change","z":"950e6f56f9415563","name":"","rules":[{"t":"set","p":"image1","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1000,"y":820,"wires":[["87770206a41b2433"]]},{"id":"27bf10d9b31549b8","type":"change","z":"950e6f56f9415563","name":"","rules":[{"t":"set","p":"image2","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1000,"y":880,"wires":[["fd4c36991e9e3d74"]]},{"id":"8d113cba4c779a37","type":"base64","z":"950e6f56f9415563","name":"","action":"str","property":"payload","x":820,"y":820,"wires":[["6e6a62b7ba464d2e"]]},{"id":"219ff06506af7f12","type":"base64","z":"950e6f56f9415563","name":"","action":"str","property":"payload","x":820,"y":880,"wires":[["27bf10d9b31549b8"]]},{"id":"e39a0be0dfceaadf","type":"change","z":"950e6f56f9415563","name":"","rules":[],"action":"","property":"","from":"","to":"","reg":false,"x":465,"y":820,"wires":[["6916d88c69ef7ff5"]],"l":false},{"id":"59ca7a7993cc116d","type":"ui_group","name":"Default","tab":"86e5f57183cb389a","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"86e5f57183cb389a","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]