@cgjgh/node-red-dashboard-2-ui-slide-confirm/nodes/locales/en-US/ui-slide-confirm.html

A Slide to Confirm node for preventing accidental user actions in Node-RED Dashboard 2.0

<script type="text/html" data-help-name="ui-slide-confirm">
    <p>
        The <code>ui-slide-confirm</code> node provides an interactive slider mechanism that allows users to confirm actions
        on your dashboard. It not only offers a tangible way to trigger events but also dynamically manages the state
        (visibility and enabled status) of other widgets within the same group.
    </p>
    <h3>Overview</h3>
    <p>
        When the slider is activated, the node sends a confirmation message while updating controlled widgets’ states.
        This makes it ideal for workflows where deliberate user action is required before proceeding—adding an extra
        layer of verification.
    </p>
    <h3>Features</h3>
    <ul>
        <li><b>Interactive Slider:</b> Users slide to confirm an action, reducing accidental triggers.</li>
        <li><b>Customizable Appearance:</b> Adjust dimensions, text size, and icons to seamlessly integrate with your dashboard.</li>
        <li><b>Controlled Widgets:</b> Dynamically manage the state of other dashboard widgets within the same group.</li>
        <li><b>Dynamic Messaging:</b> Update properties at runtime via <code>msg.ui_update</code> to customize the slider on the fly.</li>
        <li><b>Timeout & Animation:</b> Set a timeout for resetting the slider and enable smooth animations for enhanced user experience.</li>
    </ul>
    <h3>Configuration Options</h3>
    <p>
        The node offers several configuration settings that you can adjust in the editor:
    </p>
    <dl class="message-properties">
        <dt class="mandatory">Group <span class="property-type">ui-group</span></dt>
        <dd>
            Select the dashboard group where the slider will be displayed.
        </dd>
        <dt class="mandatory">Name <span class="property-type">string</span></dt>
        <dd>
            An identifier for the node within your flow.
        </dd>
        <dt class="optional">Label <span class="property-type">string</span></dt>
        <dd>
            The text label displayed alongside the slider. This can be updated dynamically.
        </dd>
        <dt class="optional">Slider Height <span class="property-type">number</span></dt>
        <dd>
            Defines the vertical dimension of the slider in pixels.
        </dd>
        <dt class="optional">Text Size <span class="property-type">number</span></dt>
        <dd>
            Sets the font size (in pixels) for the slider's text.
        </dd>
        <dt class="optional">Icon Success <span class="property-type">string</span></dt>
        <dd>
            Select an icon (e.g., from Material Design Icons or Font Awesome) to indicate successful confirmation.
        </dd>
        <dt class="optional">Text <span class="property-type">string</span></dt>
        <dd>
            The prompt displayed on the slider before confirmation (e.g., "slide to confirm").
        </dd>
        <dt class="optional">Success Text <span class="property-type">string</span></dt>
        <dd>
            The text that appears once the slider has been successfully activated (e.g., "confirmed").
        </dd>
        <dt class="optional">Timeout <span class="property-type">number</span></dt>
        <dd>
            Specifies the duration (in seconds) after which the slider resets. Set to 0 to disable the timeout.
        </dd>
        <dt class="optional">Circle <span class="property-type">boolean</span></dt>
        <dd>
            Toggle to use a rounded (true) or square (false) design for the slider.
        </dd>
        <dt class="optional">Animate <span class="property-type">boolean</span></dt>
        <dd>
            Enable or disable smooth animations for the slider’s movement.
        </dd>
        <dt class="optional">Width <span class="property-type">number</span></dt>
        <dd>
            Specifies the width of the slider in pixels. This property can be updated dynamically.
        </dd>
        <dt class="optional">Height <span class="property-type">number</span></dt>
        <dd>
            Specifies the height of the slider in pixels. This property can be updated dynamically.
        </dd>
    </dl>
    <h3>Controlled Widgets</h3>
    <p>
        The node can control other <code>ui-*</code> dashboard widgets within the same group. By default, all controlled widgets
        are set to be hidden and disabled. When the slider is activated, these widgets can be updated to become visible and enabled.
        A widget table is automatically generated in the configuration panel so you can easily select which widgets to manage.
    </p>
    <h3>Dynamic Properties (Runtime Updates)</h3>
    <p>
        At runtime, you can update the following properties by appending them to a <code>msg.ui_update</code> object.
    </p>
    <dl class="message-properties">
        <dt class="optional">label <span class="property-type">string</span></dt>
        <dd>
            Updates the node’s label.
        </dd>
        <dt class="optional">iconSuccess <span class="property-type">string</span></dt>
        <dd>
            Updates the icon used to indicate successful confirmation.
        </dd>
        <dt class="optional">animate <span class="property-type">boolean</span></dt>
        <dd>
            Enables or disables slider animation.
        </dd>
        <dt class="optional">circle <span class="property-type">boolean</span></dt>
        <dd>
            Toggles the slider’s design between rounded and square.
        </dd>
        <dt class="optional">text <span class="property-type">string</span></dt>
        <dd>
            Updates the prompt text on the slider.
        </dd>
        <dt class="optional">successText <span class="property-type">string</span></dt>
        <dd>
            Updates the confirmation message shown after a successful slide.
        </dd>
        <dt class="optional">width <span class="property-type">number</span></dt>
        <dd>
            Dynamically adjusts the slider’s width.
        </dd>
        <dt class="optional">height <span class="property-type">number</span></dt>
        <dd>
            Dynamically adjusts the slider’s height.
        </dd>
        <dt class="optional">timeout <span class="property-type">number</span></dt>
        <dd>
            Dynamically sets the reset timeout (in seconds) for the slider.
        </dd>
        <dt class="optional">sliderHeight <span class="property-type">number</span></dt>
        <dd>
            Adjusts the vertical dimension of the slider, affecting its overall appearance.
        </dd>
        <dt class="optional">textSize <span class="property-type">number</span></dt>
        <dd>
            Updates the font size for the text displayed on the slider.
        </dd>
    </dl>
    <h3>Controlling Confirmed State</h3>
    <p>
        Confirmed state of slider can be controlled from Node-RED by sending <code>msg.confirmed</code> property with a <code>true</code> or <code>false</code> value.
    </p>
    <h3>Usage</h3>
    <p>
        To use the <code>ui-slide-confirm</code> node in your flow:
    </p>
    <ol>
        <li>
            Drag the node into your workspace and open its configuration panel.
        </li>
        <li>
            Select the appropriate dashboard <b>Group</b> for the slider.
        </li>
        <li>
            Configure appearance settings such as <b>Slider Height</b>, <b>Text Size</b>, and <b>Icon Success</b>.
        </li>
        <li>
            Enter a default prompt in the <b>Text</b> field along with a confirmation message in the <b>Success Text</b> field.
        </li>
        <li>
            Optionally adjust <b>Width</b>, <b>Height</b>, <b>Timeout</b>, <b>Circle</b>, and <b>Animate</b> options.
        </li>
        <li>
            Using the widget table, select one or more controlled widgets from the current group to be managed by the slider.
        </li>
        <li>
            Deploy your flow. When the slider is activated, it processes the input, updates its state based on dynamic property changes,
            and controls the associated widgets accordingly.
        </li>
    </ol>
    <h3>Additional Notes</h3>
    <p>
        The <code>ui-slide-confirm</code> node is ideal for scenarios that require a deliberate user action before proceeding with critical
        tasks. Its dynamic property updates and robust input processing ensure that the user interface stays in sync with your flow logic.
    </p>
    <p>
        For further customization, consider applying additional CSS classes via the <b>Class</b> field to fine-tune the
        appearance of the slider and its controlled widgets.
    </p>
</script>