How to add dbc.Tabs to Dash: Multi-Page App with Pages?

Dash Python
1

Hello, thank you for this opportunity to ask questions.

I’m using tabs inside of Plotly Dash application like given below, and it works fine.

import dash
from dash import Dash, dash_table, dcc, html, Input, Output, callback, State
import plotly.express as px
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.graph_objs as go
import plotly.express as px



tabs = html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(label="Tab 1", tab_id="tab-1"),
                dbc.Tab(label="Tab 2", tab_id="tab-2"),
            ],
            id="tabs",
            active_tab="tab-1",
        ),
        html.Div(id="content"),
    ]
)
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.title = "Financial Report"
server = app.server


app.layout = html.Div(
dbc.Row([
   tabs])
)


@app.callback(Output("content", "children"), [Input("tabs", "active_tab")])

def ind2(value):


    purchase = {'date': ['11/03/2021', '12/03/2021', '14/03/2021', '11/03/2021'],
                'price': [300, 400, 200, 200],
                'currency': ['eur', 'usd', 'usd', 'usd'],
                'qty': [200, 300, 400, 500],
                'salesman': ['AC', 'BC', "CC", 'DC']}
    pur = pd.DataFrame(purchase)


    fig2 = go.Figure()

    for i in pur['currency'].unique():
        fig2.add_trace(go.Bar(x=pur['date'], y=pur[pur['currency'] == i]['qty'], name=i))
    fig2.update_layout(barmode="group")
    if value=='tab-2':
        return dbc.Row(
                    [
                        dbc.Col(dcc.Graph(id='bargraph',
                             figure=fig2)),
                        ]
            )
    else:
        return html.P("Welcome...")



if __name__ == "__main__":
    app.run_server(debug=True)

But when I’m trying to add this code to the Dash Page which has mutlti pages it doesn’t return anything, tabs seem to be inactive.

image
image855×221 31.7 KB

(Multi-Page Apps and URL Support | Dash for Python Documentation | Plotly)

to summarize, I want this page as in picture below. but not only side bar working but tabs inside of the page also.

image
image1410×266 66.2 KB

2

hi @drongo007
Adding tabs to Pages should be similar to most multipage apps built with Pages. For more examples, see Ann’s Multi-page app demos.

Just take the page you already built with the tabs and modify it slightly, as you incorporate it as a page within the pages folder. You would need to adjust app.layout to layout and @app.callback to callback

3

thank you very much, Adam! your advice helped me indeed changing @app.callback to @callback solved the problem. Also, I want to thank you for an amazing book that I’m enjoying reading (actually I started it much before when early access was available)! And of course for great channel on youtube!

3 Likes