Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

activate tabpanel from another tabpanel

Tags:

r

shiny

shinyjs

I want when i start the application the tab panel tab2 = desactivated, and will be activated once i click the button in the first tab panel tab1, i tried with shinyjs and through CSS properties but i can not do that.

thanks for your help Alex

library(shiny)
library(shinyjs)
runApp(list(
ui = bootstrapPage(
tabsetPanel(
  tabPanel(title = "tab1", id="tab1",
           br(),
           actionButton("click", label = "View tab2 panel")),
  tabPanel(title = "tab2", id="tab2")
)
),
server = function(input, output, session){
}
))
like image 742
Hazem HASAN Avatar asked Jul 29 '15 14:07

Hazem HASAN


2 Answers

You need a bit of javascript to do this. Here's a solution using shinyjs. I also included some css to make it clear when the tab is disabled

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;
}"

library(shiny)
library(shinyjs)
runApp(list(
  ui = fluidPage(
    useShinyjs(),
    extendShinyjs(text = jscode),
    inlineCSS(css),
    tabsetPanel(
      id = "navbar",
      tabPanel(title = "tab1", id = "tab1",
               br(),
               actionButton("btn", label = "View tab2 panel")),
      tabPanel(title = "tab2", id = "tab2")
    )
  ),
  server = function(input, output, session) {

    # disable tab2 on page load
    js$disableTab("tab2")

    observeEvent(input$btn, {
      # enable tab2 when clicking the button
      js$enableTab("tab2")
      # switch to tab2
      updateTabsetPanel(session, "navbar", "tab2")
    })
  }
))

You could also put the javascript in a separate file and use extendShinyjs(file = ...) instead of extendShinyjs(text = ...).

like image 138
DeanAttali Avatar answered Sep 26 '22 00:09

DeanAttali


Looking at this 5 years later, I had to make this change to Dean's code to make it work:

extendShinyjs(text = jscode)

becomes

extendShinyjs(text = jscode, functions = c('disableTab','enableTab'))
like image 38
Billy Avatar answered Sep 23 '22 00:09

Billy