change color actionButton Shiny R

Question

i'm trying to figure out a way to get an actionButton to change color (and possibly other style elements as well.) The objective is very general and I'll use this for many button responses throughout my complex shinyDashboard App. Simply said: if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button, the button should change color.

I usually code my buttons in Shiny like this one:

  actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"), 
                       style = "color: white; 
                       background-color: #35e51d; 
                       position: relative; 
                       left: 3%;
                       height: 35px;
                       width: 35px;
                       text-align:center;
                       text-indent: -2px;
                       border-radius: 6px;
                       border-width: 2px")),

I've been browsing my ass off, but no luck to something that works. I have been looking at shinyjs by @Dean Attali to do this, but I can only get it to work to change the background of the printed text as in the example below. The part using ToggleClass or AddClass doesn't work for actionButton("x", "y") it seems. I've also tried to use updateActionButton from the shiny package itself, but this does not seem to allow style = "..." to be included in the command.

library(shiny)
library(shinyjs)
library(shinyBs)
if (interactive()) {
  shinyApp(
    ui = fluidPage(
      useShinyjs(),
      inlineCSS(list(.red = "background: red")),
      inlineCSS(list(.blue = "style = 'background-color: blue'")),
      actionButton("checkbox", "Make it red"),
      bsButton("checkbox2", "Make me blue"),
      p(id = "element", "Watch what happens to me")
    ),
    server = function(input, output) {
      observe({
        toggleClass(id = "element", class = "red",
                    condition = input$checkbox)
      })
      observe({
        toggleCssClass(id = "checkbox2", class = ".blue",
                    condition = input$checkbox)
      })
    }
  )
}

The demo model of shinyjs is found here: http://deanattali.com/shinyjs/overview#demo and it looks as if the toggleClass works there for the button with id "btn" but there is no code example directly to be found, and the indirect example from another section of the shinyjs page doesn't seem to work.

Option 3 I tried to have the style = "background-color: ....read R variable" part access an R variable that contains the color name, i.e. mycolor <- "red", but that doesn't work either, and my knowledge of javascript is too limited to figure out how to make that work.

So, .... if anyone has an idea how to make the color switching work with shinyjs, or with another method that works with my button coded above, I would highly appreciate it, and grant you my eternal gratitude. (been stuck on this for weeks now with this issue)

Mark

p.s. i've looked into bsButtons as well but they are too limited for what I want with the default class options.

Answer 1

That should be doable in "pure" shiny: Use renderUI() to create the button and insert conditions to check if the button was clicked already.

I decided to store the information (whether a button was clicked) within a reactiveVariable as you wrote that you plan to trigger the color change "if a button is clicked, or a specific element (i.e. inputslider) changes that is linked to a button". So you could also change the global$clicked from other inputs.

library(shiny)
shinyApp(
  ui = fluidPage(
    uiOutput("button")
  ),
  server = function(input, output) {
    global <- reactiveValues(clicked = FALSE)

    observe({
      if(length(input$RunFullModel)){
        if(input$RunFullModel) global$clicked <- TRUE
      } 
    })

    output$button <-  renderUI({
      if(!is.null(input$RunFullModel) & global$clicked){
        actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"), 
                     style = "color: white; 
                     background-color: #35e51d; 
                     position: relative; 
                     left: 3%;
                     height: 35px;
                     width: 35px;
                     text-align:center;
                     text-indent: -2px;
                     border-radius: 6px;
                     border-width: 2px")        
      }else{
        actionButton(inputId= "RunFullModel", label =icon("tree-deciduous", lib = "glyphicon"))
      }

    })
  }
)