Observe Event to Hide Action Button in Shiny

5
votes

In my Shiny application, I am trying to include logic to show or hide an action button depending on whether another user input in ui.R is defined. I cannot use the uiOutput/renderUI functionality to do this because of some other complexities in the application.

My approach is to create an observer for an input and then accordingly show or hide the action button using CSS tags. I don't know CSS and hence the struggle.

This is the ui form in my application -

enter image description here

Now, I have a reactive function locationSpecified which returns whether the input location is empty or not and based on this I have to show or hide the "RUN" button.

Here is how I am adding the "RUN" button in ui.r ...

fluidRow(column(6, align="center", offset = 3, actionButton("action", "RUN")))

This is what I am trying in server.R (but obviously not working) ...

  observe({
    if(locationSpecified() == 1)
      tags$head(tags$style(type="button/css", ".btn {display: inline-block}"))
    if(locationSpecified() == 0)
      tags$head(tags$style(type="button/css", ".btn {display: none}"))
  })

I am hoping that fix to this is not that complicated and I would appreciate if you can tell me how to get this to work.

Thanks in advance,

Ashish

2
rshiny
The shinyjs package has a toggle function that does what you want. A conditionalPanel would also work. – Carl

2 Answers

11
votes

Got it to finally work using shinyjs. 

#ui
useShinyjs(),
fluidRow(column(6, align="center", offset = 3, actionButton("action", "RUN"))))

#server
observe({
  shinyjs::hide("action")

  if(locationSpecified())
     shinyjs::show("action")
})

Thanks carl for pointing me to shinyjs.

6
votes

You could use a conditionalPanel like so:

#UI
conditionalPanel(condition='input.location!=null && input.location!=""',
fluidRow(column(6, align="center", offset = 3, actionButton("action", "RUN"))))

Or you could use shinyjs's toggle:

#UI
useShinyjs() # include useShinyjs() somewhere in UI
#server
observe({ toggle(id="action", condition=!is.null(input$location))})