CODEWITHSUNDEEP
rshinyshinydashboardtabitem
Ron Lee
Ron Lee

Reputation: 33

ShinydashBoard rendered tabItem not showing properly

Now I have a issue with tabItem in shinydashboard. I have one menuitem in the sidebarmenu, what I want to do is that when I click the actionbutton and a new menuitem and a new tabitem will be added。 However, when I deploy the code, the strange thing is that the newly rendered tabitem content just appends itself to the first tabitem. I have already put tabitem in tabitems but I still got this problem. Below is the code:

library(shiny)
library(shinydashboard)

## ============================================ Define ui ==================================================

header1 <- dashboardHeader(
  title = "My Dynamic Menu"
) #dashboardHeader

# DYNAMIC UI
sidebar1 <- dashboardSidebar(
  sidebarMenu(
    menuItem('aa',tabName = 'aa')
  ) ,
  sidebarMenuOutput('bb')
) #dashboardSidebar
#
body1 <- dashboardBody(
  tabItems(
    tabItem(tabName = 'aa','aaa', actionButton('submit','Submit')),
    uiOutput('cc')
  ) #tabItems
) #dashboardBody

ui <- dashboardPage(header1, sidebar1, body1)

server <- function(input, output, session) {
  observeEvent(input$submit, {
    output$bb<-renderMenu({
      sidebarMenu(
        menuItem("Main", tabName = "main")
      )
    })
    
    output$cc<-renderUI({
      tabItem(tabName = "main",
              h2("Login"),
              textInput(inputId = "username1", label = "User name:", value = ""),
              passwordInput(inputId = "password1", label = "Password:"),
              actionButton(inputId = "loginbutton1", label = "Login")
      )
    })
  })
} #server
## ============================================ Run application ============================================
shinyApp(ui, server)

Thanks if anyone can help me address this problem.

Upvotes: 1

Views: 269

Answers (1)

henryn
henryn

Reputation: 1237

I've updated your example so that it should work. My solution is to set up your dashboardBody as if your dynamically rendered tab already exists with a tabItem call. Then just use renderUI on the contents of your new tab. It doesn't seem to matter that the 'main' menu item doesn't exist yet, you can still set up tabs in the body to deal with menu items that will be rendered on the server side.

I guess tabItems only expects calls to tabItem, so you'll get unexpected behaviour when passing it uiOutput.

The following code should give you the behaviour you expect:

library(shiny)
library(shinydashboard)

## ============================================ Define ui ==================================================

header1 <- dashboardHeader(
    title = "My Dynamic Menu"
) #dashboardHeader

# DYNAMIC UI
sidebar1 <- dashboardSidebar(
    sidebarMenu(
        menuItem('aa',tabName = 'aa')
    ) ,
    sidebarMenuOutput('bb')
) #dashboardSidebar
#
body1 <- dashboardBody(
    tabItems(
        tabItem(tabName = 'aa','aaa', actionButton('submit','Submit')),
        tabItem(tabName = "main", uiOutput('cc')) # put a tabItem here
    ) #tabItems
) #dashboardBody

ui <- dashboardPage(header1, sidebar1, body1)

server <- function(input, output, session) {
    observeEvent(input$submit, {
        output$bb<-renderMenu({
            sidebarMenu(
                menuItem("Main", tabName = "main")
            )
        })
        
        output$cc<-renderUI({ #render just the content of your tab here
            tagList(
                h2("Login"),
                textInput(inputId = "username1", label = "User name:", value = ""),
                passwordInput(inputId = "password1", label = "Password:"),
                actionButton(inputId = "loginbutton1", label = "Login")   
            )
        })
    })
} #server
## ============================================ Run application ============================================
shinyApp(ui, server)

Upvotes: 1

Related Questions