Hiding a menuItem after actionButton click

Question

I am building an app where the user is greeted by a landing page. Upon clicking an actionButton I wish for the user to be moved to a different menuItem and for the landing page to be hidden. shinyjs::hide() seems perfect for this purpose, but I can't seem to get the function to accept the name of the menuItem in question as the ID for the object to be hidden.

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

## UI ##

ui <- dashboardPage(

  skin = "black",
  dashboardHeader(
    title = "Template"
  ),

  dashboardSidebar(
    sidebarMenu(id = "sidebarmenu",
      menuItem("Landingpage", tabName = "landing", icon = icon("cog")),
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
      )
  ),

  dashboardBody(
    useShinyjs(),
    tabItems(
      tabItem(tabName = "landing", 
              h2("Landing Page"),
              actionButton(inputId = "confirm", 
                           label = "Confirm", 
                           icon = icon("ok-circle"))
              ),
      tabItem(tabName = "dashboard", 
              h2("Dashboard Content")
              )
    )
  )
)

## Server ##

server <- function(input, output, session) { 

  observeEvent(input$confirm, {

    shinyjs::hide(id = "landing")
    updateTabItems(session, "sidebarmenu", "dashboard")

  })
}

shinyApp(ui, server)

Here's my most recent attempt. Am I going about this the wrong way? Is shinyjs::hide() even the proper way of doing this?

Wilmar van Ommeren · Accepted Answer · 2019-07-25T12:52:41.917

A better way would be to re-render your menu after the user clicks the confirm button. You can do this with the renderMenu function.

library(shiny)
library(shinydashboard)
ui <- dashboardPage(

  skin = "black",
  dashboardHeader(
    title = "Template"
  ),

  dashboardSidebar(
    sidebarMenuOutput("sidebarmenu")
  ),

  dashboardBody(
    tabItems(
      tabItem(tabName = "landing",
              fluidRow(
              h2("Landing Page"),
              actionButton(inputId = "confirm",
                           label = "Confirm",
                           icon = icon("ok-circle")))
      ),
      tabItem(tabName = "dashboard",
              fluidRow(
              h2("Dashboard Content"))
      )
    )
  )
)

## Server ##

server <- function(input, output, session) { 
  output$sidebarmenu <- shinydashboard::renderMenu({
    sidebarMenu(id='sidebarmenu',
                menuItem("Landingpage", tabName = "landing", icon = icon("cog")),
                menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
    )}
  )

  observeEvent(input$confirm, {
    output$sidebarmenu <- shinydashboard::renderMenu({
      sidebarMenu(id='sidebarmenu',
                  menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")))
    })
    updateTabsetPanel(session, "sidebarmenu", "dashboard")
  })
}

shinyApp(ui, server)

Regarding shinyjs

You can check your ID by inspecting the element in a browser (right click+inspect on your element). In your case I can't find an ID, but you might wrap it in a div(id=shiny-tab-landing, sidebarMenu(...))

And shinyjs::hide(id = "shiny-tab-landing") will probably work.

very elegant with the `renderMenu` function! thank you for your help. The first solution does not work for me however. I can neither see the proper ID when inspecting, nor is the code executing correctly. There is no div, all I see is ` Landingpage ` — O René, Jul 25 '19 at 12:41
The first solution is not what you want, it was just me following up on your `shinyjs::hide` functionality. I will put it after the renderMenu option. — Wilmar van Ommeren, Jul 25 '19 at 12:52
Thanks for the `renderMenu` function, was not aware of it. Using shinyjs hide/show is quite convenient from my side, because it avoid repeting code (we need to rebuild the whole menu using `renderMenu`) whereas shinyjs would just need the id to target (see this SO for dashboard https://stackoverflow.com/questions/51946319/r-shinydashboard-show-hide-multiple-menuitems-based-on-user-input]). Unfortunately, I can't understand the id of the target in `dashboardPlus()`. — yeahman269, Mar 25 '21 at 11:40

Hiding a menuItem after actionButton click

1 Answers1