Interactive Dashboards and Data Apps with Plotly and Dash/

...

/

Understanding the ID Parameter of Dash Components

Understanding the ID Parameter of Dash Components

Get familiar with identifying Dash components based on their ID values.

We'll cover the following...

Let’s now look at how to identify components by setting their id values. After that, we’ll learn how to declare a component as Input or Output.

The id parameter of Dash components

Every Dash component has an id parameter that we can easily set in order to uniquely identify it. There is actually nothing more to this parameter than making sure that our components have unique and descriptive names.

Using descriptive and explicit names for the id parameter becomes more important as the app grows in complexity. This parameter is optional when there is no interactivity, but it becomes mandatory when there is. The following example snippet shows how easy it is to set the id parameter for a basic use case:

html.Div([
   html.Div(id='empty_space'),
   html.H2(id='h2_text'),
   dcc.Slider(id='slider'),
])

Applying this to our current isolated app, we set a descriptive name to each id parameter.

app.layout = html.Div([
   dcc.Dropdown(id='color_dropdown',
               options=[{'label': color, 'value': color}
                  for color in ['blue', 'green', 'yellow']]),
   html.Div(id='color_output')
])

Our app is now complete from a layout perspective. The difference here is that we set values for the id parameter, and we’re running it in a Jupyter Notebook environment. Once we can identify components using their id parameter, we can determine which ones become Input and which ones become Output. By updating our conceptual diagram with the id values that we set, we can view the labels, as shown in the illustration below:

Visible app elements are given names (IDs)
Visible app elements are given names (IDs)

Having given our components descriptive names, we’re now ready to use them beyond simply displaying them.

Dash inputs and outputs

The next step is to determine which component is going to become an input (to our pure Python function) and which component will get the return value of the function (as an output) to be displayed to the user.

Determining inputs and outputs

The dash.dependencies module has several classes, two of which we will be using here—Output and Input.

These classes can be imported by adding the following line to the imports section of our app:

from dash.dependencies import Output, Input

Let’s quickly recap what we did earlier before adding the final element that will make this functionality work.

  1. We instantiated an app in the Jupyter Notebook environment.
  2. We created a drop-down containing three colors.
  3. We created a regular function that returns a string, together with the value provided to it: 'Your selected' + <color>.
  4. The components were identified with descriptive names through their id parameters.
  5. Input and Output were imported from dash.dependencies.

We’ll now define our callback function. Callback functions are decorators, and in the most basic use case, they require these three things:

  • Output: The page element that will be changed as a result of running the function. Dash gives us the flexibility to also determine which property of the component we want to modify. In our case, we want to modify the children property of the empty div. In this case, it can be specified like this:

    Output(component_id='color_output',
component_property='children')

  • Input: Using the same logic, we need to specify which property of which component will serve as our input to the callback function. In our case, this would be the value property.

    Input(component_id='color_dropdown',
component_property='value')

  • A normal Python function: Any function can be used, but obviously, it needs to make sense in the context of the Input and Output that we have chosen.

The illustration below shows an updated view of how things are coming together: