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 Two Objects in Javascript

Link Two Objects in Javascript#

This guide addresses how to link parameters of two objects in Javascript.


Linking objects in Python is often very convenient because it allows writing code entirely in Python. However, it also requires a live Python kernel. If instead we want a static example (e.g. on a simple website or in an email) to have custom interactivity, or we simply want to avoid the overhead of having to call back into Python, we can define links in JavaScript.

Link model properties#

Let us start by linking the value of the TextInput widget to the object property of a Markdown pane:

import panel as pn

pn.extension()

markdown = pn.pane.Markdown('Markdown display')
text_input = pn.widgets.TextInput(value=markdown.object)

link = text_input.jslink(markdown, value='object')

pn.Row(text_input, markdown)

As you can see, Panel translates the specification into a JS code snippet which syncs the properties on the underlying Bokeh properties. But now if you edit the widget and press Return, the Markdown display will automatically update even in a static HTML web page.

Link bi-directionally#

When you want the source and target to be linked bi-directionally, i.e. a change in one will automatically trigger a change in the other you can simply set the bidirectional argument:

t1 = pn.widgets.TextInput()
t2 = pn.widgets.TextInput()

t1.jslink(t2, value='value', bidirectional=True)

pn.Row(t1, t2)

Link using custom JS code#

Since everything happens in JS for a jslink, we can’t provide a Python callback. Instead, we can define a JS code snippet, which is executed when a property changes. E.g. we can define a little code snippet which adds HTML bold tags (<b>) around the text before setting it on the target. The code argument should map from the parameter/property on the source object to the JS code snippet to execute:

markdown = pn.pane.Markdown("<b>Markdown display</b>", width=400)
text_input = pn.widgets.TextInput(value="Markdown display")

code = '''
    target.text = '<b>' + source.value + '</b>'
'''
link = text_input.jslink(markdown, code={'value': code})

pn.Row(text_input, markdown)

Here source and target are made available in the JavaScript namespace, allowing us to arbitrarily modify the models in response to property change events. Note however that the underlying Bokeh model property names may differ slightly from the naming of the parameters on Panel objects, e.g. the ‘object’ parameter on the Markdown pane translates to the ‘text’ property on the Bokeh model used to render the Markdown.

Of course, you can still update the value from Python, and it will automatically update the linked markdown:

text_input.value = "Markdown display"

Responding to click events#

To respond to click events, we’ll demonstrate an example of using js_on_click. This example will open a URL from the TextInput widget value in a new browser tab:

button = pn.widgets.Button(name='Open URL', button_type = 'primary')
url = pn.widgets.TextInput(name='URL', value = 'https://holoviz.org/')
button.js_on_click(args={'target': url}, code='window.open(target.value)')
pn.Row(url, button)

Related Resources#

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

  • The How to > Link Plot Parameters in Javascript guide addresses how to link Bokeh and HoloViews plot parameters in Javascript.

previous

Create Low-Level Python Links Using .watch

next

Link Plot Parameters in Javascript

Support Panel with a star on GitHub
On this page
  • Link model properties
  • Link bi-directionally
  • Link using custom JS code
  • Responding to click events
  • Related Resources

© Copyright 2019-2023 Holoviz contributors.

Created using Sphinx 5.3.0.

Built with the PyData Sphinx Theme 0.13.3.