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

I don't entirely understand what you want, but take a look at `shinyjs::toggle` (or `shinyjs::hide` and `shinyjs::show`), maybe it'll help — DeanAttali, Oct 09 '15 at 01:23

score 12 · Accepted Answer · answered Oct 14 '15 at 20:30

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)

How this can be extended to server option, I want to hide option for particular user? — Kush Patel, Apr 11 '16 at 21:42

score 4 · Answer 2 · answered Oct 14 '15 at 19:51

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.

Good answer, though you're doing all the javascript yourself. I added another answer that builds on yours and just replaces the javascript with shinyjs — DeanAttali, Oct 14 '15 at 20:31

score 4 · Answer 3 · answered Feb 25 '19 at 16:25

4

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.

answered Feb 25 '19 at 16:25

Carrol

1,225
1
16
29

1

Thanks for this! Small but very important detail! Without it, a part of the box might still show! – Luc May 07 '19 at 03:37

Hide an element (box/tabs) in shiny dashboard

3 Answers3

Linked