Displaying or Hiding a Shiny Widget Based on Navbar Panel Selection

In this article, we will explore how to display or hide a shiny widget based on the selection of a navbar panel. We will cover two approaches: using JavaScript and utilizing the golem library for JS functions.

Introduction

Shiny is an R framework for building interactive web applications. Shiny dashboardPlus is a popular extension that adds additional features to the Shiny application, including support for custom templates, layouts, and widgets. One of the key features of shiny dashboardPlus is its ability to create dynamic navbar panels with tabbed interfaces.

In this article, we will focus on creating a simple Shiny application with a right sidebar widget. We want to display or hide this widget based on the selection of a specific navbar panel. In this example, we will assume that the navbar panel is labeled “Plot”.

Using JavaScript

To achieve this functionality using JavaScript, we can use the click event handler for the navbar tab elements. When the user clicks on a navbar tab element, we need to check if it matches our desired condition (in this case, selecting the “Plot” tab). If it does, we want to display the right sidebar widget.

Here is an example of how you can achieve this using JavaScript:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      navbarPage("Navbar!",
                 tabPanel("Plot"),
                 tabPanel("Summary")
      ), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          if ($(this).data("value") == "Plot"){
            $("#sl").show()
          } else {
            $("#sl").hide()
          }
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
  }
)

As you can see in the above code, we added a JavaScript script block to our Shiny UI. Inside this script, we use the jQuery library to select all elements with the class tab and attach an event handler to them. When a user clicks on one of these elements, we check if its data-value attribute matches our desired condition (in this case, “Plot”). If it does, we display the right sidebar widget using the show() method.

Using Golem for JS Functions

Another approach is to utilize the golem library for creating JavaScript functions. The golem library provides a way to execute custom JavaScript code within your Shiny application.

Here is an example of how you can achieve this using the golem library:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Plot"),
                 tabPanel("Summary")
      ), 
      tags$script(
        '$(document).ready(function(){
          $(\'a[data-toggle="tab"]').on("click", function(){
            var activeTab = $(this).data("value");
            if (activeTab == "Plot"){
              golem::invoke_js("showid", "sl")
            } else {
              golem::invoke_js("hideid", "sl")
            }
          });
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)

As you can see in the above code, we added a JavaScript script block to our Shiny UI. Inside this script, we use the golem library to execute a custom JavaScript function when the document is ready. We then attach an event handler to all elements with the class tab, and whenever one of these elements is clicked, we call the showid() or hideid() functions using the golem::invoke_js() method.

Conclusion

In this article, we explored how to display or hide a shiny widget based on the selection of a navbar panel. We covered two approaches: using JavaScript and utilizing the golem library for JS functions. Both approaches are effective ways to achieve this functionality in your Shiny application.

When choosing an approach, consider your specific use case and requirements. If you prefer a more straightforward solution that doesn’t require additional libraries, using JavaScript might be the better choice. However, if you need more advanced features or customization options, utilizing the golem library could provide a more robust solution.

Regardless of which approach you choose, make sure to follow best practices for secure coding and testing to ensure the stability and reliability of your Shiny application.

Last modified on 2023-06-17