Frequently Asked Questions

Q: How can I customize the appearance of my Dash app?

A: Dash apps are rendered in the browser as modern standards-compliant
web apps. This means that you can use CSS to style your Dash app as you
would standard HTML.

All dashHtmlComponents support inline CSS styling through a style
attribute. An external CSS stylesheet can also be used to style
dashHtmlComponents and dashCoreComponents by targeting the ID or
class names of your components. Both dashHtmlComponents and
dashCoreComponents accept the attribute className, which corresponds
to the HTML element attribute class.

The Dash HTML Components
section in the Dash User
Guide explains how to supply dashHtmlComponents with both inline
styles and CSS class names that you can target with CSS style sheets. The Adding CSS & JS and Overriding the Page-Load Template section in the Dash Guide explains how you
can link your own style sheets to Dash apps.

Q: How can I add JavaScript to my Dash app?

A: You can add your own scripts to your Dash app, just like you would
add a JavaScript file to an HTML document. See the Adding CSS & JS and
Overriding the Page-Load Template section in the
Dash Guide.

Q: Can I make a Dash app with multiple pages?

A: Yes! Dash has support for multi-page apps. See the Multi-Page Apps
and URL Support section in the Dash User Guide.

Q: How I can I organize my Dash app into multiple files?

A: A strategy for doing this can be found in the Multi-Page Apps and URL Support section in the Dash User Guide.

Q: How do I determine which input has changed?

A: In addition to event properties like n_clicks that change whenever an event happens (in this case a click), there is a global variable app$callback_context(), available only inside a callback. It has properties:

• triggered: list of changed properties. This will be empty on initial load, unless an input prop got its value from another initial callback. After a user action it is a length-1 list, unless two properties of a single component update simultaneously, such as a value and a timestamp or event counter.
• inputs and states: allow you to access the callback params by id and prop instead of through the function args. These have the form of dictionaries app$callback_context()$triggered$value

Here’s an example of how this can be done:

library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)
library(jsonlite)

app <- Dash$new()

app$layout(
  htmlDiv(
    list(
      htmlButton(children = 'Button 1', id='btn-1', n_clicks=0),
      htmlButton(children = 'Button 2', id='btn-2', n_clicks=0),
      htmlButton(children = 'Button 3', id='btn-3', n_clicks=0),
      htmlDiv(id='container')

    )
  )
)

app$callback(output('container', 'children'),
             list(input('btn-1', 'n_clicks'),
                  input('btn-2', 'n_clicks'),
                  input('btn-3', 'n_clicks')),
    function(input1, input2, input3) {

      inputs <- c(input1, input2, input3)

      ctx <- app$callback_context()

      most_recent_click <- if(ctx$triggered$value) {

        unlist(strsplit(ctx$triggered$prop_id, "[.]"))[1]

      } else "No clicks yet"

      toJson <- jsonlite::toJSON(ctx, pretty = TRUE)

      htmlDiv(
        list(
          htmlTable(
            list(
              htmlTr(
                list(
                  htmlTh('Button 1'),
                  htmlTh('Button 2'),
                  htmlTh('Button 3'),
                  htmlTh('Most Recent Click')
                )
              ),
              htmlTr(
                list(
                  htmlTd(input1),
                  htmlTd(input2),
                  htmlTd(input3),
                  htmlTd(most_recent_click)
                )
              )
            )
          ),
          htmlPre(toJson)
        )
      )
    })
#app$run_server()

Note: Prior to the addition of callback_context, you needed to compare timestamp properties like n_clicks_timestamp to find the most recent click. While existing uses of *_timestamp continue to work for now, this approach is deprecated, and may be removed in a future update. The one exception is modified_timestamp from dccStore, which is safe to use, it is NOT deprecated.

Q: Can I use jQuery with Dash?

A: For the most part, you can’t. Dash uses React to render your app on
the client browser. React is fundamentally different to jQuery in that it
makes use of a virtual DOM (Document Object Model) to manage page
rendering. Since jQuery doesn’t speak React’s virtual DOM, you can’t use
any of jQuery’s DOM manipulation facilities to change the page layout,
which is frequently why one might want to use jQuery. You can however use
parts of jQuery’s functionality that do not touch the DOM, such as
registering event listeners to cause a page redirect on a keystroke.

In general, if you are looking to add custom clientside behavior in your
application, we recommend encapsulating that behavior in a custom Dash component.

Q: I have more questions! Where can I go to ask them?

A: The Dash Community forums is full
of people discussing Dash topics, helping each other with questions, and
sharing Dash creations. Jump on over and join the discussion.