Integrating Dash with a Flask application that uses Blueprints gives a callback error "dash.exceptions.CantHaveMultipleOutputs"

Dash Python
1

Hello,

I have the following folder structure for my Flask application that uses Blueprints.

main_project_folder/
	__init__.py
	run.py
	my_project/
		__init__.py
		config.py
		static/
		templates/
		blueprint1/
			__init__.py
			views.py
			apps/
				__init__.py
				app.py
				charts/
					__init__.py
					dash_tab1.py
					dash_tab2.py
					dash_tab3.py
			templates/
				blueprint1/
		blueprint2/
		blueprint3/

I followed the Salesforce demo code that uses tabs to create the charts I have and they work perfectly by themselves (there’s index.py, app.py, and the .py files for the different graphs). I’m trying to add them to my existing Flask application now. The Dash charts are in the apps/charts folder, with app.py being in app and the code from index.py is in views.py of the Blueprint these charts are for. It is under the route and function where I want the graphs to be. This is the code from views.py:

from flask import Blueprint, render_template, url_for, request, flash,\
	redirect, session
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

from my_project.blueprint1.apps.app import app
from my_project.blueprint1.apps.charts import dash_tab1, dash_tab2,\
	dash_tab3


blueprint1 = Blueprint(
	'bp1',
	__name__,
	template_folder="templates/bp1/",
	url_prefix="/bp1")
.
.
.
@blueprint1.route("/dataviz/", methods=["GET"])
def visualize_data():
	app.layout = html.Div(
		[
			# header
			html.Div([
				html.Span("Data Visualizations", className="app-title"),
			], className="row header"),

			# tabs
			html.Div([
				dcc.Tabs(
					id="tabs",
					style={"height": "20", "verticalAlign": "middle"},
					children=[
						dcc.Tab(label="Data Viz 1",
								value="data_viz_1_tab"),
						dcc.Tab(label="Data Viz 2",
								value="data_viz_2_tab"),
						dcc.Tab(label="Data Viz 3",
								value="data_viz_3_tab"),
					],
					value="data_viz_1_tab",
				),
			], className="row tabs_div"),

			# Tab content
			html.Div(id="tab_content", className="row",
					 style={"margin": "2% 3%"}),

			html.Link(href="https://use.fontawesome.com/releases/v5.2.0/css/all.css", rel="stylesheet"),
			html.Link(href="https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css", rel="stylesheet"),
			html.Link(href="https://fonts.googleapis.com/css?family=Dosis",
					  rel="stylesheet"),
			html.Link(href="https://fonts.googleapis.com/css?family=Open+Sans", rel="stylesheet"),
			html.Link(href="https://fonts.googleapis.com/css?family=Ubuntu",
					  rel="stylesheet"),
			html.Link(href="https://cdn.rawgit.com/amadoukane96/8a8cfdac5d2cecad866952c52a70a50e/raw/cd5a9bf0b30856f4fc7e3812162c74bfc0ebe011/dash_crm.css", rel="stylesheet")
		],
		className="row",
		style={"margin": "0%"}
	)

	@app.callback(
		Output("tab_content", "children"),
		[Input("tabs", "value")]
	)
	def render_content(tab):
		if tab == "data_viz_1_tab":
			return dash_tab1.layout
		elif tab == "data_viz_2_tab":
			return dash_tab2.layout
		elif tab == "data_viz_3_tab":
			return dash_tab2.layout
		else:
			return dash_tab1.layout

	return redirect(url_for("blueprint1.visualize_data"))

When I run this and navigate to the page, I get this error message:

dash.exceptions.CantHaveMultipleOutputs: 
You have already assigned a callback to the output
with ID "tab_content" and property "children". An output can only have
a single callback function. Try combining your inputs and
callback functions together into one function.

I feel like redirect is the wrong way to go but I’m not sure what else to use. I tried returning app.layout but that didn’t work either since that returns a Div and isn’t acceptable. Does anybody have any suggestions? I feel like I’m missing something but I’m not sure what. Let me know if you’d like any other information.

Thanks!

2

You are setting a layout and assigning callback in a flask route, it will add a new callback everytime the route is accessed.

3

Okay, that makes sense. Do you have a suggestion on what I should do instead to get it to work how I want?

4

Hi, you can see my example code for Flask_template_auth_with_Dash :grinning:

1 Like