I am creating a multi page Dash App. I tried to use html and css as it in inside the dash file like shown in this article https://towardsdatascience.com/how-to-build-a-complex-reporting-dashboard-using-dash-and-plotl-4f4257c18a7f
Here is my app.py file
import dash
import dash_renderer
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, url_base_pathname='/analytical_dashboard/')
server = app.server
app.config.suppress_callback_exceptions = True
index_string = ""
And here is my index.py
# -*- coding: utf-8 -*-
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
# see https://community.plot.ly/t/nolayoutexception-on-deployment-of-multi-page-dash-app-example-code/12463/2?u=dcomfort
from app import server
from app import app
import dash_renderer
import layouts
import callbacks
# see https://dash.plot.ly/external-resources to alter header, footer and favicon
app.index_string = '''
<!DOCTYPE html>
<html lang="en">
<head>
{%metas%}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Analytical Dashboard
</title>
{%css%}
<link rel="ad icon" href="https://th.bing.com/th/id/R54834c49f801e088a0025aa14cbe7273?rik=46RqsjmhOPL07g&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_233159.png&ehk=%2b5fqaAKJrzuPFrAbhOf48hUhA0T4Ljwsq10Dzc3E13w%3d&risl=&pid=ImgRaw" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body style="background-color:#202A44;">
{%app_entry%}
<footer>
{%config%}
{%scripts%}
</footer>
<!-- SIDEBAR -->
<div class="sidebar">
<div class="sidebar-logo">
<img src="https://lh3.googleusercontent.com/wbAtqQNAh-ITzDVKWx5Ad09p3xHVndfQHc08j47kOJ0XO6Gq6zxc9hm4QQNczCsL29QTiWD8dKh6PJI-hT-gCnrAet-KX85y6wCSAaamM8LxE5S1wZ5y7uK4Or8JYVss0g=w1280" alt="Company logo">
<div class="sidebar-close" id="sidebar-close">
<i class='bx bx-left-arrow-alt'></i>
</div>
</div>
<div class="sidebar-user">
<div class="sidebar-user-info">
<img src="https://img.icons8.com/android/48/000000/user.png" alt="User picture" class="profile-image">
</div>
<button class="btn btn-outline">
<i class='bx bx-log-out bx-flip-horizontal'></i>
</button>
</div>
<!-- SIDEBAR MENU -->
<ul class="sidebar-menu">
<li>
<a href="#" class="active">
<i class='bx bx-home'></i>
<span><img src="https://img.icons8.com/small/32/000000/dashboard.png" alt="dash-home" class="home-icon">
dashboard-home
</span>
</a>
</li>
<li class="sidebar-submenu">
<a href="#" class="sidebar-menu-dropdown">
<i class='bx bx-user-circle'></i>
<span>
<img src="https://img.icons8.com/metro/26/000000/guest-male.png"/>
account</span>
<div class="dropdown-icon"></div>
</a>
<ul class="sidebar-menu sidebar-menu-dropdown-content">
<li>
<a href="#">
<img src="https://img.icons8.com/android/24/000000/edit.png"/>
edit profile
</a>
</li>
<li>
<a href="#">
<img src="https://img.icons8.com/windows/32/000000/gear.png"/>
account settings
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-shopping-bag'></i>
<span>
<img src="https://img.icons8.com/plumpy/24/000000/gender-neutral-user.png"/>
customer</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-chart'></i>
<span>
<img src="https://img.icons8.com/material-outlined/24/000000/total-sales-1.png"/>
sales</span>
</a>
</li>
<li class="sidebar-submenu">
<a href="#" class="sidebar-menu-dropdown">
<i class='bx bx-category'></i>
<span>
<img src="https://img.icons8.com/material-sharp/24/000000/feedback.png"/>
feedback</span>
<div class="dropdown-icon"></div>
</a>
<ul class="sidebar-menu sidebar-menu-dropdown-content">
</ul>
</li>
<li class="sidebar-submenu">
<a href="#" class="sidebar-menu-dropdown">
<i class='bx bx-category'></i>
<span>
<img src="https://img.icons8.com/metro/26/000000/process.png"/>
process</span>
<div class="dropdown-icon"></div>
</a>
<ul class="sidebar-menu sidebar-menu-dropdown-content">
<li>
<a href="#">
<img src="https://img.icons8.com/metro/26/000000/compass.png"/>
process monitoring
</a>
</li>
<li>
<a href="#">
<img src="https://img.icons8.com/windows/32/000000/product.png"/>
product
</a>
</li>
<li>
<a href="#">
<img src="https://img.icons8.com/metro/26/000000/product.png"/>
top products
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class='bx bx-mail-send'></i>
<span>
<img src="https://img.icons8.com/material-outlined/24/000000/mail.png"/>
mail</span>
</a>
</li>
<li>
<a href="#">
<i class='bx bx-chat'></i>
<span>
<img src="https://img.icons8.com/metro/26/000000/chat.png"/>
chat</span>
</a>
</li>
<li class="sidebar-submenu">
<a href="#" class="sidebar-menu-dropdown">
<i class='bx bx-cog'></i>
<span>
<img src="https://img.icons8.com/material-sharp/24/000000/settings.png"/>
settings</span>
<div class="dropdown-icon"></div>
</a>
</li>
</ul>
<!-- END SIDEBAR MENU -->
</div>
<!-- END SIDEBAR -->
</body>
</html>
'''
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
# Update page
# # # # # # # # #
def display_page(pathname):
if pathname == '/analytical_dashboard-chef@home/':
return app.index_string
else:
return noPage
# # # # # # # # #
external_css = ["https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
"//fonts.googleapis.com/css?family=Raleway:400,300,600",
"https://codepen.io/bcd/pen/KQrXdb.css",
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
"https://codepen.io/dmcomfort/pen/JzdzEZ.css"]
for css in external_css:
app.css.append_css({"external_url": css})
external_js = ["https://code.jquery.com/jquery-3.2.1.min.js",
"https://codepen.io/bcd/pen/YaXojL.js"]
for js in external_js:
app.scripts.append_script({"external_url": js})
if __name__ == '__main__':
app.run_server(debug=True)
When I run this Iām seeing this exception:
Can you help me tell what element should I add to dissolve this exception?