How to use 'html.ObjectEl' in callbacks

Dear Team,

I am using html.ObjectEl to embedded external .html file based on dropdown values. I have tried different ways. Nothing is working for me. Any help is appreciated. Below is one example. Another one is using html.ObjectEl in layout instead of callback

Layout:

app.layout = dbc.Container([
    dbc.Row(id='row1',
            children=[
                dbc.Col([
                    html.Label('Select Year'),
                    dcc.Dropdown(id="year",
                                 options=[{'label': y, 'value': y} for y in ['2020 & 2021', 2020, 2021]],
                                 multi=False,
                                 value='2020 & 2021',
                                 style={'width': "100%"}
                                 )],
                    xs=12, sm=12, md=12, lg=12, xl=12)]),
    dbc.Row(id='pyLDAviz',
            children=[
                html.H3('Topics'),
                dbc.Col(id='pyLDA',
                        xs=12, sm=12, md=12, lg=12, xl=12),
            ],
            ),
],
    fluid=True)

Callback:

@app.callback(
    Output(component_id='pyLDA', component_property='children'),
    [Input(component_id='year', component_property='value')]
)
def update_pylda_graph(topics_slct_year):
    data = 'assets/temp.html'

    if topics_slct_year == '2020 & 2021':
        data = 'assets/pyLDA_2020_2021.html'
    if topics_slct_year == 2020:
        data = 'assets/pyLDA_2020.html'
    if topics_slct_year == 2021:
        data = 'assets/pyLDA_2021.html'

    pylda_graph = html.ObjectEl(
        # To my recollection you need to put your static files in the 'assets' folder
        data=data,
        type="application/pdf",
        style={"width": "80vw", "height": "100vh"},
    )
    return pylda_graph

without a callback, it is working for me

    dbc.Row(id='pyLDAviz',
            children=[
                dbc.Col([
                    html.H3('Topics'),
                    html.ObjectEl(
                        data='assets/pyLDA_2020_2021.html',
                        type="application/pdf",
                        style={"width": "80vw", "height": "100vh"},
                    )],
                    xs=12, sm=12, md=12, lg=12, xl=12)])

Hi @vijaya

As you mentioned in the data # comments, the file should be in the assets folder, then the data must start with assets/ and the name of the file. :thinking:

Thank you for the response. I have data files in the assets folder. I edited the file path to post here.

I will update now so that it will not create a distraction from the problem.

Hey @vijaya

I used your code adding a file.html in the assets folder and this line:

    if topics_slct_year == '2020 & 2021':
        data = 'assets/file.html'

And it reproduce the html file as expected :grinning:

Sad that it is still not working for me. :disappointed_relieved:
No errors in the python terminal/console and web console.

Hello @Eduardo,

I have tried with pathlib.Path() to get the path. Something is coming to UI, which is repeating the same screen again and again.

UI after using pathlib.Path() to get the path.

Html files are working well, and they have valid content. Any idea on what might be the issue?
No errors in the python terminal/console and web console.

Sorry, I can’t help on this issue :woozy_face:

No worries :slightly_smiling_face:. Thank you for your quick response.
I will try other options.

1 Like