Change color actionButton when button clicked Shiny R

Question

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

}

user_11168766 · Answer

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)

Change color actionButton when button clicked Shiny R

1 Answers