✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

Redirect user to external URL

Hello, I’ve been learning Dash for the past two days and have found it very useful. Right now I have a WordPress site running on the same server as the Dash application. What I want to do is when particular data is inputted into the Dash interface, I want the Dash application to redirect the user to the WordPress site.

If I were to do what I want in Flask, it would look something like this:

from flask import Flask, redirect

app = Flask(__name__)

@app.route('/')
def hello():
    return redirect("http://www.example.com", code=302)

if __name__ == '__main__':
    app.run(host='0.0.0.0')

This code would effectively redirect the user to “http://www.example.com.”

Here is the code that I have right now. I stripped all of the code from the last lines for example reasons, but it gives the idea of what I want to do.

import dash
from dash.dependencies import Input, Output, Event
import dash_core_components as dcc
import dash_html_components as html





app = dash.Dash(__name__)

app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})

app.layout = html.Div([
    html.H4(children='Pandas Label Maker'),

    dcc.Input(
        placeholder='Enter SKU...',
        id='sku',
        value=''

    ),


    html.Br(),


    #html.Label('Print Quantity: '),
    dcc.Input(
        placeholder='Enter Quantity...',
        id='print_quantity',
        value=''
    ),


    html.Br(),



    dcc.Input(
        placeholder='Enter Position...',
        id='position',
        value=''
    ),


    html.Br(),


    html.Label('Overlay: Yes or No?'),
    dcc.Dropdown(
        options=[
            {'label': 'Yes', 'value': 'Yes'},
            {'label': 'No',  'value':  'No'}
        ],
        id='overlay',
        value='No'
    ),


    html.Label('Ready to print?'),
    dcc.Dropdown(
        options=[
            {'label': 'Yes', 'value': 'Yes'},
            {'label': 'No',  'value':  'No'}
        ],
        id='print',
        value='No'
    ),

    html.Div(id='skuValues'),
    html.Br(),


    dcc.Markdown('''


Go Back to [Pandas](http://172.29.0.29/).


'''),
html.Br(),
html.Button('Default Values', id='default_values'),

], style={'color': 'Black', 'fontSize': 20, 'fontWeight': 'bold', 'fontFamily': 'Arial'})



@app.callback(
    dash.dependencies.Output('overlay', 'value'),
    events=[Event('default_values', 'click')]
)
def update():
    return 'No'

@app.callback(
    dash.dependencies.Output('print', 'value'),
    events=[Event('default_values', 'click')]
)
def update():
    return 'No'

@app.callback(
    dash.dependencies.Output('sku', 'value'),
    events=[Event('default_values', 'click')]
)
def update():
    return ''

@app.callback(
    dash.dependencies.Output('position', 'value'),
    events=[Event('default_values', 'click')]
)
def update():
    return ''

@app.callback(
    dash.dependencies.Output('print_quantity', 'value'),
    events=[Event('default_values', 'click')]
)
def update():
    return redirect("http://172.29.0.29/")




@app.callback(
    dash.dependencies.Output('skuValues', 'children'),
    [dash.dependencies.Input('sku', 'value'),
    dash.dependencies.Input('print_quantity', 'value'),
    dash.dependencies.Input('overlay', 'value'),
    dash.dependencies.Input('print', 'value'),
    dash.dependencies.Input('position', 'value')
    ])
def skuValue(sku, quantity, overlay, print_value, position):
    # Here's an example of what I want it to do.
    if sku == 'redirect':
        return redirect('http://mywordpresssite.com/')

Right now if I were to run this, everything would work except the redirect. So, my question is: how do I redirect to an external URL using Dash?

If I didn’t explain something well enough, please tell me and I will see if I can explain it better.

Thanks,
Malachi

Good question. I think that would actually be possible using the dcc.Location component. See http://plot.ly/dash/urls for an example. You could return a new pathname in a callback that would update a single dcc.Location element.

Another solution would be to just dynamically update the href of a html.A link element and ask the user to click on that element in order to “redirect” themselves. That might be a more intuitive than redirecting on the behalf of the user anyway.

Can you explain how to return a new location from a callback? I have created a login page and on successful login, I want to redirect to another page say /home. Can you please show this with an example.

I have this as a question in : https://stackoverflow.com/q/48576712/5165377