CODEWITHSUNDEEP
rshinytabsgolem
DaniCee
DaniCee

Reputation: 3207

Shiny: change to another tab greying out the current

I am trying to make a Shiny app using golem, but I am very new to this, and tried to do something I thought simple, but turns out it is not.

In my app_ui.R file I have a tab structure like this:

app_ui <- function(request) {
  tagList(
    # Leave this function for adding external resources
    golem_add_external_resources(),
    # Your application UI logic
    fluidPage(
      titlePanel("Debarcoding"),
      tabsetPanel(id = "mainTabset",
        tabPanel(value = "gating", "Gating",
                 htmltools::br(" "),
                 sidebarLayout(
                   sidebarPanel(
                     mod_gating_side_ui("gating_side_ui_1")),
                   mainPanel(
                     mod_gating_scatter_ui("gating_scatter_ui_1")))),
        tabPanel(value = "saving", "Saving",
                 htmltools::br(" "),
                 sidebarLayout(
                   sidebarPanel(
                     mod_saving_side_ui("saving_side_ui_1")),
                   mainPanel(
                     mod_saving_scatter_ui("saving_scatter_ui_1")))))
    )
  )
}

What I would want is only the gating tab to be active, while the saving one is disabled.

Then, in the side portion of the gating tab I would want a button that says FINISHED, so when I click it, the saving tab appears and the gating one becomes disabled.

For that purpose, I tried the following in my mod_gating_side.R file, but it does not work...

mod_gating_side_ui <- function(id){
  ns <- NS(id)
  tagList(
    shinyjs::useShinyjs(),
    shinyalert::useShinyalert(),

    actionButton(ns("finish_and_switch"),
                 "Finish gating")
 
  )
}

mod_gating_side_server <- function(id, r){
  moduleServer( id, function(input, output, session){
    ns <- session$ns

    # observer to finish gating and switch to saving tab
    observeEvent(input$finish_and_switch, {
        updateTabsetPanel(session, "mainTabset", "saving")
    })

  })
}

Any clue how to do this? What would be the best way to accomplish what I need? It doesn't need to be tabs, as long as there is one page active and one disabled, and a FINISH button that switches to the second page and disables the first. Is that possible? Thanks!

Upvotes: 0

Views: 460

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33442

I reduced your code to the needed minumum and modified the code from here to work on a tabsetPanel instead of a navbarPage.

Please check the following:

library(shiny)
library(shinyjs)

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

ui <- fluidPage(
  fluidPage(
    shinyjs::useShinyjs(),
    shinyjs::inlineCSS(css),
    titlePanel("Debarcoding"),
    tabsetPanel(id = "mainTabset",
                tabPanel(value = "gating", "Gating",
                         htmltools::br(" "),
                         sidebarLayout(
                           sidebarPanel(
                             p("gating_side_ui_1"),
                             actionButton("finish", "FINISH")
                           ),
                           mainPanel(
                             p("gating_scatter_ui_1")
                           ))),
                tabPanel(value = "saving", "Saving",
                         htmltools::br(" "),
                         sidebarLayout(
                           sidebarPanel(
                             p("saving_side_ui_1")
                           ),
                           mainPanel(
                             p("saving_scatter_ui_1")
                           ))))
  )
)

server <- function(input, output, session) {
  
  shinyjs::disable(selector = '.nav-tabs a[data-value="saving"')
  
  observeEvent(input$finish, {
    updateTabsetPanel(
      inputId = "mainTabset",
      selected = "saving"
    )
    shinyjs::enable(selector = '.nav-tabs a[data-value="saving"')
    shinyjs::disable(selector = '.nav-tabs a[data-value="gating"')
  })
}

shinyApp(ui, server)

Upvotes: 3

Related Questions