# Dash MultiPage App Page refresh?

**URL:** <https://community.plotly.com/t/dash-multipage-app-page-refresh/78300>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [September 5, 2023, 10:09pm UTC](https://community.plotly.com/t/dash-multipage-app-page-refresh/78300 "2023-09-05T22:09:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrel](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mrel](https://community.plotly.com/u/mrel)\
**Post date:** [September 5, 2023, 10:09pm UTC](https://community.plotly.com/t/dash-multipage-app-page-refresh/78300/1 "2023-09-05T22:09:07Z")

</div>

I have a multipage Dash WebApp that consists of following pages:

1. `app.py` \<=from where app is launched
2. `sql.py` \<=different functions/queries/variables/lists pulling data from SQL
3. 'page1.py` \<=contains a layout for the page, incl. AG Grid
4. `columnDefs_1.py` \<=contains column definitions for the AG Grid on `page1.py` and a list `a` from `sql.py`
5. 'page2.py` \<=contains a layout for the page, incl. AG Grid
6. `columnDefs_2.py` \<=contains column definitions for the AG Grid on `page2.py` and a list `b` from `sql.py`

On `page1.py` and `page2.py` inside the layout I have the following line, thanks to which the layout is refreshed/activated once a week or when page (app) is refreshed in browser.

```auto
dcc.Interval(id='interval_pg1', interval=86400000*7, n_intervals=0),

```

The problem is that when I physically refresh the webapp in the browser, only `page1.py` and `page2.py` are refreshed, i.e. only layouts are refreshed.  
The `columnDefs_1.py` and `columnDefs_2.py` files are not refreshed, thus, they are not pulling the latest lists from SQL, thus, layout on `page1.py` and `page2.py` doesn’t contain latest lists (e.g. dropdown options are not updated).

How do I force `columnDefs_1.py` and `columnDefs_2.py` to refresh each time I refresh pages in the browser?

I know I could avoid it if I put all columnDefs inside `page1.py` and `page2.py`, but I am trying to do it in a “cleaner” way.

Thanks for help in advance.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [September 5, 2023, 10:49pm UTC](https://community.plotly.com/t/dash-multipage-app-page-refresh/78300/2 "2023-09-05T22:49:53Z")

</div>

Hi @mrel

Try making your layouts a function, and putting the part where you pull the latest from SQL inside the layout.

---

<div class="post-metadata">

**Author:** ![mrel](https://avatars.discourse-cdn.com/v4/letter/m/d26b3c/32.png) [@mrel](https://community.plotly.com/u/mrel)\
**Post date:** [September 6, 2023, 1:14pm UTC](https://community.plotly.com/t/dash-multipage-app-page-refresh/78300/3 "2023-09-06T13:14:10Z")

</div>

Hmm, I will see if I can do that.  
In the meantime, is it possible to update it via `columnState` ?

Example:  
Code for `columnDef1.py`

```auto
country = ["Germany", "France"] #in reality this is pulled from SQL via function imported from sql.py

columnDefs = [
    {
        "headerName": "Category",
        "field": "category",
        "filter": "agTextColumnFilter",
        "cellEditor":"agSelectCellEditor",
        "cellEditorParams":{"values":country}
    },
]

```

Can I update the `"cellEditorParams":{"values":country}` via a `callback` from `page1.py` ?  
Could something like this exist perhaps?

```auto
@callback(
         Output("table", "columnState"),
         Input("interval", "n_intervals")
 )

 def col_def(interval):
         country_updated = ["Germany" , "UK", "France", "Netherlands"] #pulled from SQL via function imported from sql.py
         return [{"colId": "category", "cellEditorParams" : {"values":country_updated}}]

```