I’ve been trying to build this dashboard template but it doesn’t run properly and I keep getting the “Error loading layout” page with this code block, tried some fixes including updating packages but doesn’t seem to work. Any ideas how I could solve this?
have looked through the forum so far but have not had any luck in solving it.
import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
# Initialize the Dash app with a dark theme
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])
# Define the sidebar navigation
sidebar = dbc.Nav(
[
dbc.NavLink("Issuance", href="/issuance", id="issuance-link", className="nav-link-custom"),
dbc.NavLink("Issuance Trends", href="/issuance-trends", id="issuance-trends-link", className="nav-link-custom"),
],
vertical=True,
pills=True,
style={"margin-top": "20px"}
)
# Define the top left header with logo and title
header = dbc.Row(
[
dbc.Col(html.Img(src='https://example.com/logo.png', height="50px"), width="auto"),
dbc.Col(html.H2("Issuances Portal [Rates Trading]"), className="align-self-center", style={"margin-left": "10px"})
],
align="center",
style={"margin-bottom": "20px"}
)
# Define the app layout
app.layout = dbc.Container([
dcc.Location(id='url', refresh=False),
dbc.Row([
dbc.Col([
header,
sidebar
], width=3, style={"background-color": "#343a40", "padding": "20px", "border-radius": "5px"}),
dbc.Col([
html.Div(id='page-content')
], width=9)
])
], fluid=True, style={"background-color": "#2c2f33", "padding": "20px"})
# Callback to update the page content based on the URL
@app.callback(
dash.dependencies.Output('page-content', 'children'),
[dash.dependencies.Input('url', 'pathname')]
)
def display_page(pathname):
if pathname == '/issuance':
return html.Div([
html.H3('Issuance Page', style={"color": "white"}),
html.P('Content for the Issuance page.', style={"color": "white"})
])
elif pathname == '/issuance-trends':
return html.Div([
html.H3('Issuance Trends Page', style={"color": "white"}),
html.P('Content for the Issuance Trends page.', style={"color": "white"})
])
else:
return html.Div([
html.H3('Welcome to the Issuances Portal', style={"color": "white"}),
html.P('Use the sidebar to navigate to different pages.', style={"color": "white"})
])
# Custom CSS for navigation links
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
<style>
.nav-link-custom {
color: #adb5bd !important;
padding: 10px;
border-radius: 5px;
}
.nav-link-custom:hover {
background-color: #495057 !important;
color: white !important;
}
.nav-link-custom.active {
background-color: #495057 !important;
color: white !important;
}
</style>
</head>
<body>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
</body>
</html>
'''
# Run the app
if __name__ == '__main__':
app.run_server(debug=True)
New contributor
Sherman Wong is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.