Set HTML markup in JS Callbacks

Panel
1

The below snippets allows me to set text of the HTML panel but not rich HTML. What property of result_pn will allow me to do this?

btn = pn.widgets.Button(name="Check status")
result_pn = pn.pane.HTML()

btn.jscallback(clicks="""
function myService() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(`Result available at ${new Date()}`))
  })
}

myService().then(r => {
  result_pn.text = `<strong>${r}</strong>`
}).catch(e => {
  result_pn.text = "Failed to fetch status! Check browser console for more details"
  console.error(e)
})
""", args={"result_pn": result_pn})

result_pn.text = `<strong>${r}</strong> above does not render the result in bold.

Created a colab to quickly reproduce this, Google Colab

2

@Marc any ideas here? Is this even possible today?

3

Is this the ` valid to create a string?

Also pn.widgets.StaticText accepts HTML.

3 Likes
4

pn.widgets.StaticText accepts HTML and solves my problem. Tested it in the above colab notebook. Thanks again @ahuang11

2 Likes
5

Glad that worked!