Skip to main content
Ctrl+K
Logo image

Site Navigation

  • Getting Started
  • How-to
  • Explanation
  • Component Gallery
  • App Gallery
  • API Reference
  • Upgrade Guide
  • FAQ
  • About
  • Developer Guide

Site Navigation

  • Getting Started
  • How-to
  • Explanation
  • Component Gallery
  • App Gallery
  • API Reference
  • Upgrade Guide
  • FAQ
  • About
  • Developer Guide

FOR USERS

  • Getting Started
    • Installation
    • Build an app
    • Core Concepts
  • How-to
    • Prepare to develop
      • Develop in a notebook
        • Display Output in Notebooks
        • Develop in other notebook environments
      • Develop in an editor
        • Develop Apps in an Editor
        • Write apps in Markdown
    • Build apps
      • Construct individual components
        • Construct Panes
        • Access Pane Type
        • Access and Set Widget Values
        • Add or Remove Components from Panels
      • Styling components
        • Apply a Design
        • Toggling themes
        • Apply CSS
        • Customize Loading Icon
        • Control Visibility
      • Interactivity
        • Add interactivity to a function
        • 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
        • Customize Pipeline Layout
        • Control Pipeline Flow
      • Build custom components
        • Combine Existing Components
        • Build Components from Scratch
      • 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 Callbacks Until Load
        • Run Tasks at Session Start or End
        • Periodically Run Callbacks
        • Schedule Global Tasks
        • Modify Bokeh Models
      • Access Session State
        • Access and Manipulate the URL
        • Access HTTP Request State
        • Access Busyness state
    • 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
      • Cache Data
        • Manually Cache
        • Automatically Cache
      • Improve Scalability
        • Load balancing
        • Launch multiple processes
        • Enable Automatic Threading
        • Use Asynchronous Processing
      • Add Authentication
        • Configuring Basic Authentication
        • Configuring OAuth
        • OAuth Providers
        • Accessing User information
    • Share your work
      • Configure the server
        • Launching a server on the commandline
        • Launching a server dynamically
        • Serving multiple applications
        • Connect to a remote server via SSH
        • Configuring a reverse proxy
        • Serving static files
      • Integrate with other servers
        • Integrating Panel with Flask
        • Integrating Panel with FastAPI
        • Running Panel apps inside Django
      • Deploy applications
        • Microsoft Azure
        • MyBinder
        • Google Cloud Platform (GCP)
        • Heroku
        • Hugging Face
      • 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
  • Explanation
    • APIs
      • API context
        • Reactive API
        • Declarative API
        • Callbacks
    • Components
      • Components overview
      • Custom components
    • Linking
      • Panel and JS communications
    • Styling
      • Templates
    • 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
      • Plotly
      • Reacton
      • SVG
      • Str
      • Streamz
      • VTK
      • VTKJS
      • VTKVolume
      • Vega
      • Video
      • Vizzu
    • Layouts
      • Accordion
      • Card
      • Column
      • Divider
      • FlexBox
      • FloatPanel
      • GridBox
      • GridSpec
      • GridStack
      • Row
      • Swipe
      • Tabs
      • WidgetBox
    • Templates
      • Bootstrap
      • FastGridTemplate
      • FastListTemplate
      • GoldenLayout
      • Material
      • React
      • Slides
      • Vanilla
    • Global
      • Notifications
    • Indicators
      • BooleanStatus
      • Dial
      • Gauge
      • LinearGauge
      • LoadingSpinner
      • Number
      • Progress
      • Tqdm
      • Trend
    • Widgets
      • ArrayInput
      • AutocompleteInput
      • Button
      • CheckBoxGroup
      • CheckButtonGroup
      • Checkbox
      • CodeEditor
      • ColorPicker
      • CrossSelector
      • DataFrame
      • DatePicker
      • DateRangeSlider
      • DateSlider
      • DatetimeInput
      • DatetimePicker
      • DatetimeRangeInput
      • DatetimeRangePicker
      • DatetimeRangeSlider
      • Debugger
      • DiscretePlayer
      • DiscreteSlider
      • EditableFloatSlider
      • EditableIntSlider
      • EditableRangeSlider
      • FileDownload
      • FileInput
      • FileSelector
      • FloatInput
      • FloatSlider
      • IntInput
      • IntRangeSlider
      • IntSlider
      • JSONEditor
      • LiteralInput
      • MenuButton
      • MultiChoice
      • MultiSelect
      • PasswordInput
      • Player
      • RadioBoxGroup
      • RadioButtonGroup
      • RangeSlider
      • Select
      • SpeechToText
      • StaticText
      • Switch
      • Tabulator
      • Terminal
      • TextAreaInput
      • TextEditor
      • TextInput
      • TextToSpeech
      • Toggle
      • ToggleGroup
      • VideoStream
  • App Gallery
    • Portfolio Optimizer
    • Streaming Videostream
    • Windturbines
    • Portfolio Analyzer
    • Glaciers
    • Vtk Slicer
    • Nyc Deckgl
    • Gapminders
    • Vtk Interactive
    • Penguin Crossfilter
    • Deckgl Game Of Life
    • Hvplot Explorer
    • Xgboost Classifier
    • Altair Brushing
    • Vtk Warp
    • Iris Kmeans
    • Penguin Kmeans
  • API Reference
    • Cheat Sheet
    • Config
    • State
    • panel.io Package
    • panel.layout Package
    • panel.pane Package
      • panel.vtk Package
    • param Module
    • pipeline Module
    • panel.template Package
      • panel.bootstrap Package
      • panel.fast Package
        • panel.grid Package
        • panel.list Package
      • panel.golden Package
      • panel.material Package
      • panel.react Package
      • panel.slides Package
      • panel.vanilla Package
    • panel.util Package
    • viewable Module
    • panel.widgets Package
  • Upgrade Guide
  • FAQ
  • About
    • Releases

FOR DEVELOPERS

  • Developer Guide
    • Testing
  • How-to
  • Link Parameters with Callbacks API
  • Link Many Objects in Javascript

Link Many Objects in Javascript#

This guide addresses how to write arbitrary JS callbacks linking one or more components.

Prerequisites

  1. The How to > Link Two Objects in Javascript guide demonstrates how to use the .jslink API to link parameters from two objects in Javascript, which is adequate in most cases.


Sometimes defining a simple link between two objects is not sufficient, e.g. when there are a number of objects involved. In these cases it is helpful to be able to define arbitrary Javascript callbacks. A very simple example is a very basic calculator which allows multiplying or adding two values, in this case we have two widgets to input numbers, a selector to pick the operation, a display for the result and a button.

To implement this we define a jscallback, which is triggered when the Button.clicks property changes and provide a number of args allowing us to access the values of the various widgets:

import panel as pn

pn.extension()

value1 =   pn.widgets.Spinner(value=0, width=75)
operator = pn.widgets.Select(value='*', options=['*', '+'], width=50, align='center')
value2 =   pn.widgets.Spinner(value=0, width=75)
button =   pn.widgets.Button(name='=', width=50)
result =   pn.widgets.StaticText(value='0', width=50, align='center')

button.jscallback(clicks="""
if (op.value == '*')
  result.text = (v1.value * v2.value).toString()
else
  result.text = (v1.value + v2.value).toString()
""", args={'op': operator, 'result': result, 'v1': value1, 'v2': value2})

pn.Row(value1, operator, value2, button, result)

Related Resources#

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

previous

Link Plot Parameters in Javascript

next

Declare UIs with Declarative API

Support Panel with a star on GitHub
On this page
  • Related Resources

© Copyright 2019-2023 Holoviz contributors.

Created using Sphinx 5.3.0.

Built with the PyData Sphinx Theme 0.13.3.