Custom Bootstrap Template

[Gold]

Hello,

I’ve started using bokeh in recent days and going through the process of wiring all the components to a bootstrap template. For that Ive been using this example https://github.com/bokeh/bokeh/tree/branch-3.0/examples/app/dash

Everything looks to be running fine on the main.py but cant get the embed to work… Any help?

Basically,

main.py
curdoc().add_root(region)

index.html
{{ embed(roots.region) }}

This creates the page but returns the following error

ValueError: “root with ‘%s’ name not found” % key

I’m struggling to understand why. Please help.

[Gold]

They all work if I use…

{% for root in doc.roots %}
{{ embed(root) | indent(10) }}
{% endfor %}

however I wanted to access them individually.

[Bryan]

Are you setting the name property of the figure, as the example does?

region = figure(..., name="region")

That is what corresponds to the name available in the template, not the Python variable name.

[Gold]

In this case it’s a date Picker and select.

Can we set the name into a div and call it from the the template file by setting roots.div_name?

[Bryan]

You can set a name property value on any Bokeh model.

[Gold]

Been trying to understand why is it behaving like this and can’t really understand.

When there’s no data to be load I’m calling
self.doc.add_root(Div(text=“This_test”, name=“Test”))

Then, using a “select box” that calls a function I get the proper data to embed into the html page.

I call the self.doc.add_root(Div(text=“Update Data”, name=“Test”)) and instead of updating the div, it throws a new one at the bottom of the page.

Also managed to add a custom data-root-id into the desired DIV. Is there a way to throw the text inside that?

any help?