Manoj Agrawal
Manoj Agrawal

Reputation: 815

R Shinydashboard Showing/Hiding UI Elements based on Tab selection

I am struggling with a requirement if someone can help. I have to show/hide some elements on the Dashboardsidebar based on the tabpanel selection by the user. Here is part of the UI code to give you an idea of the structure of my app. I need to show fourthoutput, fifthout and download button only on tabpPanel 2.

ui <- dashboardPage(
  dashboardHeader(title = "My App"),
  dashboardSidebar(
    width = 350,
    fileInput(
      'file1',
      'Upload Items List',
      accept = c('text/csv',
                 'text/comma-separated-values,text/plain',
                 '.csv')
    ),
    fluidRow(column(
      width = 2,
      offset = 1,
      actionButton("goButton", "Submit")
    )),
    br(),
    br(),
    uiOutput("FirstOutput"),
    uiOutput("SecondOutput"),
    uiOutput("ThirdOutput"),
    uiOutput("FourthOutput"),
    uiOutput("FifthOutput"),

      fluidRow(column(
        width = 2,
        offset = 1,
        downloadButton('downloadData', 'Download')))
  ),
  dashboardBody(
    tags$style(
      type = "text/css",
      ".shiny-output-error { visibility: hidden; }",
      ".shiny-output-error:before { visibility: hidden; }"
    ),

    tabsetPanel(
      type = "tabs",

      tabPanel("1", fluidRow(box(
        plotlyOutput("pie1")
      ),
      box(
        plotlyOutput("barplot1")
      )),
      fluidRow(box(
        plotlyOutput(outputId = "barplot2")
      ))),

      tabPanel("2",
        div(style = 'overflow-x: scroll', dataTableOutput("contents"))
      )

    )
  )
)

thanks, Manoj Agrawal

Upvotes: 5

Views: 2279

Answers (1)

HubertL
HubertL

Reputation: 19544

You have to set an id to the tabsetPanel and a value to each tabPanel. Then you can use input.tabsetId in conditionalPanel to hide/show the button:

...
conditionalPanel(
  condition = "input.tabs == 'show'",
  fluidRow(column(
    width = 2,
    offset = 1,
    downloadButton('downloadData', 'Download'))))
),
...

...
tabsetPanel( id="tabs",
...
tabPanel("1", value="show",
...
tabPanel("2", value="hide",
...

Upvotes: 6

Related Questions