node-red-contrib-uibuilder/src/editor/uib-update/panel.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.

<div id="ti-edit-panel">

    <div aria-label="Choose update (default) or delete mode" class="form-row">
        <label for="node-input-mode">Mode</label>
        <input type="text" id="node-input-mode">
        <input type="hidden" id="node-input-modeSourceType">
    </div>

    <div aria-label="The CSS Selector to find the HTML element to update" class="form-row">
        <label for="node-input-cssSelector"><i class="fa fa-file-code-o"></i> CSS Selector</label>
        <input type="text" id="node-input-cssSelector" placeholder="Defines the element to update">
        <input type="hidden" id="node-input-cssSelectorType">
    </div>
    
    <div><i>Update HTML slot content:</i></div>
    <div aria-label="The source of the slot content update data" class="form-row">
        <label for="node-input-slotSourceProp">Content Source</label>
        <input type="text" id="node-input-slotSourceProp" placeholder="Source data to update elements content">
        <input type="hidden" id="node-input-slotSourcePropType">
    </div>
    <div aria-label="Input content is Markdown rather than HTML?" class="form-row">
        <label for="node-input-slotPropMarkdown">Markdown?</label>
        <input type="checkbox" id="node-input-slotPropMarkdown" style="width: auto;vertical-align: top;">
        <span id="slotPropMarkdown-unchecked" style="font-size:smaller;"> &nbsp; Input can be an HTML string</span>
        <span id="slotPropMarkdown-checked" style="display:none;font-size:smaller;"> &nbsp; Markdown-It library must be loaded in browser</span>
    </div>
    

    <!-- <div style="border:1px solid var(--red-ui-primary-border-color);padding: 0.1rem;"> -->
    <div><i>Update element attributes:</i></div>
    <div aria-label="The source of the attribute update data" class="form-row">
        <label for="node-input-attribsSource">Attribs Source</label>
        <input type="text" id="node-input-attribsSource" placeholder="Source data to update elements attributes">
        <input type="hidden" id="node-input-attribsSourceType">
    </div>
    <div aria-label="Additional information" class="form-row form-tips node-help" style="width:89%">
        <p style="font-size: smaller;">
            The source data must be an object containing attribute name keys. e.g.
            <code>{"class": "myclassname", <br>"style": "color:red; border: 1px solid silver;"}</code>
        </p>    
    </div>

    <hr>
    
    <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>