Skip to main content
Ctrl+K
Panel 1.7.0 has just been released! Check out the release notes and support Panel by giving it a 🌟 on Github.
Panel v1.7.0 - Home Panel v1.7.0 - Home
  • Getting Started
  • Tutorials
  • Explanation
  • Component Gallery
  • How-to
    • App Gallery
    • API Reference
    • Community
    • Upgrade Guide
    • FAQ
    • About
    • Developer Guide
  • GitHub
  • Twitter
  • Discourse
  • Discord
  • Getting Started
  • Tutorials
  • Explanation
  • Component Gallery
  • How-to
  • App Gallery
  • API Reference
  • Community
  • Upgrade Guide
  • FAQ
  • About
  • Developer Guide
  • GitHub
  • Twitter
  • Discourse
  • Discord

FOR USERS

  • Getting Started
    • Installation
    • Build an App
    • Core Concepts
  • Tutorials
    • Basic Tutorials
      • Build Hello World App
      • Develop in a Notebook
      • Develop in an Editor
      • Display Content with pn.panel
      • Display Content with Panes
      • Display Performance with Indicators
      • Layout Content
      • Control the Size
      • Aligning Content
      • Accept Inputs with Widgets
      • React to User Input
      • Reactive Expressions
      • Utilize Templates
      • Apply a Design
      • Enhance the Style
      • Optimize Performance with Caching
      • Display Activity
      • Update Progressively
      • Build a Dashboard
      • Deploy a Dashboard
      • Build a Report
      • Build Animation
      • Build an Image Classifier
      • Build a Monitoring Dashboard
      • Build Crossfiltering Dashboard
      • Build Streaming Dashboard
      • Build a Chat Bot
      • Build a Todo App
    • Intermediate Tutorials
      • Reactive Parameters
      • Reusable Components
      • Interactivity
      • Structure with a DataStore
      • Develop in an Editor
      • Serve Apps
      • Advanced Layouts
      • Create a Form with HoloViz Panel
      • Build a Todo App
      • Testing the Todo App
      • Build a Server Side Video Camera Application
    • Expert Tutorials
      • Creating a MarioButton with AnyWidgetComponent
      • Creating a MarioButton with JSComponent
  • Explanation
    • Develop Seamlessly Across Environments
    • APIs
      • API context
        • Param in Panel
        • Reactivity in Panel
        • Functions vs. Classes
        • Reactive API
        • Declarative API
        • Callbacks
    • Components
      • Components overview
      • Custom components
    • Dependencies
      • Panel and Param
      • Panel and Bokeh
    • Technology comparisons
      • Panel vs Dash
      • Panel vs ipywidgets
      • Panel vs Voila
      • Panel vs Streamlit
      • Panel vs JavaScript
      • Panel vs Bokeh
  • Component Gallery
    • Panes
      • Alert
      • Audio
      • Bokeh
      • DataFrame
      • DeckGL
      • ECharts
      • Folium
      • GIF
      • HTML
      • HoloViews
      • IPyWidget
      • Image
      • JPG
      • JSON
      • LaTeX
      • Markdown
      • Matplotlib
      • PDF
      • PNG
      • Param
      • Perspective
      • Placeholder
      • Plotly
      • ReactiveExpr
      • Reacton
      • SVG
      • Str
      • Streamz
      • Textual
      • VTK
      • VTKJS
      • VTKVolume
      • Vega
      • Video
      • Vizzu
      • WebP
    • Widgets
      • ArrayInput
      • AutocompleteInput
      • Button
      • ButtonIcon
      • CheckBoxGroup
      • CheckButtonGroup
      • Checkbox
      • CodeEditor
      • ColorMap
      • ColorPicker
      • CrossSelector
      • DataFrame
      • DatePicker
      • DateRangePicker
      • DateRangeSlider
      • DateSlider
      • DatetimeInput
      • DatetimePicker
      • DatetimeRangeInput
      • DatetimeRangePicker
      • DatetimeRangeSlider
      • DatetimeSlider
      • Debugger
      • DiscretePlayer
      • DiscreteSlider
      • EditableFloatSlider
      • EditableIntSlider
      • EditableRangeSlider
      • FileDownload
      • FileDropper
      • FileInput
      • FileSelector
      • FloatInput
      • FloatSlider
      • IntInput
      • IntRangeSlider
      • IntSlider
      • JSONEditor
      • LiteralInput
      • MenuButton
      • MultiChoice
      • MultiSelect
      • NestedSelect
      • PasswordInput
      • Player
      • RadioBoxGroup
      • RadioButtonGroup
      • RangeSlider
      • Select
      • SpeechToText
      • StaticText
      • Switch
      • Tabulator
      • Terminal
      • TextAreaInput
      • TextEditor
      • TextInput
      • TextToSpeech
      • TimePicker
      • Toggle
      • ToggleGroup
      • ToggleIcon
      • VideoStream
    • Layouts
      • Accordion
      • Card
      • Column
      • Divider
      • Feed
      • FlexBox
      • FloatPanel
      • GridBox
      • GridSpec
      • GridStack
      • Modal
      • Row
      • Swipe
      • Tabs
      • WidgetBox
    • Chat
      • ChatAreaInput
      • ChatFeed
      • ChatInterface
      • ChatMessage
      • ChatStep
      • PanelCallbackHandler
    • Global
      • Notifications
    • Indicators
      • BooleanStatus
      • Dial
      • Gauge
      • LinearGauge
      • LoadingSpinner
      • Number
      • Progress
      • TooltipIcon
      • Tqdm
      • Trend
    • Templates
      • Bootstrap
      • EditableTemplate
      • FastGridTemplate
      • FastListTemplate
      • GoldenLayout
      • Material
      • React
      • Slides
      • Vanilla
    • Custom Components
      • AnyWidgetComponent
      • JSComponent
      • PyComponent
      • ReactComponent
      • Viewer
  • How-to
    • Prepare to develop
      • Develop in a notebook
        • Display Output in Notebooks
        • Preview Apps in JupyterLab
        • Publish a Notebook as a Dashboard Using the Layout Builder
        • Develop in other notebook environments
      • Develop in an editor
        • Configure VS Code
        • Configure PyCharm
        • Write apps in Markdown
    • Build apps
      • Construct individual components
        • Construct Panes
        • Access Pane Type
        • Access and Set Widget Values
        • Construct Widgets from Data
        • Add or Remove Components from Panels
      • Styling components
        • Apply a Design
        • Toggling themes
        • Apply CSS
        • Customize a Design
        • Customize Loading Icon
        • Control Visibility
        • Style Altair Plots
        • Style Echarts Plots
        • Style Matplotlib Plots
        • Style Plotly Plots
        • Style Vega Plots
      • Interactivity
        • Add interactivity to a function
        • Add interactivity with generators
        • Add reactivity to components
        • Make interactive data workflows
      • Arranging components
        • Customize Spacing
        • Align Components
        • Control Size
    • Use specialized UIs and APIs
      • Build a sequential UI
        • Create a Pipeline
        • Create a Non-Linear Pipeline
        • Customize Pipeline Layout
        • Control Pipeline Flow
      • Build custom components
        • Combine Existing Components
        • Build a Widget in Python
        • Plot Viewer
        • How to Create Reactive Tables with Panel
        • Compile and Bundle ESM Components
        • ESM component with callback
        • Create Panes using ESM Components
        • Create Custom Widgets using ESM Components
        • Create Custom Layouts using ESM Components
        • Rendering DataFrames using ESM components
        • Build a Custom Canvas Component
        • Build a Custom Leaflet Component
        • Wrapping Material UI components
        • Create Layouts With ReactiveHTML
        • Style your ReactiveHTML template
        • Create Panes with ReactiveHTML
        • Create Indicators With ReactiveHTML
        • ReactiveHTML component with callback
        • Widgets with ReactiveHTML
        • DataFrames and ReactiveHTML
        • Build a Custom Canvas Component
        • Build a Custom Leaflet Component
        • Wrap a Vue component
      • Explicitly link parameters (Callbacks API)
        • Create High-Level Python Links with .link
        • Create Low-Level Python Links Using .watch
        • Link Two Objects in Javascript
        • Link Plot Parameters in Javascript
        • Link Many Objects in Javascript
      • Generate UIs from declared parameters (Declarative API)
        • Generate Widgets from Parameters
        • Declare Custom Widgets
        • Declare parameter dependencies
        • Create nested UIs
    • Manage session tasks
      • Register Session Callbacks
        • Use Asynchronous Callbacks
        • Defer Bound Functions to Improve the User Experience
        • Defer Long Running Tasks to Improve the User Experience
        • Run Tasks at Session Start or End
        • Periodically Run Callbacks
        • Schedule Global Tasks
        • Modify Bokeh Models
        • Add notifications on connect and disconnect
      • Access Session State
        • Access and Manipulate the URL
        • Access HTTP Request State
        • Access Busyness state
    • Extending Panel
      • Create Custom Components
        • Combine Existing Components
        • Build a Widget in Python
        • Plot Viewer
        • How to Create Reactive Tables with Panel
        • Compile and Bundle ESM Components
        • ESM component with callback
        • Create Panes using ESM Components
        • Create Custom Widgets using ESM Components
        • Create Custom Layouts using ESM Components
        • Rendering DataFrames using ESM components
        • Build a Custom Canvas Component
        • Build a Custom Leaflet Component
        • Wrapping Material UI components
        • Create Layouts With ReactiveHTML
        • Style your ReactiveHTML template
        • Create Panes with ReactiveHTML
        • Create Indicators With ReactiveHTML
        • ReactiveHTML component with callback
        • Widgets with ReactiveHTML
        • DataFrames and ReactiveHTML
        • Build a Custom Canvas Component
        • Build a Custom Leaflet Component
        • Wrap a Vue component
    • Test and debug
      • Enable profiling and debugging
        • Enable the admin panel
        • Profile your Application
        • View application logs
      • Set up testing for an application
        • Test functionality and performance
        • Test UI rendering
        • Test operating capacity
    • Prepare to share
      • Apply Templates
        • Set a Template
        • Arrange Components in a Template
        • Toggle Modal
        • Customize Template Theme
        • Build a Custom Template
      • Improve Performance
        • Reuse sessions
        • Enable Throttling
        • Batching Updates with hold
      • Cache Data
        • Manually Cache
        • Automatically Cache
      • Improve Scalability
        • Load balancing
        • Launch multiple processes
        • Enable Automatic Threading
        • Set Up Manual Threading
        • Use Asynchronous Callbacks
        • Run synchronous functions asynchronously
        • Scaling with Dask
      • Best Practices
        • Developer Experience
        • User Experience
      • Add Authentication
        • Configuring Basic Authentication
        • Configuring OAuth
        • Configuring PAM Authentication
        • OAuth Providers
        • Authentication Templates
        • Accessing User information
        • Access Tokens
        • Authorization callbacks
        • Allowing Guest Users
        • Troubleshooting OAuth
    • Share your work
      • Configure the server
        • Launch a server on the command line
        • Launching a server dynamically
        • Serving multiple applications
        • Connect to a remote server via SSH
        • Configuring a reverse proxy
        • Serving static files
        • Add custom endpoints to the Panel Server
      • Integrate with other servers
        • Running Panel apps in FastAPI
        • Embedding a Panel Server in FastAPI
        • Integrating Panel with Flask
        • Running Panel apps inside Django
      • Deploy applications
        • AWS: Amazon Web Services
        • Microsoft Azure
        • MyBinder
        • Google Cloud Platform (GCP)
        • Heroku
        • Hugging Face
        • Ploomber Cloud
        • PyCafe Guide
      • Export apps
        • Embedding state
        • Save App to File
        • Access the Bokeh Model
      • Run panel in WebAssembly
        • Converting Panel applications
        • Using Panel in Pyodide & PyScript
        • Embedding in Sphinx documentation
        • Setting up JupyterLite
    • Migrate to Panel
      • Migrate from Streamlit
        • Serve Apps
        • Display Objects with Panes
        • Layout Objects
        • Accepting User Inputs with Widgets
        • Organize and Style with Templates
        • Show Activity
        • Add Interactivity with pn.bind
        • Improve the performance with Caching
        • Session State
        • Create Chat Interfaces
        • Multi Page Apps
  • App Gallery
    • Altair Brushing
    • Deckgl Game Of Life
    • Gapminders
    • Glaciers
    • Hvplot Explorer
    • Iris Kmeans
    • Nyc Deckgl
    • Penguin Crossfilter
    • Penguin Kmeans
    • Portfolio Analyzer
    • Portfolio Optimizer
    • Streaming Videostream
    • Vtk Interactive
    • Vtk Slicer
    • Vtk Warp
    • Webllm
    • Windturbines
    • Xgboost Classifier
  • API Reference
    • Cheat Sheet
    • Config
    • State
    • panel.auth module
    • panel.chat package
      • panel.chat.feed module
      • panel.chat.icon module
      • panel.chat.input module
      • panel.chat.interface module
      • panel.chat.langchain module
      • panel.chat.message module
      • panel.chat.step module
      • panel.chat.utils module
    • panel.command package
      • panel.command.bundle module
      • panel.command.compile module
      • panel.command.convert module
      • panel.command.oauth_secret module
      • panel.command.serve module
    • panel.compiler module
    • panel.config module
    • panel.custom module
    • panel.depends module
    • panel.io package
      • panel.io.admin module
      • panel.io.application module
      • panel.io.browser module
      • panel.io.cache module
      • panel.io.callbacks module
      • panel.io.compile module
      • panel.io.convert module
      • panel.io.datamodel module
      • panel.io.django module
      • panel.io.document module
      • panel.io.embed module
      • panel.io.fastapi module
      • panel.io.handlers module
      • panel.io.ipywidget module
      • panel.io.jupyter_executor module
      • panel.io.jupyter_server_extension module
      • panel.io.liveness module
      • panel.io.loading module
      • panel.io.location module
      • panel.io.logging module
      • panel.io.mime_render module
      • panel.io.model module
      • panel.io.notebook module
      • panel.io.notifications module
      • panel.io.profile module
      • panel.io.pyodide module
      • panel.io.reload module
      • panel.io.resources module
      • panel.io.rest module
      • panel.io.save module
      • panel.io.server module
      • panel.io.session module
      • panel.io.state module
      • panel.io.threads module
    • panel.layout package
      • panel.layout.accordion module
      • panel.layout.base module
      • panel.layout.card module
      • panel.layout.feed module
      • panel.layout.flex module
      • panel.layout.float module
      • panel.layout.grid module
      • panel.layout.gridstack module
      • panel.layout.modal module
      • panel.layout.spacer module
      • panel.layout.swipe module
      • panel.layout.tabs module
    • panel.links module
    • panel.models package
      • panel.models.ace module
      • panel.models.browser module
      • panel.models.chatarea_input module
      • panel.models.comm_manager module
      • panel.models.datetime_picker module
      • panel.models.datetime_slider module
      • panel.models.deckgl module
      • panel.models.echarts module
      • panel.models.enums module
      • panel.models.esm module
      • panel.models.feed module
      • panel.models.file_dropper module
      • panel.models.icon module
      • panel.models.ipywidget module
      • panel.models.jsoneditor module
      • panel.models.katex module
      • panel.models.layout module
      • panel.models.location module
      • panel.models.markup module
      • panel.models.mathjax module
      • panel.models.modal module
      • panel.models.perspective module
      • panel.models.plotly module
      • panel.models.quill module
      • panel.models.reactive_html module
      • panel.models.speech_to_text module
      • panel.models.state module
      • panel.models.tabs module
      • panel.models.tabulator module
      • panel.models.terminal module
      • panel.models.text_to_speech module
      • panel.models.time_picker module
      • panel.models.trend module
      • panel.models.vega module
      • panel.models.vizzu module
      • panel.models.vtk module
      • panel.models.widgets module
    • panel.pane package
      • panel.pane.vtk package
        • panel.pane.vtk.enums module
        • panel.pane.vtk.synchronizable_deserializer module
        • panel.pane.vtk.synchronizable_serializer module
        • panel.pane.vtk.vtk module
      • panel.pane.alert module
      • panel.pane.base module
      • panel.pane.deckgl module
      • panel.pane.echarts module
      • panel.pane.equation module
      • panel.pane.holoviews module
      • panel.pane.image module
      • panel.pane.ipywidget module
      • panel.pane.markup module
      • panel.pane.media module
      • panel.pane.perspective module
      • panel.pane.placeholder module
      • panel.pane.plot module
      • panel.pane.plotly module
      • panel.pane.streamz module
      • panel.pane.textual module
      • panel.pane.vega module
      • panel.pane.vizzu module
    • panel.param module
    • panel.pipeline module
    • panel.reactive module
    • panel.template package
      • panel.template.bootstrap package
      • panel.template.editable package
      • panel.template.fast package
        • panel.template.fast.grid package
        • panel.template.fast.list package
        • panel.template.fast.base module
      • panel.template.golden package
      • panel.template.material package
      • panel.template.react package
      • panel.template.slides package
      • panel.template.vanilla package
      • panel.template.base module
    • panel.theme package
      • panel.theme.base module
      • panel.theme.bootstrap module
      • panel.theme.fast module
      • panel.theme.material module
      • panel.theme.native module
    • panel.util package
      • panel.util.checks module
      • panel.util.parameters module
      • panel.util.warnings module
    • panel.viewable module
    • panel.widgets package
      • panel.widgets.base module
      • panel.widgets.button module
      • panel.widgets.codeeditor module
      • panel.widgets.debugger module
      • panel.widgets.file_selector module
      • panel.widgets.icon module
      • panel.widgets.indicators module
      • panel.widgets.input module
      • panel.widgets.misc module
      • panel.widgets.player module
      • panel.widgets.select module
      • panel.widgets.slider module
      • panel.widgets.speech_to_text module
      • panel.widgets.tables module
      • panel.widgets.terminal module
      • panel.widgets.text_to_speech module
      • panel.widgets.texteditor module
      • panel.widgets.widget module
  • Community
  • Upgrade Guide
  • FAQ
  • About
    • Releases
    • People
    • Roadmap

FOR DEVELOPERS

  • Developer Guide
    • Extensions
    • WASM
    • Developing custom models
HoloViz.org
  • hvPlot
  • HoloViews
  • GeoViews
  • Datashader
  • Param
  • Lumen
  • Colorcet

  • Examples Gallery
  • Blog
  • How-to
  • Use specialized UIs and APIs
  • Link Parameters with Callbacks API
  • Create Low-Level Python Links Using .watch

Create Low-Level Python Links Using .watch#

This guide addresses how to use the low-level .watch API to trigger callbacks on parameters.

Prerequisites

  1. The How to > Create High-Level Python Links with ‘.link’ guide demonstrates a high-level API to link to parameters, which is adequate in most cases.


If we need more control than what .link provides, we can fall back to the underlying .watch method. The main differences are that .watch:

  1. does not assume you are linking two objects (providing more control over what you are watching)

  2. allows batched callbacks when multiple parameters change at once

  3. allows you to specify that an event should be triggered every time the parameter is set (instead of the default of only when the parameter value actually changes)

To demonstrate .watch, let us set up three different models:

  1. Markdown pane to display the possible options

  2. Markdown pane to display the selected options

  3. ToggleGroup widget that allows us to toggle between a number of options

import panel as pn

pn.extension()

selections = pn.pane.Markdown(object='')
selected = pn.pane.Markdown(object='')
toggle = pn.widgets.ToggleGroup(options=['A', 'B'])

Defining a callback#

Next we define a callback that can handle multiple parameter changes at once and uses the Event’s name to figure out how to process the event. In this case it updates either the selections or the selected pane depending on whether ToggleGroup options or value changed:

def callback(*events):
    print(events)
    for event in events:
        if event.name == 'options':
            selections.object = 'Possible options: %s' % ', '.join(event.new)
        elif event.name == 'value':
            selected.object = 'Selected: %s' % ','.join(event.new)

Event objects#

Before going any further let us discover what these Event objects are. An Event is used to signal the change in a parameter value. Event objects provide a number of useful attributes that provides additional information about the event:

  • name: The name of the parameter that has changed

  • new: The new value of the parameter

  • old: The old value of the parameter before the event was triggered

  • type: The type of event (‘triggered’, ‘changed’, or ‘set’)

  • what: Describes what about the parameter changed (usually the value but other parameter attributes can also change)

  • obj: The Parameterized instance that holds the parameter

  • cls: The Parameterized class that holds the parameter

Registering a watcher#

Now that we know how to define a callback and make use of Event attributes, it is time to register the callback. The obj.param.watch method lets us supply the callback along with the parameters we want to watch. Additionally we can declare whether the events should only be triggered when the parameter value changes, or every time the parameter is set:

watcher = toggle.param.watch(callback, ['options', 'value'], onlychanged=False)

Now let us display the widget alongside the Markdown panes that reflect the current state of the widget:

pn.Row(pn.Column(toggle, width=200, height=50), selections, pn.Spacer(width=50, height=50), selected)

To initialize the selections and selected we can explicitly trigger options and value events:

toggle.param.trigger('options', 'value')
(Event(what='value', name='options', obj=CheckButtonGroup(options=['A', 'B']), cls=CheckButtonGroup(options=['A', 'B']), old=['A', 'B'], new=['A', 'B'], type='triggered'), Event(what='value', name='value', obj=CheckButtonGroup(options=['A', 'B']), cls=CheckButtonGroup(options=['A', 'B']), old=[], new=[], type='triggered'))

We can also override the initial parameters using the update method:

options = ['A','B','C','D']
toggle.param.update(options=dict(zip(options,options)), value=['D'])
(Event(what='value', name='options', obj=CheckButtonGroup(options={'A': 'A', 'B': 'B', ...}, value=['D']), cls=CheckButtonGroup(options={'A': 'A', 'B': 'B', ...}, value=['D']), old=['A', 'B'], new={'A': 'A', 'B': 'B', 'C': 'C', 'D': 'D'}, type='set'), Event(what='value', name='value', obj=CheckButtonGroup(options={'A': 'A', 'B': 'B', ...}, value=['D']), cls=CheckButtonGroup(options={'A': 'A', 'B': 'B', ...}, value=['D']), old=[], new=['D'], type='set'))
<param.parameterized._ParametersRestorer object at 0x11024f610>

Using update allows us to batch two separate changes (the options and the value) together, which you can see from the print output resulted into a single invocation of the callback. You could instead have set them separately using the usual parameter-setting syntax toggle.value=['D']; toggle.options=dict(zip(options,options)), but batching them can be much more efficient for a non-trivial callback like a database query or a complex plot that needs updating.

Now that the widgets are visible, you can toggle the option values and see the selected pane update in response via the callback (if Python is running).

Unlinking#

If for whatever reason we want to stop watching parameter changes we can unsubscribe by passing our watcher (returned in the watch call above) to the unwatch method:

toggle.param.unwatch(watcher)

Related Resources#

  • See the Explanation > APIs for context on this and other Panel APIs

previous

Create High-Level Python Links with .link

next

Link Two Objects in Javascript

Support us with a star on GitHub
On this page
  • Defining a callback
  • Event objects
  • Registering a watcher
  • Unlinking
  • Related Resources

© Copyright 2019-2025 Holoviz contributors.

Created using Sphinx 8.2.3.

Built with the PyData Sphinx Theme 0.16.1.