nodered_cfg/node_modules/@flowfuse/node-red-dashboard/nodes/config/ui_link.html

<script type="text/javascript">
    RED.nodes.registerType('ui-link', {
        category: 'config',
        defaults: {
            name: {
                value: RED._('@flowfuse/node-red-dashboard/ui-link:ui-link.label.linkName'),
                required: true
            },
            ui: {
                type: 'ui-base',
                value: '',
                required: true
            },
            path: {
                value: -1,
                required: false
            },
            icon: {
                value: 'home',
                required: false
            },
            order: {
                value: -1
            },
            visible: { value: true },
            disabled: { value: false }
        },
        oneditprepare: function () {
            // handle Node-RED's dislike for booleans on dropdowns
            if (this.visible === undefined || this.visible === true) {
                this.visible = true
                $('#node-config-input-visible').val('true')
            } else if (this.visible === false) {
                this.visible = false
                $('#node-config-input-visible').val('false')
            }
            // handle Node-RED's dislike for booleans on dropdowns
            if (this.disabled === undefined || this.disabled === false) {
                this.disabled = false
                $('#node-config-input-disabled').val('false')
            } else if (this.disabled === true) {
                this.disabled = true
                $('#node-config-input-disabled').val('true')
            }
        },
        oneditsave: function () {
            // convert string to boolean
            const visible = $('#node-config-input-visible').val()
            if (visible === 'true') {
                this.visible = true
            } else {
                this.visible = false
            }

            // convert string to boolean
            const disabled = $('#node-config-input-disabled').val()
            if (disabled === 'true') {
                this.disabled = true
            } else {
                this.disabled = false
            }
        },
        label: function () {
            const path = this.path || ''
            return `${this.name} [${path}]` || 'UI Link'
        }
    })
</script>

<script type="text/html" data-template-name="ui-link">
    <div class="form-row">
        <label for="node-config-input-name"><i class="w-16 fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]node-red:common.label.name">
    </div>
    <div class="form-row">
        <label for="node-config-input-ui"><i class="w-16 fa fa-sitemap"></i> <span data-i18n="ui-link.label.ui"></label>
        <input type="text" id="node-config-input-ui">
    </div>
    <div class="form-row">
        <label for="node-config-input-path"><i class="w-16 fa fa-link"></i> <span data-i18n="ui-link.label.path"></label>
        <input type="text" id="node-config-input-path">
    </div>
    <div class="form-row">
        <label for="node-config-input-icon"><i class="w-16 fa fa-home"></i> <span data-i18n="ui-link.label.icon"></label>
        <input type="text" id="node-config-input-icon">
    </div>
    <div class="form-row" style="font-weight: 600;">
        <i class="w-16 fa fa-eye"></i> <span data-i18n="ui-link.label.defaultState">
    </div>
    <div class="form-row">
        <div style="display: flex; align-items: center; gap: 2px;">
            <label for="node-config-input-visible" style="margin-bottom: 0" data-i18n="ui-link.label.visibility"></label>
            <select id="node-config-input-visible" style="width: 150px;">
                <option value="true" data-i18n="ui-link.label.visible"></option>
                <option value="false" data-i18n="ui-link.label.hidden"></option>
            </select>
        </div>
    </div>
    <div class="form-row">
        <div style="display: flex; align-items: center; gap: 2px;">
            <label for="node-config-input-disabled" style="margin-bottom: 0" data-i18n="ui-link.label.interactivity"></label>
            <select id="node-config-input-disabled" style="width: 150px;">
                <option value="false" data-i18n="ui-link.label.active"></option>
                <option value="true" data-i18n="ui-link.label.disabled"></option>
            </select>
        </div>
    </div>
</script>