CODEWITHSUNDEEP
rshinyshinydashboard
kosk
kosk

Reputation: 282

How to add more tabs and select-input sub-tab in shinydashboard app

I am having a problem with building an UI for shinydashboard app that has 2 tabs and has select-input sub-tab in the first tab. The app works fine when there are no tabs, i.e. when there is only select-input menu. The code that works is this:

ui <- dashboardPage(
dashboardHeader(title = "HAMAG BICRO: 2016 - 2022"),
dashboardSidebar(
   selectInput("instrumenti", "Instrumenti",
                                choices = Instrumenti)),
dashboardBody(
          fluidRow(
            box(width=12,
                title = "Geografski prikaz ulaganja",
                leafletOutput("mymap", height=550))),
          fluidRow(  
            box(title ="Odnos ulaganja i stanovništva", plotlyOutput("scatter", width=4,height=220)),
            box(title ="Ulaganje po stanovniku", plotlyOutput("bar", width=6,height=250)),
            tags$head(tags$style(HTML(' /* body */
                            .content-wrapper, .right-side {
                            background-color:   #FFFFFF;
                            }'
                                      ))))))`

With this code (without tabs), I get this app: [![enter image description here][1]][1]

However, I need more tabs in the app so I tried to do something like this:

ui <- dashboardPage(
dashboardHeader(title = "HAMAG BICRO: 2016 - 2022"),
dashboardSidebar(
   sidebarMenu(
     menuItem("Geo prikaz", tabName = "Geografski prikaz", 
           menuItem(selectInput("instrumenti", "Instrumenti",
                                choices = Instrumenti))),
     menuItem("Vremenski prikaz", tabName = "Vremenski prikaz"))),
dashboardBody(
   tabItems(
  # First tab content
     tabItem(tabName = "Geografski prikaz",
       fluidRow(
         box(width=12, title = "Geografski prikaz ulaganja", leafletOutput("mymap", height=550))),
       fluidRow(  
          box(title ="Odnos ulaganja i stanovništva", plotlyOutput("scatter", width=4,height=220)),
           box(title ="Ulaganje po stanovniku", plotlyOutput("bar", width=6,height=250)),
              tags$head(tags$style(HTML(' /* body */
                            .content-wrapper, .right-side {
                            background-color:   #FFFFFF;
                            }'
))))),
 # Second tab content
tabItem(tabName = "Vremenski prikaz",
       h2("napuniti")))))

I do get more or less correct UI, see here: [![enter image description here][2]][2]

But, I don't have any content in it. Can anybody see the problem? tnx [1]: https://i.sstatic.net/9Kxmz.png [2]: https://i.sstatic.net/0xwPl.png

Upvotes: 0

Views: 352

Answers (1)

Lucca Nielsen
Lucca Nielsen

Reputation: 1894

The problem is on your tab ID's names. Removing the space should solve !

the menuItem and tabItem names must match and they shouldnt have white space!

The best pratice is to choose a small lower case name to identify the tabs, but the only MUST is to not have space. So you can try to change "Geografski prikaz" to "Geografski_prikaz" and "Vremenski prikaz" to "Vremenski_prikaz"

Upvotes: 1

Related Questions