How to add 3rp party javascript(TreeGrid) in Dash app?

Dash Python
1

Hi friends,

I’ve downloaded a 3rd party javascript code from TreeGrid,
and try to create a TreeGrid in Dash by following document. However, it ran into error as I just import local javascript by external_scripts. I’m wondering if this is the right way to use 3rd party javascript in Dash, and how can I fix this issue?

package structure:
./app.py
./assets/Grid/GridE.js
./assets/Grid/OtherLib

app.py

external_scripts = ['./assets/Grid/GridED.js']
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, 
                external_scripts=external_scripts,
                external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Dash PoC')
])

if __name__ == '__main__':                                                                                                  
    app.run_server(host="0.0.0.0", debug=True)

error msg:
[0] : Cannot load TreeGrid source data
[1] : No tag found in XML data from Layout_Url=‘PivotTableDef.xml’
[1] : AJAX for Layout_Url=‘PivotTableDef.xml’, XML:
Loading…
[1] : Cannot load TreeGrid source data
[2] : No tag found in XML data from Layout_Url=‘EshopDef.xml’
[2] : AJAX for Layout_Url=‘EshopDef.xml’, XML:
Loading…
[2] : Cannot load TreeGrid source data
[3] : No tag found in XML data from Layout_Url=‘PivotTableDef.xml’
[3] : AJAX for Layout_Url=‘PivotTableDef.xml’, XML:
Loading…
[3] : Cannot load TreeGrid source data

2

I believe the proper solution would be to create a custom component,

Build Your Own Components | Dash for Python Documentation | Plotly

1 Like