Hi there !
I need your help !
I am working on a multi page app and I would like to open a link from page 1 in a new tab : layout_page_ext would be opened in a new tab.
import dash
from dash import Dash, dash_table
from dash.exceptions import PreventUpdate
import plotly.graph_objects as go
import pandas as pd
import plotly.express as px
import numpy as np
import dash_bootstrap_components as dbc
from dash import Dash, dcc, html, Input, Output, State, MATCH, ALL
app = Dash(__name__)
# SIDEBAR
SIDEBAR_STYLE = {
"position": "fixed",
"top": 0,
"left": 0,
"bottom": 0,
"width": "16rem",
"padding": "2rem 1rem",
"color": "#FFE000",
"background-color": "#000000",
}
CONTENT_STYLE = {
"margin-left": "18rem",
"margin-right": "2rem",
"padding": "2rem 1rem",
}
sidebar = html.Div(
[
html.H2("Sidebar", className="display-4"),
html.Hr(),
html.P(
"Navigation entre les pages", className="lead"
),
dbc.Nav(
[
dbc.NavLink("Home", href="home", active="exact", style={"color": "#FCFCF7"}),
html.Br(),
dbc.NavLink("Page1", href="page1", active="exact", style={"color": "#FCFCF7"}),
html.Br(),
dbc.NavLink("Page2", href="page2", active="exact", style={"color": "#FCFCF7"}),
],
vertical=True,
pills=True,
),
],
style=SIDEBAR_STYLE,
)
# URL SIDEBAR
url_bar_and_content_div = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='root-url', style={'display': 'none'}),
html.Div(id='first-loading', style={'display': 'none'}),
html.Div(id='page-content')
])
layout_page1 = html.Div([
html.Br(),
dbc.Row(
dbc.Col(html.H1("Table 1", style={"color": "#FFE000"}),
width={'size': 6, 'offset': 5}
),
),
html.Br(),
dbc.Row(dbc.Col(
dbc.NavItem(dbc.NavLink("Link Text",
href="page-ext",
target="_blank",
external_link=True
)
)
)
)
])
layout_page2 = html.Div([
dbc.Row(
dbc.Col(html.H1("Table 2", style={"color": "#FFE000"}),
width={'size': 6, 'offset': 5}
),
),
])
layout_page_ext = html.Div([
dbc.Row(
dbc.Col(html.H1("Lien externe", style={"color": "#FFE000"}),
width={'size': 6, 'offset': 5}
),
),
])
app.layout = html.Div([url_bar_and_content_div, sidebar])
app.validation_layout = html.Div([
url_bar_and_content_div,
sidebar,
layout_page1,
layout_page2,
layout_page_ext
])
# SIDEBAR CALLBACKS
# The following callback is used to dynamically instantiate the root-url
@app.callback([dash.dependencies.Output('root-url', 'children'),
dash.dependencies.Output('first-loading', 'children')],
dash.dependencies.Input('url', 'pathname'),
dash.dependencies.State('first-loading', 'children')
)
def update_root_url(pathname, first_loading):
if first_loading is None:
return (pathname, True)
else:
raise PreventUpdate
# This is the callback doing the routing
@app.callback(dash.dependencies.Output('page-content', 'children'),
[
dash.dependencies.Input('root-url', 'children'),
dash.dependencies.Input('url', 'pathname'),
])
def render_page_content(root_url, pathname):
if root_url + "home" == pathname:
return html.P(layout_page_ext)
elif root_url + "page1" == pathname:
return html.P(layout_page1)
elif root_url + "page2" == pathname:
return html.P(layout_page2)
elif root_url + "page-ext" == pathname:
return html.P(layout_page_ext)
else:
return html.P(layout_page1)
if __name__ == '__main__':
app.run_server(debug=True)
I have set the link in page 1 :
dbc.Row(dbc.Col(
dbc.NavItem(dbc.NavLink("Link Text",
href="page-ext",
target="_blank",
external_link=True
)
)
)
)
But that link opens a new page which only contains the sidebar (the initial app.layout) and not the loayput_page_ext. I think that the first loading prevent the opening of the layout_page_ext as it opens in a new tab (so the first loading would be None).
Could you help me ??
Thank you very much in advance !!
