1. Chained callbacks
Let's see how we can chain callbacks with a common use case.
2. Why chain callbacks?
So far, we have used callbacks in our apps to cause
a regeneration of plots, perhaps with filtered data,
and a change in html or text tags.
Here we will consider a callback triggering another callback.
This may sound unusual, but there is a common use case we will explore, implementing it in Dash.
3. A common example
Consider if you are online shopping for a car. You select the make, and this changes the available options for the model. Not every model is available when you select a certain make; otherwise, there would be far too many, resulting in a bad user experience.
Let's learn to do this in Dash.
4. Inputs and outputs
The trick to managing potentially complex and confusing chained callbacks is to be aware of the callback pathways. Inputs trigger callbacks and send some output; however, that output may be the input to another callback.
A helpful tool to visualize this is an input-output diagram.
Let's walk through the flow of our use case example.
A user makes a selection which changes the value property of the first dropdown. A callback has this value as an input.
The callback uses the value to subset and return the options property for the second dropdown as the output.
A second callback could be constructed to use this same options property as an input and continue from there.
5. Chained callbacks in Dash
Let's look at the Dash code to implement this chained callback.
We create a callback that is triggered on a change in the value property of the major category dropdown; ID'd here as major_cat_dd.
The update_dd function will use that value to subset all potential options to only relevant ones and send them back to the options property of the minor category dropdown.
Now let's increase the chain by setting a default value for the minor category dropdown.
The crucial link in this callback is the output of the first callback triggers the input of the second callback. We can see what is inside the brackets for the Input and Output is the same.
The function triggered by the second callback can then pick a default value to update on the minor dropdown. That is, it sends back the chosen option to the value property.
6. Multiple outputs
We may wish to have a single callback update multiple elements.
In our example, the callback to choose a default minor category dropdown value could also update an HTML title in our app.
We can add another output and another return value. The return values are sent to the outputs in order. title_value will be sent to the my_title element, and the dropdown_value will be sent to the minor_cat_dd element.
7. Multiple outputs diagram
To see this on our input-output diagram, the callback triggered from a change in the minor category dropdown has an output of a minor category (a string). It sends this to the 'value' property of the minor category dropdown, effectively making that the selected option in the dropdown. It also sends this same string to the children property of our HTML title. From here, even more callbacks could be triggered.
8. Let's practice!
Let's practice chaining together callbacks to enhance our Dash apps.