How do I show a tab panel only when a button is clicked in Shiny?

I have a basic shiny app and need help adding some additional functionality. Here is what the app does -

  • User uploads a csv file (use mtcars dataset in this case.

  • Click the "Submit" button.

  • The app validates the column names. If column names do not match the names in the list in the server, app shows an error message. If column names do match, app shows a success message, AND displays a "Click me!" button.

Where I need help. I would like to add the following functionality -

  1. When the app loads, I would like to have "Tab 1" hidden, until the "Click me!" button is clicked. So if that button is not clicked, which in turn means column names don't match the list, then "Tab 1" does not show.

  2. I would also like update the validation message to be "Success" and a green check mark (or any other appropriate success icon), if the column names are validated and "Error" and a red X (or any other appropriate error icon) if the column names are not validated. I know I should use some combination of taglists to achieve this but not sure how.

See reprex below -


library(shiny)
library(shinyjs)
library(tidyverse)
library(janitor)

ui <- fluidPage(
    useShinyjs(),
    navbarPage("My App",
               
               # home tab
               tabPanel("Home",
                        
                        # file input widget
                        fileInput("file1", "Choose CSV File"),
                        
                        # submit action button
                        actionButton("submit", "Submit"), hr(),
                        
                        # message output
                        uiOutput("validation_message"),
                        
                        # conditional action button
                        uiOutput("click_me")
                        
               ),
               
               # tab 1
               tabPanel("Tab 1",
                        h1("Tab 1 Content")
               )
    )
)

server <- function(input, output, session) {
    
    
    observeEvent(input$submit, handlerExpr = {
        
        # file validation
        req(input$file1)
        infile <- input$file1
        
        # get column names
        col_names <- read.csv(infile$datapath, nrows = 1) %>% clean_names()
        col_names <- colnames(col_names) 
        
        # validate column names
        if(all(c("mpg", "cyl", "disp", "hp", "drat", "wt", "qsec", "vs", "am", "gear", "carb") %in% col_names)) {
            result <- tags$i(class = "fa fa-check text-success", style = "font-size: 48px;")
            message <- tags$h2("Success ")
            show_button <- TRUE
        } else {
            result <- tags$i(class = "fa fa-times text-danger", style = "font-size: 48px;")
            message <- tags$h2("Fail ")
            show_button <- FALSE
        }
        
        # validate column names message 
        output$validation_message <- renderUI({tagList(message, result)})
    
        # action button to appear IF column names are validated
        output$click_me <- renderUI({
            if (show_button) {
                actionButton("click_me", "Click me!")
            } else {
                div()
            }
        })
        
    })
}

shinyApp(ui, server)







library(shiny)
library(shinyjs)
library(tidyverse)
library(janitor)

ui <- fluidPage(
  useShinyjs(),
  navbarPage("My App",
             id="mynav",
             
             # home tab
             tabPanel("Home",
                      
                      # file input widget
                      fileInput("file1", "Choose CSV File"),
                      
                      # submit action button
                      actionButton("submit", "Submit"), hr(),
                      
                      # message output
                      uiOutput("validation_message"),
                      
                      # conditional action button
                      uiOutput("click_me")
                      
             )

  )
)

server <- function(input, output, session) {
  
  
  observeEvent(input$submit, handlerExpr = {
    
    # file validation
    req(input$file1)
    infile <- input$file1
    
    # get column names
    col_names <- read.csv(infile$datapath, nrows = 1) %>% clean_names()
    col_names <- colnames(col_names) 
    
    # validate column names
    if(all(c("mpg", "cyl", "disp", "hp", "drat", "wt", "qsec", "vs", "am", "gear", "carb") %in% col_names)) {
      result <- icon("check", style = "color:green;font-size: 48px;")
      message <- tags$h2("Success ")
      show_button <- TRUE
    } else {
      result <-icon("times", style = "color:red;font-size: 48px;")
      message <- tags$h2("Fail ")
      show_button <- FALSE
    }
    
    # validate column names message 
    output$validation_message <- renderUI({tagList(message, result)})
    
    # action button to appear IF column names are validated
    output$click_me <- renderUI({
      if (show_button) {
        actionButton("click_me", "Click me!")
      } else {
        div()
      }
    })
    
    observeEvent(input$click_me,{
      shinyjs::disable(id="click_me")
      insertTab(inputId = "mynav",
                tab = 
      tabPanel("Tab 1",
               h1("Tab 1 Content")
      ))
    })
    
  })
}

shinyApp(ui, server)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.