Search code examples
rshinyreactive-programming

Change color actionButton when button clicked Shiny R


I have an actionButton defined in the UI as uiOutput("DartSearchAdv"). I would like the button to change color when input$target_min_ab is changed. And when input$DartSearchAdv is pressed, I want the color to go back to default.

I've tried implementing the suggestion here, and the color change will work as desired, but certain outputs generated from the button press are hidden ("mainPanelDST"). I can try getting them to appear if I do show("mainPanelDST"), but then the color change doesn't take place, or the button will disappear until input$target_min_ab is interacted with again.

Below is the relevant code from the server.

global <- reactiveValues(clicked = FALSE)

# Desired style for when button is clicked
defaultColor = 'padding:10px; font-size:120%;
         color: white; background-color: #3E668E;
         border-color: #2C3E50'

# Desired style for when a setting is changed
updateColor = 'padding:10px; font-size:120%;
       color: white; background-color: #428BCA;
       border-color: #95A5A6'

# render the button
output$DartSearchAdv <- renderUI({
      if (global$clicked){
        actionButton("DartSearchAdv", "Update Search",
                     style = defaultColor)
      } else {
        actionButton("DartSearchAdv", "Update Search",
                     style = updateColor)
      }
      
    })

And here are the inputs that should change the color

# input that changes color to updateColor
observeEvent(input$target_min_ab,{
  rv$target_min_ab = input$target_min_ab/100; 
  global$clicked = FALSE; 
})

# input that changes color to default
trigger_button2 <- eventReactive(input$DartSearchAdv, {
# Do stuff in here
global$clicked = TRUE

}

Solution

  • Perhaps this:

    library(shiny)
    
    # Desired style for when button is clicked
    defaultColor <- "padding:10px; font-size:120%;
             color: white; background-color: #3E668E;
             border-color: #2C3E50"
    
    # Desired style for when a setting is changed
    updateColor <- "padding:10px; font-size:120%;
           color: white; background-color: #428BCA;
           border-color: #95A5A6"
    
    
    ui <- fluidPage(
      uiOutput("DartSearchAdv"), # will be an actionButton
      numericInput("target_min_ab", "Target Min Ab", 1),
      actionButton("DartSearchAdv", "DartSearchAdv")
    )
    
    
    server <- function(input, output, session) {
      global <- reactiveValues(clicked = FALSE)
      rv <- reactiveValues(target_min_ab = NULL)
    
    
      # render the button
      output$DartSearchAdv <- renderUI({
        if (global$clicked) {
          actionButton("DartSearchAdv", "Update Search",
            style = defaultColor
          )
        } else {
          actionButton("DartSearchAdv", "Update Search",
            style = updateColor
          )
        }
      })
    
    
      observeEvent(input$target_min_ab,
        {
          rv$target_min_ab <- input$target_min_ab / 100
          global$clicked <- TRUE
        },
        ignoreInit = TRUE
      )
    
      observeEvent(input$DartSearchAdv, {
        global$clicked <- FALSE
      })
    }
    
    
    
    shinyApp(ui, server)
    

    enter image description here