How do you define events for components?

[edmund-r]

I am using Genie Builder's no-code editor for a UI. I need to setup event handlers for user actions on components. One example for a Table component is to get the row that has been clicked.

From Quasar's Table documentation I see there is an @row-click event that takes a few parameters. However, in the no-code editor I do not see any option to define an event or information on what parameters and types are needed for an event.

How do you define events and handlers with the non-code editor in Genie Builder?

Thanks

[hhaensel]

There's a section in the GenieFramework docs:
https://learn.genieframework.com/framework/stipple.jl/recipes/table-clicks#table-row-clicks

[edmund-r]

Any idea how this is done in the no-code editor UI? The project is using the no-code editor to setup the UI. There are multiple tables on the UI and it is not clear how to attach an event handler to a particular table.

[essenciary]

@edmund-r I'm implementing a custom event to help with this

[hhaensel]

Here's the solution that works with the current main branch of Stipple.
(I had to add a feature in the @on macro; the errors during testing are from the fact that the version of the XML2 library has been updated, hence no real errors.)

using Stipple, Stipple.ReactiveTools, StippleUI
using DataFrames

Stipple.enable_model_storage(false)

df = DataFrame(
    x = [1, 2, 3],
    y = [4, 5, 6],
    z = [7, 8, 9]
)

dt = DataTable(df)

col_width = Dict(
    "x" => 60,
    "y" => 30,
    "z" => 10
)

dt_options = DataTableOptions(columnspecs = Dict(k => Dict(:label => "$k label", :headerStyle => "width: $v%") for (k, v) in col_width))
dt.opts = dt_options

@app begin
    @in x = 11
    @in y = 22

    @out table = DataTable(df, dt_options)
    @out cols = col_width
end

@watch [
    :cols => js"""{
        handler () {
            this.table.columns.map((col, i) => {
                this.table.columns[i].headerStyle = "width: " + this.cols[col.field] + "%";
            });
        },
        deep: true
    }
    """
]

function ui()
    row(class = "q-mt-md", cell(class = "st-module q-pa-md",
        htmldiv(gutter = :md, [
            slider(10:50, R"cols.x", "X", style = "max-width: 500px"),
            slider(10:50, R"cols.y", "Y", style = "max-width: 500px"),
            table(:table, @on(:row__click, :rowclick, "event.row = args[0]"))
        ])
    ))
end

@event :rowclick begin
    @info event
    notify(__model__, "Row clicked: $(event["row"]["__id"])")
end

@page("/", ui, post = x -> (global model = x; nothing))

up(open_browser = true)