Redirection in Plotly Dash Application

Hello,

I’m currently trying to make an a web application using Flask. But I have proublems to define routes and views for the web app, such as a login page for the brigadiers, a form to enter the production data.
My question is, did I not connect something okay or am I missing something?
When I get to the login page and click on login it won’t redirect me to the next part of the hmtl part of the app1,
do I have to add something else to my routing in others app like in index or nav?

Any help would be great, thank you.

Here is my app for now:.

index.py

from dash import dcc
from dash import html
from dash.dependencies import Input, Output
from app import app
from apps import app1, app2
import nav

app.layout = html.Div(
    [dcc.Location(id="url", refresh=False), html.Div(id="page-content")]
)

# "complete" layout
app.validation_layout = html.Div(
    [
        app1.layout,
        app2.layout,
        nav.layout,
        app.layout,
    ]
)


@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def display_page(pathname):
    if pathname == "/":
        return nav.layout
    elif pathname == "/apps/Enter_Daily_Production":
        # app.title ="Enter Data for Sewing Report"
        return app1.layout
    elif pathname == "/apps/Cell_Data_Dashboard":
        # app.title = "Report of Daily Sewing Process"
        return app2.layout
    else:
        return "404"


if __name__ == "__main__":
    app.run_server(debug=True, port=8080)

In here I define the index page and call the navigation file with the applications.

app.py

import dash
import dash_bootstrap_components as dbc
import dash_auth
import user_mgmt

app = dash.Dash(__name__)
server = app.server
app.title = "BDE Sewing Report ZE"
auth = dash_auth.BasicAuth(app, user_mgmt.read_users())

app1.py

import dash
import dash_html_components as html
import dash_core_components as dcc
import pandas as pd
import pyodbc
from dash.dependencies import Input, Output, State
# import connect
import pandas as pd
from app import app
import mssql_queries
import mssql_conn
import constants
import mysql_queries
import io
import base64

# Define the Dash app
app = dash.Dash(__name__)


# Define layout for the web app
content = html.Div([
    # Login page for the brigadiers
    html.Div([
        html.H1('Login Page', className='text-center'),
        dcc.Input(id='username', type='text', placeholder='Enter username', className='form-control mb-2'),
        dcc.Input(id='password', type='password', placeholder='Enter password', className='form-control mb-2'),
        html.Button('Login', id='login-button', className='btn btn-primary btn-block'),
        html.Div(id='login-status', className='mt-2')
    ], className='col-lg-4 offset-lg-4 mt-5'),

    # Form to enter production data
    html.Div([
        html.H1('Production Data Form', className='text-center'),
        dcc.Input(id='shift-id', type='text', placeholder='Enter ShiftID', className='form-control mb-2'),
        dcc.Input(id='shift-start', type='text', placeholder='Enter ShiftStart', className='form-control mb-2'),
        dcc.Input(id='shift-end', type='text', placeholder='Enter ShiftEnd', className='form-control mb-2'),
        dcc.Input(id='brigadier-id', type='text', placeholder='Enter BrigadierID', className='form-control mb-2'),
        dcc.Input(id='island-id', type='text', placeholder='Enter IslandID', className='form-control mb-2'),
        html.Button('Submit', id='submit-button', className='btn btn-primary btn-block'),
        html.Div(id='submit-status', className='mt-2')
    ], id='production-form', className='col-lg-6 offset-lg-3 mt-5', style={'display': 'none'}),

    # Page to display production data
    html.Div([
        html.H1('Production Data', className='text-center'),
        html.Table([
            html.Thead([
                html.Tr([
                    html.Th('ShiftID'),
                    html.Th('ShiftStart'),
                    html.Th('ShiftEnd'),
                    html.Th('BrigadierID'),
                    html.Th('IslandID')
                ])
            ]),
            html.Tbody(id='production-table')
        ])
    ], id='production-page', className='col-lg-8 offset-lg-2 mt-5', style={'display': 'none'})
], className='container')
layout = html.Div([content])



valid_users = {'john': '12345', 'jane': 'password', 'admin': 'admin'}
# Define callback for login button
@app.callback(
    Output('login-status', 'children'),
    Input('login-button', 'n_clicks'),
    State('username', 'value'),
    State('password', 'value')
)
def login(n_clicks, username, password):
    # Check if username and password are correct
    if username in valid_users and valid_users[username] == password:
        return 'Login successful!'
    else:
        return 'Invalid username or password'
# Define callback for submit button
@app.callback(
    Output('submit-status', 'children'),
    Input('submit-button', 'n_clicks'),
    State('shift-id', 'value'),
    State('shift-start', 'value'),
    State('shift-end', 'value'),
    State('brigadier-id', 'value'),
    State('island-id', 'value')
)
def submit_data(n_clicks, shift_id, shift_start, shift_end, brigadier_id, island_id):
    # Insert production data into SQL Server database
    cursor = cnxn.cursor()
    cursor.execute("INSERT INTO Shift (ShiftID, ShiftStart, ShiftEnd, BrigadierID, IslandID) VALUES (?, ?, ?, ?, ?)", 
                   shift_id, shift_start, shift_end, brigadier_id, island_id)
    cnxn.commit()
    return 'Data submitted successfully!'

# Define callback for display production page
@app.callback(
    Output('production-table', 'data'),
    Input('date-picker', 'date')
)
def update_production_table(date):
    # Connect to database

    # Query production data for selected date
    query = f"SELECT Shift.ShiftID, Shift.ShiftStart, Shift.ShiftEnd, Brigadier.BrigadierName, Island.IslandName, Production.PiecesProduced FROM Shift INNER JOIN Production ON Shift.ShiftID = Production.ShiftID INNER JOIN Brigadier ON Production.BrigadierID = Brigadier.BrigadierID INNER JOIN Island ON Production.IslandID = Island.IslandID WHERE CONVERT(date, Shift.ShiftStart) = '{date}'"
    df = pd.read_sql(query)
    # Close database connection
    # Return production data as a dictionary
    return df.to_dict('records')
if __name__ == '__main__':
    app.run_server(debug=True)

Hello @Traxdata,

It looks like you arent interacting with the location element on the page.

In order to redirect, you will need to have a location component on the app that you interact with via a callback to alter the href. This will result in the page changing. :slight_smile:

Hello sorry to bother you, but can you give me a few examples of the pathing? And also do I need a login.py or I can I just go to index and there make a function for the login and the pathing?

What I triend it didn’t work as it won’t show me the different layouts on the same app.

Your app1 looks like it should really be an index, considering you have different layouts inside of each of the children.

I’m not really sure what to do with it.

Have you considered working with pages? It has a more straightforward interaction.