# How to use btn\_\_toggle in Stipple

**URL:** <https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501>\
**Category:** Web Stack\
**Tags:** question\
**Created:** [March 4, 2021, 8:48pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501 "2021-03-04T20:48:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 4, 2021, 8:48pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/1 "2021-03-04T20:48:59Z")

</div>

Hi and thank you @hhaensel 😃

How can I use [btn\_\_toggle](https://quasar.dev/vue-components/button-toggle#Example--Basic) in Stipple? I think my struggle is the `options` property. I can’t get it to work no matter what syntax I use (copy-paste the JS from the example, vector of named tuples, vector of Dicts, Dict of vectors, etc).

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 4, 2021, 10:16pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/2 "2021-03-04T22:16:33Z")

</div>

Where exactly is your problem? Do you want to exchange the text of the buttons?  
If you just want a static version than it is straight forward

```julia
Base.@kwdef mutable struct ButtonToggle<: ReactiveModel
    btntoggle::R{String} = ""
end

btn_opt(label::AbstractString, value::AbstractString) = "{label: '$label', value: '$value'}"
btn_opt(labels::Vector, values::Vector) = "[$(join( btn_opt.(labels, values), ",\n "))]"
btn_opt(values::Vector) = btn_opt(values, values)

function ui()
    app = dashboard(vm(model),
        [
         heading("Button Toggle"),
         row(cell(class="st-module", [
            quasar(:btn__toggle, "", 
                @bind("btntoggle"),
                toggle__color="primary",
                :multiple,
                options=@data(btn_opt(["One", "Two", "Three"], ["one", "two", "three"]))
            )
        ])),
    ], title = "Button Toggle")

    html(app)
end

```

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 4, 2021, 10:29pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/3 "2021-03-04T22:29:16Z")

</div>

This indeed solved it. I didn’t know about the @data macro or its need…

Is there a non-static version of this? I need the labels to be part of the model. The user (you know the story by now) uploads a file, and the content of the file dictates the labels.

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 4, 2021, 10:33pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/4 "2021-03-04T22:33:17Z")

</div>

Seems to be more difficult, as we have to supply an array of objects

---

<div class="post-metadata">

**Author:** ![yakir12](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/yakir12/32/297_2.png) [@yakir12](https://discourse.julialang.org/u/yakir12)\
**Post date:** [March 4, 2021, 10:48pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/5 "2021-03-04T22:48:18Z")

</div>

Maybe there is a way to do that with a separate route… For one, I can have an initial page that is only for uploading the settings file, and once that’s done, then the dashboard page gets loaded (somehow).

Not sure how to proceed.

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 4, 2021, 11:40pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/6 "2021-03-04T23:40:20Z")

</div>

use Dictionaries 🙂

```julia
btn_opt(label, value) = Dict(:label => label, :value => value)
btn_opt(values::Vector) = btn_opt.(values, values)

```

```julia
julia> model.btn_options[] = btn_opt(["one","two","three"])
3-element Array{Dict{Symbol,String},1}:
 Dict(:value => "one",:label => "one")
 Dict(:value => "two",:label => "two")
 Dict(:value => "three",:label => "three")

julia> model.btn_options[] = btn_opt(collect(1:3))
3-element Array{Dict{Symbol,Int64},1}:
 Dict(:value => 1,:label => 1)
 Dict(:value => 2,:label => 2)
 Dict(:value => 3,:label => 3)

```

And to see it in action:

```julia
using Stipple, StippleUI
using Genie.Renderer.Html

Base.@kwdef mutable struct JSmethods <: ReactiveModel
    x::R{Int} = 0 # pressing this will update the array of buttons
    btntoggle::R{Any} = ""
    btn_options::R{Array} = btn_opt.(["One", "Two", "Three"], ["one", "two", "three"])
end

function restart()
    global model
    model = Stipple.init(JSmethods(), debounce=1)
    on(model.x) do x
        model.btn_options[] = x == 0 ? btn_opt(["one", "two", "three"]) : btn_opt(string.(1:3))
    end
end

Stipple.js_methods(::JSmethods) = raw"""
    showNotif (m) {
        this.$q.notify({
            message: m,
            color: 'purple'
        });
        this.x = 1 - this.x;
    }
"""

btn_opt(label, value) = Dict(:label=>label, :value=>value)
btn_opt(values::Vector) = btn_opt.(values, values)

function ui()
    app = dashboard(vm(model),
        [
         heading("jsmethods"),
         row(cell(class="st-module", [
            p(button("Change text", @click("showNotif(\"New labels!\")"))),
            quasar(:btn__toggle, "", @bind("btntoggle"), toggle__color="primary", :multiple,
                options=:btn_options
            )
        ])),
        ], title = "jsmethods")

    html(app)
end

route("/", ui)
Genie.config.server_host = "127.0.0.1"
restart()
up(open_browser = true)

```

---

<div class="post-metadata">

**Author:** ![hhaensel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/hhaensel/32/1207_2.png) [@hhaensel](https://discourse.julialang.org/u/hhaensel)\
**Post date:** [March 4, 2021, 11:46pm UTC](https://discourse.julialang.org/t/how-to-use-btn-toggle-in-stipple/56501/7 "2021-03-04T23:46:20Z")

</div>

![grafik](https://global.discourse-cdn.com/julialang/original/3X/a/5/a57e6e7896ec415f8f07744f42cc9d3c6287cffc.png)