🔍 Code Extractor

A custom Panel button widget that conditionally displays a confirmation dialog before registering clicks, built on ReactiveHTML with integrated JavaScript handlers.

Purpose

This class provides a reusable button component for Panel dashboards that can optionally show a browser confirmation dialog when clicked. It's specifically designed for scenarios where user actions need confirmation (e.g., warning about unscanned samples). The button integrates HTML templating with JavaScript event handlers and uses Panel's reactive parameter system to track click events. The confirmation behavior can be toggled via the 'alert' parameter, making it flexible for different use cases.

Source Code

class Confirm_button(ReactiveHTML):
    """
    A button that conditionally asks for confirmation
    
    parameters
    ----------
    text : str
        The name of the button
    clicks : int
        The number of clicks
    alert : bool
        Whether to use the alert pop up or not.
        
    attributes
    ----------
    _template : str
        html template string
    _scripts : dict
        A dictionary of JS functions
    """
    
    text = param.String()
    clicks = param.Integer(default=0)
    alert = param.Boolean(default=True)
    
    _template = """
    <button id="custom_button" class="CPathBtn3 BoldBtn" style="max-height:40px;" clicks=" ${clicks}" confirm=" ${alert}" onclick="${script('confirmChecker')}">{{ text }}</button>
    """
    
    _scripts = {
        "confirmHandler": 'if(confirm("Warning! Not all samples have been scanned. By continuing, these samples will be marked as not received.")) {data.clicks+=1}',
        "confirmChecker": 'if(data.alert) {self.confirmHandler()} else {data.clicks+=1}'
    }
        
    def on_click(self, callback):
        """
        Set an on click function for this widget
        
        parameters
        ----------
        callback : function
            function to carry out when the widget is clicked
        """
        return self.param.watch(callback, 'clicks', onlychanged=False)

Parameters

Parameter Details

text: The display text shown on the button. This is a param.String that defines the button's label visible to users.

clicks: An integer counter that tracks the number of times the button has been clicked. Defaults to 0. This parameter is reactive and can be watched for changes to trigger callbacks.

alert: A boolean flag that determines whether the confirmation dialog should be shown before incrementing the click counter. When True, displays a warning message asking for user confirmation. When False, clicks are registered immediately without confirmation. Defaults to True.

Return Value

Instantiating this class returns a Confirm_button object that inherits from ReactiveHTML. The object is a Panel widget that can be added to Panel layouts and dashboards. The on_click method returns a watcher object from param.watch that monitors the 'clicks' parameter.

Class Interface

Methods

Attributes

Dependencies

• param
• panel

Required Imports

import param
import panel as pn
from panel.reactive import ReactiveHTML

Usage Example

import param
import panel as pn
from panel.reactive import ReactiveHTML

class Confirm_button(ReactiveHTML):
    text = param.String()
    clicks = param.Integer(default=0)
    alert = param.Boolean(default=True)
    
    _template = '''
    <button id="custom_button" class="CPathBtn3 BoldBtn" style="max-height:40px;" clicks=" ${clicks}" confirm=" ${alert}" onclick="${script('confirmChecker')}">{{ text }}</button>
    '''
    
    _scripts = {
        "confirmHandler": 'if(confirm("Warning! Not all samples have been scanned. By continuing, these samples will be marked as not received.")) {data.clicks+=1}',
        "confirmChecker": 'if(data.alert) {self.confirmHandler()} else {data.clicks+=1}'
    }
        
    def on_click(self, callback):
        return self.param.watch(callback, 'clicks', onlychanged=False)

# Instantiate the button with confirmation enabled
button = Confirm_button(text='Submit', alert=True)

# Define a callback function
def handle_click(event):
    print(f'Button clicked {event.new} times')

# Register the callback
button.on_click(handle_click)

# Add to a Panel layout
layout = pn.Column(button)
layout.servable()

# Or create a button without confirmation
quick_button = Confirm_button(text='Quick Action', alert=False)
quick_button.on_click(lambda e: print('Clicked without confirmation'))

Best Practices

• Always set the 'text' parameter when instantiating to provide a meaningful button label
• Use alert=True for destructive or irreversible actions that need user confirmation
• Register callbacks using the on_click() method rather than directly watching the 'clicks' parameter
• The 'clicks' parameter increments only after confirmation (if alert=True), so it represents confirmed actions
• The confirmation message is hardcoded in the JavaScript; consider extending the class if you need custom messages
• This component requires a browser environment and won't work in headless contexts
• The button uses custom CSS classes (CPathBtn3, BoldBtn) which should be defined in your application's stylesheet
• Remember that onlychanged=False in on_click means the callback fires even if clicks value doesn't change (though it always increments)
• The component inherits from ReactiveHTML, so it follows Panel's reactive programming model - parameter changes automatically update the UI

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• class Focus_button 63.2% similar

  A custom Panel ReactiveHTML button widget that displays an eye icon and tracks the number of times it has been clicked.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Browser_button 63.1% similar

  A custom Panel ReactiveHTML button component that displays a file or folder icon with text and tracks click events.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Toggle_switch 57.8% similar

  A customizable toggle switch widget in C-Path style that extends ReactiveHTML, providing a checkbox-like interface with visual slider representation.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Click_watcher 56.2% similar

  A wrapper class that adds click detection functionality to Panel objects by wrapping them in a clickable div element and tracking the number of clicks.

  From: /tf/active/vicechatdev/resources/py2html.py

• class Inbox 54.2% similar

  A reactive HTML component that displays a mailbox/notification icon with a badge indicator and tracks user clicks.

  From: /tf/active/vicechatdev/resources/py2html.py