node-red-contrib-uibuilder/examples/Low-code/low-code-report-builder.json

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

[
    {
        "id": "56af672c3ae066b8",
        "type": "group",
        "z": "ff9704678e3a4b61",
        "name": "UIBUILDER report builder low-code example. (Updated 2024-07-01) \\n ",
        "style": {
            "fill": "#ffffff",
            "fill-opacity": "0.2",
            "label": true,
            "color": "#000000"
        },
        "nodes": [
            "bdd00bc65ececfb2",
            "4b423eb7794241f7",
            "48bca724c94ff6ad",
            "d0b0802620db38cd",
            "59718b678565eb7c"
        ],
        "x": 44,
        "y": 39,
        "w": 672,
        "h": 262
    },
    {
        "id": "bdd00bc65ececfb2",
        "type": "uibuilder",
        "z": "ff9704678e3a4b61",
        "g": "56af672c3ae066b8",
        "name": "",
        "topic": "",
        "url": "uib-report-example",
        "okToGo": true,
        "fwdInMessages": false,
        "allowScripts": false,
        "allowStyles": false,
        "copyIndex": true,
        "templateFolder": "blank",
        "extTemplate": "",
        "showfolder": false,
        "reload": true,
        "sourceFolder": "src",
        "deployedVersion": "6.1.0-beta",
        "showMsgUib": true,
        "title": "",
        "descr": "",
        "editurl": "vscode://file/src/uibRoot/uib-report-example/?windowId=_blank",
        "x": 380,
        "y": 220,
        "wires": [
            [
                "4b423eb7794241f7"
            ],
            [
                "48bca724c94ff6ad"
            ]
        ],
        "info": "This example uses a blank template with\r\nthe IIFE build of the front-end client.\r\n\r\nIt does not use any front-end framework, just\r\npure HTML, CSS and JavaScript.\r\n"
    },
    {
        "id": "4b423eb7794241f7",
        "type": "debug",
        "z": "ff9704678e3a4b61",
        "d": true,
        "g": "56af672c3ae066b8",
        "name": "uibuilder standard output",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "counter",
        "x": 535,
        "y": 200,
        "wires": [],
        "l": false,
        "info": "This shows the data coming out of the\r\nuibuilder node's Port #1 (top) which is\r\nthe standard output.\r\n\r\nHere you will see any standard msg sent from\r\nyour front-end code."
    },
    {
        "id": "48bca724c94ff6ad",
        "type": "debug",
        "z": "ff9704678e3a4b61",
        "d": true,
        "g": "56af672c3ae066b8",
        "name": "uibuilder control output",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "counter",
        "x": 535,
        "y": 260,
        "wires": [],
        "l": false,
        "info": "This shows the data coming out of the\r\nuibuilder node's Port #2 (bottom) which is\r\nthe control output.\r\n\r\nHere you will see any control msg either sent\r\nby the node itself or from the front-end library.\r\n\r\nFor example the \"client disconnect\" and\r\n\"client connect\" messages. Or the \"visibility\"\r\nmessages from the client.\r\n\r\nLoop the \"client connect\", \"cache replay\" and\r\n\"cache clear\" messages back to a `uib-cache`\r\nnode before the input to uibuilder in order\r\nto control the output of the cache."
    },
    {
        "id": "d0b0802620db38cd",
        "type": "comment",
        "z": "ff9704678e3a4b61",
        "g": "56af672c3ae066b8",
        "name": "Low-code report building with the help of uibuilder. No HTML or JS needed. \\n Check the descriptions in each node & in this comment node. \\n Uses Markdown in this case & automatically loads the Markdown library for you from CDN.",
        "info": "To get the Markdown outputs to display,\nplease add the following line to the html\nfile before the reference to uibuilder's\nlibrary:\n\n```\n<script defer src=\"https://cdn.jsdelivr.net/npm/markdown-it@latest/dist/markdown-it.min.js\">/* Allows Markdown to be used in msg._ui */</script>\n```\n\n---\n\nThis example starts with the standard IIFE \nuibuilder template. You will note, however,\nthat you can remove all of the body HTML\nand it will still work.\n\nThis is because all of the important text,\ntables and layout are created dynamically\nusing a standardised configuration schema.\n\nThe schema used by UIBUILDER is actually\nquite similar, at least in concept, to that\nused by pdfmaker which was the inspiration\nfor this example. I didn't know about pdfmaker\nwhen I designed the config-driven aspects of\nuibuilder and it is comforting to know that I\ncame up with a similar solution to a similar\nproblem.\n\nOutput to HTML is far more flexible than\noutput to PDF via pdfmaker though and it will\ncontinue to grow and improve as HMTL and CSS do.\n\nYou can still output the resulting page to\nPDF very easily though.\n\n---\n\nFull documentation for uibuilder's low-code,\nconfiguration-driven UI creation capabilities\nis available in the documentation:\n\nhttps://totallyinformation.github.io/node-red-contrib-uibuilder/#/uibuilder.module?id=dynamic-data-driven-html-content-1",
        "x": 380,
        "y": 120,
        "wires": []
    },
    {
        "id": "59718b678565eb7c",
        "type": "inject",
        "z": "ff9704678e3a4b61",
        "g": "56af672c3ae066b8",
        "name": "REPORT!",
        "props": [
            {
                "p": "_ui",
                "v": "[{\"method\":\"load\",\"srcScripts\":[\"https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js\"]},{\"method\":\"remove\",\"components\":[\"#ui-test\"]},{\"method\":\"add\",\"components\":[{\"type\":\"main\",\"id\":\"ui-test\",\"parent\":\"#more\",\"components\":[{\"type\":\"h1\",\"slot\":\"uibuilder Low-Code Tests: Tables\"},{\"type\":\"p\",\"slot\":\"This is an example of using uibuilder's low-code, config-driven page builder. It is based on the TABLES example from <a href='http://pdfmake.org/playground.html' target='_blank'>pdfmake</a>. This is partly to demonstrate that pdfmake and uibuilder use related principals for similar outcomes.\"},{\"type\":\"p\",\"slot\":\"In addition, it demonstrates how to create a complex HTML report layout dynamically direct from Node-RED using a standardised configuration and data-driven, low-code methodology.\"},{\"type\":\"p\",\"slot\":\"It would be easy to directly print this to paper or print/save to PDF.\"},{\"type\":\"p\",\"slot\":\"Of course, much of the output configuration could also be dynamcially created from other data rather than being specified manually as in this example. Change the input from JSON to Expression for example in order to use JSONata to include data from an input msg.\"},{\"type\":\"p\",\"slot\":\"The input in this example is set up so that re-sending the data, removes and re-add's the entire thing. This should not be noticable in the browser. Try changing some data and resending to see the effect.\"},{\"type\":\"p\",\"slot\":\"Except where mentioned in the tables themselves, the majority of the styling comes from the pre-loaded uibuilder stylesheet. Of course, you can replace this with your own.\"},{\"type\":\"article\",\"components\":[{\"type\":\"h2\",\"slot\":\"A simple table (no style overrides)\"},{\"type\":\"p\",\"slot\":\"Nothing more than a couple of unstyled rows and columns. No headings.\"},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Column 1\"},{\"type\":\"td\",\"slot\":\"Column 2\"},{\"type\":\"td\",\"slot\":\"Column 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"One value goes here\"},{\"type\":\"td\",\"slot\":\"Another one here\"},{\"type\":\"td\",\"slot\":\"OK\"}]}]}]},{\"type\":\"article\",\"components\":[{\"type\":\"h2\",\"slot\":\"A simple table with nested elements\"},{\"type\":\"p\",\"slot\":\"It is of course possible to nest any other type of nodes available in <del>pdfmake</del> uibuilder/HTML inside table cells.\"},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Column 1\"},{\"type\":\"td\",\"slot\":\"Column 2\"},{\"type\":\"td\",\"slot\":\"Column 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Let's try an unordered list\",\"components\":[{\"type\":\"ul\",\"components\":[{\"type\":\"li\",\"slot\":\"Item 1\"},{\"type\":\"li\",\"slot\":\"Item 2\"}]}]},{\"type\":\"td\",\"slot\":\"or a nested table\",\"components\":[{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"th\",\"slot\":\"Col 1\"},{\"type\":\"th\",\"slot\":\"Col 2\"},{\"type\":\"th\",\"slot\":\"Col 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"R1C1\"},{\"type\":\"td\",\"slot\":\"R1C2\"},{\"type\":\"td\",\"slot\":\"R1C3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"R2C1\"},{\"type\":\"td\",\"slot\":\"R2C2\"},{\"type\":\"td\",\"slot\":\"R2C3\"}]}]}]},{\"type\":\"td\",\"slotMarkdown\":\"Inlines can be _styled_ easily as everywhere else. Even using Markdown!\"}]}]}]},{\"type\":\"article\",\"components\":[{\"type\":\"h2\",\"slot\":\"Defining column widths\"},{\"type\":\"p\",\"slotMarkdown\":\"~~Tables support the same width definitions as standard columns~~ HTML is different to pdfmaker here since styling is done using CSS.\"},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"attributes\":{\"style\":\"width:100em;\"},\"slot\":\"width:100em\"},{\"type\":\"td\",\"slot\":\"Unsized\"},{\"type\":\"td\",\"attributes\":{\"style\":\"width:25%;\"},\"slot\":\"width:25%\"},{\"type\":\"td\",\"slot\":\"Unsized\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"fixed-width cells have exactly the specified width\"},{\"type\":\"td\",\"slotMarkdown\":\"_nothing interesting here_\"},{\"type\":\"td\",\"slotMarkdown\":\"_nothing interesting here_\"},{\"type\":\"td\",\"slotMarkdown\":\"_nothing interesting here_\"}]}]},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"attributes\":{\"style\":\"width:90%;\"},\"slotMarkdown\":\"This is a ~~star-sized~~ fixed % size column. The next column over, an auto-sized column, will wrap to accomodate all the text in this cell.\"},{\"type\":\"td\",\"slot\":\"I am auto sized.\"}]}]},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slotMarkdown\":\"This is ~~a star-sized~~ an unsized column. The next column over, also auto-sized, will not wrap to accomodate all the text in this cell, because it has been given the noWrap style.\"},{\"type\":\"td\",\"attributes\":{\"style\":\"white-space: nowrap;\"},\"slot\":\"I am no-wrap auto sized.\"}]}]}]},{\"type\":\"article\",\"components\":[{\"type\":\"h2\",\"slot\":\"Defining row heights\"},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"attributes\":{\"style\":\"height:2em;\"},\"slot\":\"row 1 with height 2em\"},{\"type\":\"td\",\"slot\":\"Column B\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"attributes\":{\"style\":\"height:5em;\"},\"slot\":\"row 2 with height 5em\"},{\"type\":\"td\",\"slot\":\"Column B\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"attributes\":{\"style\":\"height:7em;\"},\"slot\":\"row 3 with height 7em\"},{\"type\":\"td\",\"slot\":\"Column B\"}]}]}]},{\"type\":\"article\",\"components\":[{\"type\":\"h2\",\"slot\":\"Column/row spans\"},{\"type\":\"p\",\"slot\":\"Each cell-element can set a rowSpan or colSpan\"},{\"type\":\"table\",\"components\":[{\"type\":\"tr\",\"components\":[{\"type\":\"th\",\"attributes\":{\"colspan\":\"2\",\"alignment\":\"center\"},\"slot\":\"Header with Colspan = 2, centered\"},{\"type\":\"th\",\"slot\":\"Header 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"th\",\"slot\":\"Header 1\"},{\"type\":\"th\",\"slot\":\"Header 2\"},{\"type\":\"th\",\"slot\":\"Header 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Sample value 1\"},{\"type\":\"td\",\"slot\":\"Sample value 2\"},{\"type\":\"td\",\"slot\":\"Sample value 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"attributes\":{\"rowspan\":3},\"slot\":\"rowSpan set to 3<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor\"},{\"type\":\"td\",\"slot\":\"Sample value 2\"},{\"type\":\"td\",\"slot\":\"Sample value 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Sample value 2\"},{\"type\":\"td\",\"slot\":\"Sample value 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Sample value 2\"},{\"type\":\"td\",\"slot\":\"Sample value 3\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Sample value 1\"},{\"type\":\"td\",\"attributes\":{\"rowspan\":2,\"colspan\":2},\"slot\":\"Both:<br>rowSpan and colSpan<br>can be defined at the same time\"}]},{\"type\":\"tr\",\"components\":[{\"type\":\"td\",\"slot\":\"Sample value 1\"}]}]}]},{\"type\":\"article\",\"components\":[{\"type\":\"p\",\"slot\":\"The remainder of the pdfmaker example deals with formatting. For an HTML report, this is done via CSS which can easily reproduce everything pdfmaker can do and a lot more.\"}]}]}]}]",
                "vt": "json"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "tables",
        "x": 160,
        "y": 220,
        "wires": [
            [
                "bdd00bc65ececfb2"
            ]
        ],
        "info": "This example sends a bunch of TABLEs to\r\nthe front-end.\r\n\r\nIt is taken from the [pdfmake]() tables example\r\nand adapted for uibuilder.\r\n\r\nIt demonstrates how complex reports can be created\r\nas easily in uibuilder as in pdfmake. With the \r\ndifference being that uibuilder outputs vanilla\r\nHTML which can be copied/pasted into many other tools.\r\nOr printed to PDF or a printer.\r\n\r\nThough the input uses Markdown (which requires an\r\nexternal library to render), UIBUILDER automatically\r\nloads the library for you! All defined in the low-code\r\nJSON in this inject node."
    }
]