# Tabs in multiple files with callbacks

**URL:** <https://community.plotly.com/t/tabs-in-multiple-files-with-callbacks/15330>\
**Category:** Dash Python\
**Created:** [November 5, 2018, 10:17pm UTC](https://community.plotly.com/t/tabs-in-multiple-files-with-callbacks/15330 "2018-11-05T22:17:32Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![elfer](https://avatars.discourse-cdn.com/v4/letter/e/c5a1d2/32.png) [@elfer](https://community.plotly.com/u/elfer)\
**Post date:** [November 5, 2018, 10:17pm UTC](https://community.plotly.com/t/tabs-in-multiple-files-with-callbacks/15330/1 "2018-11-05T22:17:32Z")

</div>

I’m trying to implement a dashboard with tabs and within the tabs there are some controls for the graphs. If I place everything within one file the elements call the right callback function within the tab. However, when they are in different files the callback function is no longer called.

Is there a way to organize the files so the callbacks are assigned to the right elements?

The directory structure is:  
tabs.py  
/test  
- **init**.py  
-layout.py

The files Im using are:  
**tabs.py**

```
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

from test import layout

app = dash.Dash()
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div([
    html.H1('Dash Tabs component demo'),
    dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
        dcc.Tab(label='Tab One', value='tab-1-example'),
        dcc.Tab(label='Tab Two', value='tab-2-example'),
    ]),
    html.Div(id='tabs-content-example')
])

@app.callback(Output('tabs-content-example', 'children'),
              [Input('tabs-example', 'value')])
def render_content(tab):
    if tab == 'tab-1-example':
        return layout.layout
    elif tab == 'tab-2-example':
        return "Tab 2"

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

```

**layout.py**

```
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

from tabs import app

layout = html.Div([
            html.H3('Tab content 1'),
            dcc.Dropdown(
                id='range-drop',
                options=[{'label':i, 'value':i} for i in range(2,10)],
                value=2),
            dcc.Dropdown(
                id='value-drop',
                options=[{'label':i, 'value':i} for i in range(2,10)],
                value=2),
            dcc.Graph(id='graph-1-tabs')
        ])

@app.callback(Output('graph-1-tabs', 'figure'),
              [Input('range-drop', 'value'),
               Input('value-drop', 'value')])
def drop_select(val_range, value):
    print(val_range, value) <<------ doesnt get called
    return {'data': [{'x': [1,2,3], 
                      'y': [3,2,1],
                      'type': 'bar'}]}
```

---

<div class="post-metadata">

**Author:** ![Arnavkrishraj](https://avatars.discourse-cdn.com/v4/letter/a/258eb7/32.png) [@Arnavkrishraj](https://community.plotly.com/u/Arnavkrishraj)\
**Post date:** [May 29, 2019, 7:45am UTC](https://community.plotly.com/t/tabs-in-multiple-files-with-callbacks/15330/2 "2019-05-29T07:45:51Z")

</div>

I was also having the same problem, but now is resolved.

Try Reading [https://dash.plot.ly/urls](https://dash.plot.ly/urls), especially the section - Dynamically Create a Layout for Multi-Page App Validation.  
See how the function `serve_layout` is used.

I hope it helps 🙂