Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Multiple callback - static and interactive pages

I’m using one of Dash’s app templates to build similar app but need to modify according to my needs. This is the app I’m using from Dash gallery: Dash financial report

I have reviewed the source code and apparently, it is using a simple callback to build the app. This is due to the fact that Dash’s original app is static. However, I want to create an interactive field in each page, which would execute some code when a user clicks a button.
As a starting point I took this page


and modified to the following. For simplicity, I only modified two html divisions. The first one is date selection and the second one is the input file path selection. Then finally, user will press ‘Execute’ button to run the code.


The purpose is to allow user interact with the app, choose parameters and finally execute a code based on chosen parameters. I understand that this requires more complex callbacks than in the original app but I don’t know how to proceed. Can someone give tips on potential tools available in Dash.

This is the link to the app’s GitHub repository: Click to download .zip file

Hi,

Since it is a bit open-ended your question, I will point you out to parts of the Dash documentation that you might find relevant.

Here are some tips on how to structure multi-page applications like yours, and it is a very good idea to keep each callback to the page they belong.

I would recommend you to search for examples using dcc.Upload and parsing data from Excel to python, as this will be certainly the hardest part of your callback. Please be also mindful that some callbacks will be triggered when you navigate the pages, as the components in their Input/State list are added to the layout. This is particularly important if you are using a button to trigger callbacks. You will find more info on this here

Follow up if you have any specific questions, I would be happy to help!

Thank you very much for the links. I will go through them and follow up if I have further questions.

@jlfsjunior thanks for the tips again. I managed to run the app with multiple callbacks. Regarding this point that you mentioned,

Please be also mindful that some callbacks will be triggered when you navigate the pages, as the components in their Input/State list are added to the layout. This is particularly important if you are using a button to trigger callbacks.

now I receive error messages. I think it is related to simultaneous execution of all callbacks.


As the error message suggests, is it a good practice to turn off these exceptions?
As I mentioned above, my goal is to run some code in the back-end when a user clicks ‘Execute’ button.

Yeah, there is another point that I should have mentioned, explained in details here

Since some of the components will be loaded dynamically during the application lifetime (but aren’t in the initial layout), you have to suppress the exceptions or define app.layout_validation. There you just need to provide a layout structure with all components that you’ll need as Input/State in callbacks. The validation layout approach is much better, as it still checks all the exceptions and forces the developer to add required components to it to be checked.

Thanks, @jlfsjunior ! app.validation_layout option was great solution. Now, all error messages are gone when I initiate the app. I couldn’t find any documentation on this option but I found a Medium post with a sample code. I think it might be useful for others too, so, leaving the link here: app.validation_layout example

Ok, I am a bit confused because I shared the specific documentation for this functionality.

Here it is again: URL Routing and Multiple Apps | Dash for Python Documentation | Plotly

My bad. I missed it. I have too many tabs open with Dash documentations.

1 Like