Hide an element (box/tabs) in shiny dashboard

Question

I have a shiny dashboard which has a just a single text box on the landing page. The user enters an emailid which displays relevant data. This works fine. However I need a box/ tab Panel that greets the user on reaching the page and disappears when the user begins to enter text(emailid) in the text input. Is this possible?

output$introbox=renderUI(box(h3("Welcome to the page. Please enter your email id to proceed")),
                                conditionalPanel(condition=input.emailid=="")

The box is displayed on landing on the page but doesn't disappear on entering text.

Appreciate any help. Thanks

Answer 1

Oskar's answer is correct. But it does not actually use shinyjs, it includes all the JavaScript manually. You can use his answer, but here is a rewrite of his answer using shinyjs

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
  ),
  dashboardBody(
    useShinyjs(),
    div(id = "greetbox-outer",
      box( id ="greetbox",
           width  = 12, 
           height = "100%",
           solidHeader = TRUE, 
           status = "info",
           div(id="greeting", "Greeting here") 
      )
    ),
    box( id ="box",
         width  = 12, 
         height = "100%",
         solidHeader = TRUE, 
         status = "success",

         textInput("txtbx","Enter text: ")
    )
      )
    )

server <- shinyServer(function(input, output, session) {
  observeEvent(input$txtbx,{
    if (input$txtbx == "") return(NULL)
    hide(id = "greetbox-outer", anim = TRUE)
    print(input$txtbx)
  })
})

shinyApp(ui = ui, server = server) 

Answer 2

Yes this is possible and as daattali sugested shinyjs can help you with some standard Javascript tasks.

If you want to hide the shinydashboard box element you have to (from what I know) use some custom Javascript like this:

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <-dashboardPage(
  dashboardHeader(),
  dashboardSidebar(
  ),
  dashboardBody(
    tags$head(
      tags$script(
        HTML("
        Shiny.addCustomMessageHandler ('hide',function (selector) {
          $(selector).parent().slideUp();
        });"
        )
      )
    ),
    box( id ="greetbox",
         width  = 12, 
         height = "100%",
         solidHeader = TRUE, 
         status = "info",
         div(id="greeting", "Greeting here") 
    ),
    box( id ="box",
         width  = 12, 
         height = "100%",
         solidHeader = TRUE, 
         status = "success",

         textInput("txtbx","Enter text: ")
    )
  )
)

server <- shinyServer(function(input, output, session) {
  observeEvent(input$txtbx,{
    if (input$txtbx == "") return(NULL)
    session$sendCustomMessage (type="hide", "#greetbox")
    print(input$txtbx)
  })
})

shinyApp(ui = ui, server = server) 

The html layout for the box looks like:

<div class="box box-solid box-info">
    <div class="box-body" id="greetbox">
        <!-- Box content here -->
    </div>
</div>

And since we want to hide the whole box we have to hide the parent element to the id set in the box function, hence the jQuery snippet.

Answer 3

I had a similar issue, and my problem was with box(): if I changed box() to div(), then the show/hide options worked perfectly.

This solution is simpler, yet not so elegant as modifying the tags. Simply wrap your box() on a div() like this:

div(id = box1, box(...))
div(id = box2, box(...))

Then, you call to show/hide using the div's id.