Move to other tabPanels only after uploading data in other tabPanel in a shiny app

Question

I have the shiny app below in which the user lands on the Upload data panel. I want the user not to be able to move to any of the other 2 tabpanels if he has not uploaded both files that are needed in the Upload data tab.

library(shiny)

#ui.r
ui <- fluidPage(
  # App title ----
  titlePanel("Tabsets"),
  
  # Sidebar layout with input and output definitions ----
  sidebarLayout(
    
    # Sidebar panel for inputs ----
    sidebarPanel(
    ),
    
    # Main panel for displaying outputs ----
    mainPanel(
      tabsetPanel( id="tabset",
                   tabPanel("Upload data", value="tab0",
                            fileInput("file1", "Choose CSV File",
                                      multiple = TRUE,
                                      accept = c("text/csv",
                                                 "text/comma-separated-values,text/plain",
                                                 ".csv")),
                            fileInput("file2", "Choose CSV File",
                                      multiple = TRUE,
                                      accept = c("text/csv",
                                                 "text/comma-separated-values,text/plain",
                                                 ".csv"))),
                   tabPanel("Resource Allocation", value="tab1"),
                   tabPanel("Time Series", value="tab2")
      )
    )
  )
)
#server.r

server = function(input, output) {
  
 
}

shinyApp(ui, server)

Tschösi · Accepted Answer · 2021-03-31T15:20:40.727

Here is a working example (mostly taken from here)

library(shiny)
library(shinyjs)

jscode <- "
shinyjs.disableTab = function(name) {
  var tab = $('.nav li a[data-value=' + name + ']');
  tab.bind('click.tab', function(e) {
    e.preventDefault();
    return false;
  });
  tab.addClass('disabled');
}

shinyjs.enableTab = function(name) {
  var tab = $('.nav li a[data-value=' + name + ']');
  tab.unbind('click.tab');
  tab.removeClass('disabled');
}
"

css <- "
.nav li a.disabled {
  background-color: #aaa !important;
  color: #333 !important;
  cursor: not-allowed !important;
  border-color: #aaa !important;
}"

#ui.r
ui <- fluidPage(
  useShinyjs(),
  extendShinyjs(text = jscode, functions = c("disableTab","enableTab")),
  inlineCSS(css),
  # App title ----
  titlePanel("Tabsets"),
  
  # Sidebar layout with input and output definitions ----
  sidebarLayout(
    
    # Sidebar panel for inputs ----
    sidebarPanel(
    ),
    
    # Main panel for displaying outputs ----
    mainPanel(
      tabsetPanel( id="tabset",
                   tabPanel("Upload data", value="tab0",
                            fileInput("file1", "Choose CSV File",
                                      multiple = TRUE,
                                      accept = c("text/csv",
                                                 "text/comma-separated-values,text/plain",
                                                 ".csv")),
                            fileInput("file2", "Choose CSV File",
                                      multiple = TRUE,
                                      accept = c("text/csv",
                                                 "text/comma-separated-values,text/plain",
                                                 ".csv"))),
                   tabPanel("Resource Allocation", value="tab1"),
                   tabPanel("Time Series", value="tab2")
      )
    )
  )
)
#server.r

server = function(input, output) {
  print("test")
  js$disableTab("tab1")
  js$disableTab("tab2")
 
 observe({
  req(input$file1, input$file2)
  js$enableTab("tab1")
  js$enableTab("tab2")
})
}

shinyApp(ui, server)

I made a little different here based on your answer. https://stackoverflow.com/questions/66895767/move-to-other-tabpanels-only-after-uploading-files-with-specific-csv-names-in-ot — firmo23, Mar 31 '21 at 21:49

Move to other tabPanels only after uploading data in other tabPanel in a shiny app

1 Answers1