node-red-contrib-step-escape/nodes/custom-block/step-escape.html

A custom Node-RED Dashboard node that displays a block with a dark background, grey right border, full tab height, and 35% width.

<script type="text/javascript">
    RED.nodes.registerType('step-escape', {
        category: 'function',
        color: '#b88B5C',
        defaults: {
            name: { value: '' },
            steps: { value: [] }  // Array of steps with name, validation, id
        },
        inputs: 1,
        outputs: 1,
        icon: 'settings.svg',
        paletteLabel: 'Step Escape',
        label: function () {
            return this.name || 'Step Escape';
        },
        oneditprepare: function () {
            const steps = $("#node-input-steps-container");
            const that = this;

            function buildStepRow(step = {}) {
                const index = steps.children().length;
                const row = $(`
                    <div class="form-row step-row" data-index="${index}">
                        <label>Étape ${index + 1}</label>
                        <input type="text" class="step-name" placeholder="Name" style="width: 35%;">
                        <input type="text" class="step-validation" placeholder="msg.payload..." style="width: 35%;">
                        <input type="text" class="step-id" placeholder="ID" style="width: 20%;">
                        <button class="remove-step red-ui-button red-ui-button-small"><i class="fa fa-trash"></i></button>
                    </div>
                `);

                row.find(".step-name").val(step.name || '');
                row.find(".step-validation").val(step.validation || '');
                row.find(".step-id").val(step.id || '');

                row.find(".remove-step").click(function () {
                    row.remove();
                    refreshLabels();
                });

                steps.append(row);
            }

            function refreshLabels() {
                steps.children().each(function (i, el) {
                    $(el).find("label").text("Step " + (i + 1));
                });
            }

            // Load existing steps
            (that.steps || []).forEach(buildStepRow);

            $("#add-step-btn").click(function (e) {
                e.preventDefault();
                buildStepRow();
            });
        },
        oneditsave: function () {
            const steps = [];
            $("#node-input-steps-container").children().each(function () {
                steps.push({
                    name: $(this).find(".step-name").val(),
                    validation: $(this).find(".step-validation").val(),
                    id: $(this).find(".step-id").val(),
                    state: 'not-executed' // Default state
                });
            });
            this.steps = steps;
            console.log("Logic: Saved steps:", JSON.stringify(this.steps)); // Debug log
        }
    });
</script>

<script type="text/x-red" data-template-name="step-escape">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <div class="form-row">
        <label><i class="fa fa-list"></i> Steps</label>
        <div id="node-input-steps-container" style="margin-left: 20px;"></div>
        <button id="add-step-btn" class="red-ui-button red-ui-button-small" style="margin-top: 10px;">
            <i class="fa fa-plus"></i> Add Step
        </button>
    </div>
</script>

<script type="text/x-red" data-help-name="step-escape">
    <p>Processes msg.payload to update step states and sends them to a UI node for display.</p>
    <p>Step states (not-executed, in-progress, validated) are updated based on msg.payload matching the validation value and persisted in context.</p>
</script>