UIBUILDER: Example web page layout #1 (typical content-heavy or blog style)

Share Your Projects
1

Hi all, I know that some people wanting to use UIBUILDER are not so familiar with HTML and CSS. This example can be used with any UIBUILDER node. It does not require any fancy front-end framework because it is simple, modern HTML and CSS based on a grid layout of 3 rows and 2 columns.

image
image919Ă—670 23.8 KB

It will adjust to light/dark browser preferences thanks to UIBUILDER's built-in brand CSS file. No JavaScript is needed for this example. Simply add a uibuilder node, give it a url name, deploy, then edit the two files, replacing them with the following code.

It should be very easy to adapt to meet slightly different layouts. For example, putting the sidebar to the right is simply a matter of changing the grid-template-areas in the css. You could also do that dynamically of course using a small amount of JavaScript.

You will note that this example is not very responsive to narrow screens. But that is also not too hard to do using a CSS media query to designate a screen width breakpoint and using an alternative grid template. I'll let some folk see if they can figure that out themselves for now, if you do, please do share with everyone. :sunglasses:

Similarly, changing the relative sizes of the various areas is as simple as adjusting the fr values in the CSS. Have a play to see what the effect is.

index.html

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Grid Layout - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Grid Layout">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <!-- <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script> -->
    <!-- #endregion -->

</head><body>
    
    <div class="container">
        <header class="header">
            <h1 class="with-subtitle">Grid Layout Example</h1>
            <div role="doc-subtitle">Using the uibuilder IIFE library.</div>
            <nav class="nav-main">
                <ul>
                    <li><a href="#nav1">Nav 1</a></li>
                    <li><a href="#nav2">Nav 2</a></li>
                    <li><a href="#nav3">Nav 3</a></li>
                </ul>
            </nav>
        </header>

        <main>
            <article class="content">
                <h2>Example blog-style layout</h2>
                <p>
                    A grid of 2 columns and 3 rows. Right column and middle row are larger than the others.
                </p>
            </article>

            <article class="content">
                <h2>Article 2</h2>
                <p>
                    We use a well structured HTML 5 tag structure to define the layout.
                </p>
            </article>
        </main>
        
        <aside class="sidebar">
            Sidebar
        </aside>
        
        <footer>
            The footer
        </footer>
    </div>
</div>

</body></html>

index.css

/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.min.css`
 * This version auto-adjusts for light/dark browser settings.
 */
@import url("../uibuilder/uib-brand.min.css");

.container {
    display: grid;
    gap: 1rem;

    /* 2 cols x 3 rows layout. Middle row & right column are larger */
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "sidebar footer";
}

/* Assign the main areas to the grid */
main {
    grid-area: main;
    border: 1px dashed silver; /* these just for easier understanding */
}
header {
    grid-area: header;
    border: 1px dashed gold;
}

footer {
    grid-area: footer;
    border: 1px dashed green;
}

/* We might want other sidebars so be more explicit for this */
aside.sidebar {
    grid-area: sidebar;
    border: 1px dashed violet;
}

/* Simple horizontal navigation main menu */
.nav-main {
    background-color: var(--surface3);
}
.nav-main ul {
    /* Remove bullet points */
    list-style-type: none;
    /* Remove default padding */
    padding: 0;
    /* Remove default margin */
    margin: 0;
    /* Use Flexbox to align items horizontally */
    display: flex;
}
/* Add space between menu items */
.nav-main li {
    margin-right: 1rem;
}
/* Remove margin on the last item */
.nav-main li:last-child {
    margin-right: 0;
}
.nav-main a {
    /* Remove underline from links */
    text-decoration: none;
    /* Add padding for better click area */
    padding: var(--border-pad );
    /* Ensure the entire area is clickable */
    display: block;
}
/* Highlight on hover */
.nav-main a:hover {
    background-color: var(--surface5);
    /* Optional: Add rounded corners */
    border-radius: var(--border-radius);
}

Let me know if you'd like some more layout examples and what kind of layouts you like using.

Ultimately, I'll add some layouts into a uibuilder no-code node but it hasn't been my highest priority since layouts tend to be pretty personal and are mostly very easy to achieve with modern HTML and CSS.

4 Likes
2

Here is a quick update. Only the CSS changes.

This gives you a basic narrow screen alternate responsive layout as an example. It also limits the maximum width of the sidebar. Finally, it adds some CSS variables that make it easier to control some of the parameters.

/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.min.css`
 * This version auto-adjusts for light/dark browser settings.
 */
@import url("../uibuilder/uib-brand.min.css");

/* CSS variables to make it easier to control */
:root {
    --container-max-width: 1000px;
    --container-grid-col-gap: 1rem;
    --container-grid-row-gap: 0.5rem;
    --sidebar-max-width: 10rem;
}

/* The main container */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto; /* Center the container horizontally */
    display: grid;
    gap: var(--container-grid-row-gap) var(--container-grid-col-gap);

    /* 2 cols x 3 rows layout. Middle row & right column are larger */
    grid-template-columns: minmax(0, var(--sidebar-max-width)) 2fr; /* left sidebar constrained width */
    grid-template-rows: 1fr 2fr 1fr;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "sidebar footer";
    justify-items: stretch;
}

/* Assign the main areas to the grid */
main { /* Where you put your content */
    grid-area: main;
    border: 1px dashed silver; /* these just for easier understanding */
}
header { /* Headings, nav, etc */
    grid-area: header;
    border: 1px dashed gold;
}

footer { /* at the bottom, (c), dates, etc */
    grid-area: footer;
    border: 1px dashed green;
    margin-top: 0;
}

/* We might want other sidebars so be more explicit for this */
aside.sidebar { /* stuff to one side of the main content */
    grid-area: sidebar;
    border: 1px dashed violet;
}

/* Simple horizontal navigation main menu (in the header) */
.nav-main {
    background-color: var(--surface3);
}
.nav-main ul {
    /* Remove bullet points */
    list-style-type: none;
    /* Remove default padding */
    padding: 0;
    /* Remove default margin */
    margin: 0;
    /* Use Flexbox to align items horizontally */
    display: flex;
}
/* Add space between menu items */
.nav-main li {
    margin-right: 1rem;
}
/* Remove margin on the last item */
.nav-main li:last-child {
    margin-right: 0;
}
.nav-main a {
    /* Remove underline from links */
    text-decoration: none;
    /* Add padding for better click area */
    padding: var(--border-pad );
    /* Ensure the entire area is clickable */
    display: block;
}
/* Highlight on hover */
.nav-main a:hover {
    background-color: var(--surface5);
    /* Optional: Add rounded corners */
    border-radius: var(--border-radius);
}

/* Adapt for narrow screens */
@media only screen and (max-width: 512px) {
    /* Very simple adaption example, a single column, 4 rows */
    .container {
        gap: 0.5rem;

        /* 1 cols x 4 rows layout. 2nd row is larger */
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr 1fr 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}
3

The example uses a CSS Grid with named grid template areas. This makes it simple to adjust.

The areas for the layout above are:

grid-template-areas: 
    "header header"
    "sidebar main"
    "sidebar footer";

To make the footer full width, use:

grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";

To move the sidebar to the right, use:

grid-template-areas: 
    "header header"
    "main   sidebar"
    "footer sidebar";

The example has a breakpoint for narrow screens (set at 512px) where it switches to a single column with the sidebar below the main area.

This layout will included in the examples library for uibuilder in v7.

2 Likes
4

Another update, here is a complete flow which is the example that will be in v7. In addition, a small CSS tweak to make it all look better if you are using v6.

Also, a nice surprise. :slight_smile: This example includes sending dynamic data from Node-RED to illustrate the fact that you can combine dynamic, no-code output from Node-RED with the static layout.

Watch out for another layout example coming to the forum shortly as well.

Yes, a Dashboard 1 style layout!

image
image1028Ă—865 50 KB

image
image1272Ă—497 52.3 KB

Example Flow

[{"id":"4609ab6ec2568455","type":"group","z":"7e598dbf2e556452","name":"Example content-heavy standard layout (blog-style)","style":{"fill":"#e3f3d3","fill-opacity":"0.31","label":true,"color":"#000000"},"nodes":["abd74b7c71705183","1e31ada9e399ea1b","37c5ea9212d472d6","e4bb79221cd4d494","d87282975afb0ff0","e68ff082f08f4e09","9dce05a892338fb0","fd4bef967d319a77"],"x":58,"y":39,"w":1004,"h":388},{"id":"abd74b7c71705183","type":"inject","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":145,"y":100,"wires":[["1e31ada9e399ea1b"]],"l":false},{"id":"1e31ada9e399ea1b","type":"uibuilder","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"","topic":"","url":"layout-grid","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"7.0.0","showMsgUib":false,"title":"","descr":"","editurl":"vscode://file/src/uibRoot/layout-grid/?windowId=_blank","x":310,"y":100,"wires":[["37c5ea9212d472d6"],["e4bb79221cd4d494"]]},{"id":"37c5ea9212d472d6","type":"debug","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"debug 448","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":505,"y":80,"wires":[],"l":false},{"id":"e4bb79221cd4d494","type":"debug","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"debug 449","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":445,"y":120,"wires":[],"l":false},{"id":"d87282975afb0ff0","type":"comment","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"Design","info":"A fairly common blog-style or content heavy\nlayout.\n\n```\n+-------------------------------------------+\n| Title (h1)                                |\n| Sub-title (div                            |\n| Nav1 Nav2 Nav2 (menu)                     |\n+-------------------------------------------+\n+ Sidebar + Main (for articles)             |\n| (aside) |                                 |\n|         | +-----------------------------+ |\n|         | | Article title (h2)          | |\n|         | +-----------------------------+ |\n|         | | Article body                | |\n|         | +-----------------------------+ |\n|         | +-----------------------------+ |\n|         | | Article title (h2)          | |\n|         | +-----------------------------+ |\n|         | | Article body                | |\n|         | +-----------------------------+ |\n|         |                                 |\n|         +---------------------------------+\n|         | Footer                          |\n+---------+---------------------------------+\n```\n\nUses a CSS Grid with named grid template areas.\nThis makes it simple to adjust.\n\nThe areas for the layout above are:\n\n```css\ngrid-template-areas: \n    \"header header\"\n    \"sidebar main\"\n    \"sidebar footer\";\n```\n\nTo make the footer full width, use:\n\n```css\ngrid-template-areas: \n    \"header header\"\n    \"sidebar main\"\n    \"footer footer\";\n```\n\nTo move the sidebar to the right, use:\n\n```css\ngrid-template-areas: \n    \"header header\"\n    \"main sidebar\"\n    \"footer sidebar\";\n```\n\nThe example has a breakpoint for narrow\nscreens (set at 512px) where it switches to\na single column with the sidebar below the \nmain area.","x":670,"y":80,"wires":[]},{"id":"e68ff082f08f4e09","type":"group","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"Setup - run this first to set up the page and style - only needs to run once","style":{"fill":"#ffffff","fill-opacity":"0.31","label":true,"color":"#000000"},"nodes":["84807a7720ef4d0f","0cfd3ddb0693fad1","ae59ccb45c3e20ac","a58da542c04e47b9","d0f6781d12dddb92","49b428fbb525f866"],"x":94,"y":179,"w":672,"h":122},{"id":"84807a7720ef4d0f","type":"template","z":"7e598dbf2e556452","g":"e68ff082f08f4e09","name":"index.html","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!doctype html>\n<html lang=\"en\"><head>\n\n    <meta charset=\"utf-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"icon\" href=\"../uibuilder/images/node-blue.ico\">\n\n    <title>Grid Layout - Node-RED uibuilder</title>\n    <meta name=\"description\" content=\"Node-RED uibuilder - Grid Layout\">\n\n    <!-- Your own CSS (defaults to loading uibuilders css)-->\n    <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->\n    <script defer src=\"https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js\"></script>\n    <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n    <!-- <script defer src=\"./index.js\">/* <= OPTIONAL: Put your custom code in that */</script> -->\n    <!-- #endregion -->\n\n</head><body>\n\n    <div class=\"container\">\n        <header class=\"header\">\n            <h1 class=\"with-subtitle\">Grid Layout Example</h1>\n            <div role=\"doc-subtitle\">Using the uibuilder IIFE library.</div>\n            <nav class=\"nav-main\">\n                <ul>\n                    <li><a href=\"#nav1\">Nav 1</a></li>\n                    <li><a href=\"#nav2\">Nav 2</a></li>\n                    <li><a href=\"#nav3\">Nav 3</a></li>\n                </ul>\n            </nav>\n        </header>\n\n        <main id=\"more\"><!-- '#more' is used as a parent for dynamic HTML content in examples -->\n            <article>\n                <h2>Example blog-style layout</h2>\n                <p>\n                    A grid of 2 columns and 3 rows. Right column and middle row are larger than the others.\n                </p>\n            </article>\n\n            <article>\n                <h2>Article 2</h2>\n                <p>\n                    We use a well structured HTML 5 tag structure to define the layout.\n                </p>\n            </article>\n        </main>\n\n        <aside class=\"sidebar\">\n            Sidebar wider still\n        </aside>\n\n        <footer>\n            The footer\n            <div>2nd footer</div>\n        </footer>\n    </div>\n\n</body></html>","output":"str","x":470,"y":220,"wires":[["a58da542c04e47b9"]]},{"id":"0cfd3ddb0693fad1","type":"inject","z":"7e598dbf2e556452","g":"e68ff082f08f4e09","name":"","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setup all FE files","x":155,"y":220,"wires":[["ae59ccb45c3e20ac","d0f6781d12dddb92"]],"l":false},{"id":"ae59ccb45c3e20ac","type":"change","z":"7e598dbf2e556452","g":"e68ff082f08f4e09","name":"index.html","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.html","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":310,"y":220,"wires":[["84807a7720ef4d0f"]]},{"id":"a58da542c04e47b9","type":"uib-save","z":"7e598dbf2e556452","g":"e68ff082f08f4e09","url":"layout-grid","uibId":"1e31ada9e399ea1b","folder":"src","fname":"","createFolder":false,"reload":true,"usePageName":false,"encoding":"utf8","mode":438,"name":"","topic":"","x":670,"y":220,"wires":[]},{"id":"d0f6781d12dddb92","type":"change","z":"7e598dbf2e556452","g":"e68ff082f08f4e09","name":"index.css","rules":[{"t":"set","p":"fname","pt":"msg","to":"index.css","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":260,"wires":[["49b428fbb525f866"]]},{"id":"49b428fbb525f866","type":"template","z":"7e598dbf2e556452","g":"e68ff082f08f4e09","name":"index.css","field":"payload","fieldType":"msg","format":"css","syntax":"mustache","template":"/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.min.css`\n * This version auto-adjusts for light/dark browser settings.\n */\n@import url(\"../uibuilder/uib-brand.min.css\");\n\n/* CSS variables to make it easier to control */\n:root {\n    --container-max-width: 1000px;\n    --container-grid-col-gap: 1rem;\n    --container-grid-row-gap: 0.5rem;\n    --main-width: repeat(12, 1fr);\n    /* 1fr; */\n    --sidebar-max-width: 1fr;\n    --sidebar-min-width: 0.1fr;\n}\n\n/* The outer container div */\n.container {\n    width: 100%;\n    max-width: var(--container-max-width);\n    margin: 0 auto;\n    /* Center the container horizontally */\n    display: grid;\n    gap: var(--container-grid-row-gap) var(--container-grid-col-gap);\n\n    /* 2 cols x 3 rows layout. Middle row & right column are larger. Left col is constrained min/max */\n    grid-template-columns: minmax(var(--sidebar-min-width), var(--sidebar-max-width)) var(--main-width);\n    /* grid-template-columns: var(--sidebar-min-width) var(--main-width); */\n    grid-template-rows: 0fr 1fr 0fr;\n    grid-template-areas:\n        \"header header\"\n        \"sidebar main\"\n        \"sidebar footer\";\n    justify-items: stretch;\n}\n\n/* Assign the main areas to the grid */\nmain {\n    /* Where you put your content */\n    grid-area: main;\n    border: 1px dashed silver;\n    /* these just for easier understanding */\n}\n\n/* Set a child div to have same format as an article */\nmain > div {\n    /* max-width: var(--max-width); */\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: var(--border-pad);\n    margin: 1rem var(--border-margin);\n    background-color: var(--surface3);\n}\nmain > div > h2, main > div > h3, main > div > h4 {\n    margin-block-start: 0;\n    border-bottom: 1px solid var(--text3);\n    padding-block-end: var(--border-pad);\n}\n\nheader {\n    /* Headings, nav, etc */\n    grid-area: header;\n    border: 1px dashed gold;\n}\n\nfooter {\n    /* at the bottom, (c), dates, etc */\n    grid-area: footer;\n    border: 1px dashed green;\n    margin-top: 0;\n}\n\n/* We might want other sidebars so be more explicit for this */\naside.sidebar {\n    /* stuff to one side of the main content */\n    grid-area: sidebar;\n    border: 1px dashed violet;\n}\n\n/* Simple horizontal navigation main menu (in the header) */\n.nav-main {\n    background-color: var(--surface3);\n}\n\n.nav-main ul {\n    /* Remove bullet points */\n    list-style-type: none;\n    /* Remove default padding */\n    padding: 0;\n    /* Remove default margin */\n    margin: 0;\n    /* Use Flexbox to align items horizontally */\n    display: flex;\n}\n\n/* Add space between menu items */\n.nav-main li {\n    margin-right: 1rem;\n}\n\n/* Remove margin on the last item */\n.nav-main li:last-child {\n    margin-right: 0;\n}\n\n.nav-main a {\n    /* Remove underline from links */\n    text-decoration: none;\n    /* Add padding for better click area */\n    padding: var(--border-pad);\n    /* Ensure the entire area is clickable */\n    display: block;\n}\n\n/* Highlight on hover */\n.nav-main a:hover {\n    background-color: var(--surface5);\n    /* Optional: Add rounded corners */\n    border-radius: var(--border-radius);\n}\n\n/* Adapt for narrow screens */\n@media only screen and (max-width: 512px) {\n    /* Very simple adaption example, a single column, 4 rows */\n    .container {\n        gap: 0.5rem;\n\n        /* 1 cols x 4 rows layout. 2nd row is larger */\n        grid-template-columns: 1fr;\n        grid-template-rows: 0.1fr 1fr 0.1fr 0.1fr;\n        grid-template-areas:\n            \"header\"\n            \"main\"\n            \"sidebar\"\n            \"footer\";\n    }\n}\n\n\n/* The rest is not needed if using \n   UIBUILDER v7 since that has an updated\n   uib-brand.css that includes this */\n/* This lets us use an article like a card display */\narticle {\n    max-width: var(--max-width);\n    border: 1px solid var(--text3);\n    border-radius: var(--border-radius);\n    padding: var(--border-pad);\n    margin: 1rem var(--border-margin);\n    background-color: var(--surface3);\n}\narticle>h1::before {\n    font-size: 50%;\n    color: hsl(var(--failure-hue) 100% 50%);\n    content: \"â›” Do not use H1 headings in articles. \"\n}\narticle>h2,\narticle>h3,\narticle>h4 {\n    margin-block-start: 0;\n    border-bottom: 1px solid var(--text3);\n    padding-block-end: var(--border-pad);\n}","output":"str","x":480,"y":260,"wires":[["a58da542c04e47b9"]]},{"id":"9dce05a892338fb0","type":"group","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"Add dynamic data - 2 added widgets, 1 markdown and 1 list","style":{"label":true,"fill":"#ffffbf","fill-opacity":"0.22","color":"#000000"},"nodes":["4afed1a987617465","9d5eedc93c184d9d","e443a7981ad81665","102ec190f356b60f","42b94d2393565e2f","0f6958e3d7f65b61","20927207b979703a"],"x":84,"y":319,"w":952,"h":82},{"id":"4afed1a987617465","type":"uib-element","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"Markdown article","topic":"","elementtype":"markdown","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"md1","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"last","positionSourceType":"str","passthrough":false,"confData":{},"x":450,"y":360,"wires":[["0f6958e3d7f65b61"]]},{"id":"9d5eedc93c184d9d","type":"link out","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"to uib input","mode":"link","links":["fd4bef967d319a77"],"x":995,"y":360,"wires":[]},{"id":"e443a7981ad81665","type":"inject","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"$formatInteger($random() * 100, \"#00\")","payloadType":"jsonata","x":145,"y":360,"wires":[["102ec190f356b60f"]],"l":false},{"id":"102ec190f356b60f","type":"template","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"Markdown","field":"payload","fieldType":"msg","format":"markdown","syntax":"mustache","template":"## Markdown Card\n\nDynamically added from a Node-RED/UIBUILDER no-code node.\n\nRandom number: {{payload}}","output":"str","x":270,"y":360,"wires":[["4afed1a987617465"]]},{"id":"42b94d2393565e2f","type":"uib-element","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"List","topic":"","elementtype":"ul","parent":"#more","parentSource":"#more","parentSourceType":"str","elementid":"ul1","elementIdSourceType":"str","heading":"A List","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"last","positionSourceType":"str","passthrough":false,"confData":{},"x":750,"y":360,"wires":[["20927207b979703a"]]},{"id":"0f6958e3d7f65b61","type":"change","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"List","rules":[{"t":"set","p":"payload","pt":"msg","to":"[\"I was dynamically\",\"inserted by a\",\"Node-RED/UIBUILDER\",\"no-code flow\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":630,"y":360,"wires":[["42b94d2393565e2f"]]},{"id":"20927207b979703a","type":"uib-update","z":"7e598dbf2e556452","g":"9dce05a892338fb0","name":"List width","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#ul1","cssSelectorType":"str","slotSourceProp":"","slotSourcePropType":"msg","attribsSource":"{\"style\":\"--article-width: 6;\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":880,"y":360,"wires":[["9d5eedc93c184d9d"]]},{"id":"fd4bef967d319a77","type":"link in","z":"7e598dbf2e556452","g":"4609ab6ec2568455","name":"uib input","links":["9d5eedc93c184d9d"],"x":185,"y":140,"wires":[["1e31ada9e399ea1b"]]}]
1 Like