node-red-contrib-uibuilder/nodes/uib-html/customNode.html

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.

<!--
    Copyright (c) 2023-2024 Julian Knight (Totally Information)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-->

<script type="text/html" data-template-name="uib-html">
<div id="ti-edit-panel">
  
    <div aria-label="Default msg topic. Make unique if using uib-cache." class="form-row">
        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
        <input type="text" id="node-input-topic">
    </div>
    <div aria-label="Node name (descriptive only)" class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name">
    </div>

    <div aria-label="If selected, msg.template or the uibuilder blank template will be used as a wrapper for the output HTML" class="form-row">
        <label for="node-input-useTemplate">Merge HTML Template?</label>
        <input type="checkbox" id="node-input-useTemplate" style="width: auto;vertical-align: top;">
    </div>
    
</div>

</script>

<script type="text/html" data-help-name="uib-html">

<p>
    Converts <span class="uib-name"><span class="uib-red">UI</span>BUILDER</span> low-code UI description data into HTML. Send a <code>msg._ui</code> object to the node, 
    the output will be HTML in <code>msg.payload</code>. 
    <a href="../docs/nodes/uib-html" target="_blank">Details</a>.
</p>

<h3>Inputs</h3>
<dl class="message-properties">
    <dt>_ui <span class="property-type">object</span></dt>
    <dd>
        uibuilder low-code UI definition that will be "hydrated" to full HTML
        by this node.
    </dd>

    <dt class="optional">template <span class="property-type">string</span></dt>
    <dd>
        HTML string that will be wrapped around the <code>msg._ui</code> generated
        HTML output if the template option is ticked in the settings.
    </dd>

    <dt class="optional">topic <span class="property-type">string</span></dt>
    <dd>
        Passed through if provided.
    </dd>
</dl>

<h3>Outputs</h3>
<dl class="message-properties">
    <dt>payload <span class="property-type">string</span></dt>
    <dd>
        Display name (only used in the Editor for display).
    </dd>

    <dt>topic <span class="property-type">string</span></dt>
    <dd>
        The input topic.
    </dd>
</dl>

<h3>Node Settings</h3>
<dl class="message-properties">
    <dt class="optional">Name <span class="property-type">string</span></dt>
    <dd>
        Optional short description shown in the admin interface
    </dd>

    <dt>Topic <span class="property-type">string</span></dt>
    <dd>
        Fixed topic string. Only used if the input <code>msg</code> does not
        contain a <code>topic</code> property.
    </dd>

    <dt class="optional">Merge HTML Template? <span class="property-type">boolean</span></dt>
    <dd>
        If selected, the input will be wrapped in an HTML template.
    </dd>
    <dd>
        The template can be provided in msg.template as a string.
        Or, if not provided, the node will add uibuilder's default "blank" template.
    </dd>
</dl>

</script>

<script type="text/javascript">
    /* eslint-disable strict, sonarjs/no-duplicate-string */
    
    // Isolate this code
    (function () {
        'use strict'
    
        // const mylog = window['uibuilder'].log
    
        /** Module name must match this nodes html file @constant {string} moduleName */
        const moduleName = 'uib-html'
        /** Node's label @constant {string} paletteCategory */
        const nodeLabel = moduleName
        /** Node's palette category @constant {string} paletteCategory */
        const paletteCategory  = window['uibuilder'].paletteCategory
        /** Node's background color @constant {string} paletteColor */
        const paletteColor  = 'var(--uib-node-colour)' // '#E6E0F8'
    
        /** Prep for edit
         * @param {*} node A node instance as seen from the Node-RED Editor
         */
        function onEditPrepare(node) {
            window['tiDoTooltips']('#ti-edit-panel') // Do this at the end
        } // ----- end of onEditPrepare() ----- //
    
        // @ts-ignore
        RED.nodes.registerType(moduleName, {
            category: paletteCategory,
            color: paletteColor,
            defaults: {
                name: { value: '' },
                topic: { value: '' },
                useTemplate: { value: false },
            },
            align: 'left',
            inputs: 1,
            inputLabels: 'uibuilder dynamic UI configuration source data',
            outputs: 1,
            outputLabels: ['HTML payload'],
            icon: 'font-awesome/fa-code',
            paletteLabel: nodeLabel,
            label: function () {
                return this.name || moduleName
            },
    
            /** Prepares the Editor panel */
            oneditprepare: function () { onEditPrepare(this) },
    
        }) // ---- End of registerType() ---- //
    
    }())
    
</script>