Multipage apps

There are several possible patterns for apps with reactive pages. For more details on building reactive apps, see the Your first dashboard guide and the docs.

Single app module with multiple pages

When building apps without too much logic, it might be sufficient to keep it all in a single module even if there's multiple pages. You just need to define additional routes for each page as in this example, which uses the StatisticAnalysis module defined here:

app.jl
module App
using GenieFramework
using Statistics
@genietools

# Implement reactive code
@app begin
    @in N = 0
    @out m = 0.0
    @out name = "John"
    @onchange N begin
        m = mean(rand(N))
    end
end

# Define the UI for each page
index() = [h1("Welcome {{name}}!"), a(href="/form")]
function formui()
    cell([
        textfield("How many numbers?", :N),
        p("The average of {{N}} random numbers is {{m}}"),
    ])
end


# Define the routes
@route("/", index) # use route instead of @page to avoid injecting unnecessary javascript
@page("/form", formui)
end

Alternatively, you can place the UI code in a separate file and include it as

app.jl
@page("/", "ui.jl")
ui.jl
    cell([
        textfield("How many numbers?", :N),
        p("The average of {{N}} random numbers is {{m}}"),
    ])

Multiple app modules

If each page performs different functions, for instance a dashboard page and a another page with a configuration panel, you can implement them in separate logic modules. Then, simply include each module in the main app.jl as in this example:

app.jl
module App
using GenieFramework
include("Index.jl")
include("Form.jl")
end
Index.jl
module Index
using GenieFramework

@app begin
    @out name = "John"
end

function ui()
    h1("Welcome {{name}}!")
end

@page("/", ui)
end
Form.jl
module Form
using GenieFramework
using Statistics

@app begin
    @in N = 0
    @out m = 0.0
    @onchange N begin
        m = mean(rand(N))
    end
end

function ui()
    cell([
        textfield("How many numbers?", :N),
        p("The average of {{N}} random numbers is {{m}}"),
    ])
end

@page("/form", ui)
end

Your first dashboard

Quick guide on building your first reactive dashboard with Genie Framework.

Date picker

Using a date picker with a specific date format.

Genie