Shiny Dashboard: Reset the conditional panel state when we navigate across different tabitems

Question

I have the following code in which there are various conditional panels in the dashboard. If we navigate from one conditional panel to next in dashboard and then go to widget and finally come back to dashboard, the dashboard is in the previous state. I want the dashboard to be refreshed(reset to original condition) when I come back from another tab panel. Is is possible to do that?

library(shiny)
library(shinydashboard)
library(maps)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(sidebarMenu(
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", tabName = "widgets", icon = icon("th"))
  )),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
      tags$script("
                  Shiny.addCustomMessageHandler('resetInputValue', function(variableName){
                  Shiny.onInputChange(variableName, null);
                  });
                  "),

      conditionalPanel(
        condition <- "input.link_click  === undefined || input.link_click === null",
        leafletOutput("Map", width = 1000, height = 500)

      ),


      conditionalPanel(
        condition <- "(input.link_click_Site  === undefined || input.link_click_Site === null) && (input.link_click  !== undefined && input.link_click !== null)",

        leafletOutput("CountryMap", width = 1000, height = 500)

      ),
      conditionalPanel(
        condition <- "(input.link_click_Site  !== undefined && input.link_click_Site !== null)",

        h3("Plots related to site chosen"),
        textOutput(outputId = "Check"),
        actionButton("Back", "Back")
      )
     ),
     tabItem(tabName = "widgets",
             h3("This is widget page")

             )
     )
  )
)


server <- function(input, output, session){
  Country = map("world", fill = TRUE, plot = FALSE, regions="USA")
  output$Map <- renderLeaflet({
    leaflet(Country) %>% addTiles() %>%  setView(0, 0,  zoom = 2)%>%
      #leaflet(target) %>% addTiles() %>%
      addPolygons(fillOpacity = 0.6,
                  fillColor = 'blue',
                  smoothFactor = 0.5, stroke = TRUE, weight = 1, popup =  paste("<b>", "USA", "</b><br>",
                                                                                actionLink(inputId = "View", 
                                                                                           label = "View Details", 
                                                                                           onclick = 'Shiny.onInputChange(\"link_click\",  Math.random())')))
  })

  output$CountryMap <- renderLeaflet({

    leaflet(Country) %>% addTiles() %>%   
      fitBounds(Country$range[1], Country$range[3], Country$range[2], Country$range[4])%>%
      addMarkers(lng = -71.03 , lat = 42.37, popup = paste("<b>", "Boston", "</b><br>",
                                                           actionLink(inputId = "View", 
                                                                      label = "View Details", 
                                                                      onclick = 'Shiny.onInputChange(\"link_click_Site\",  Math.random())')))
  })

  observeEvent(input$link_click_Site, {
    output$Check <- renderText("Success")

  })

  observeEvent(input$Back, {
    session$sendCustomMessage(type = 'resetInputValue', message = "link_click_Site")
    session$sendCustomMessage(type = 'resetInputValue', message = "link_click")
  })

}


shinyApp(ui =ui, server = server)

score 1 · Accepted Answer · answered Jun 18 '16 at 14:17

The same code that is used to reset your view when you click on the "Back" button can be used to reset the view whenever panels are switched.

You just have to give your sidebar an id, and then you can listen to this id's input, which tells you which panel is active. The solution below is a minimal fix with just two additions: sidebarMenu gets an input id, id = "mySidebar" and the observeEvent gets to observe a second variable input$mySidebar.

library(shiny)
library(shinydashboard)
library(maps)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(sidebarMenu(id = "mySidebar",
    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
    menuItem("Widgets", tabName = "widgets", icon = icon("th"))
  )),
  dashboardBody(
    tabItems(
      # First tab content
      tabItem(tabName = "dashboard",
      tags$script("
                  Shiny.addCustomMessageHandler('resetInputValue', function(variableName){
                  Shiny.onInputChange(variableName, null);
                  });
                  "),

      conditionalPanel(
        condition <- "input.link_click  === undefined || input.link_click === null",
        leafletOutput("Map", width = 1000, height = 500)

      ),


      conditionalPanel(
        condition <- "(input.link_click_Site  === undefined || input.link_click_Site === null) && (input.link_click  !== undefined && input.link_click !== null)",

        leafletOutput("CountryMap", width = 1000, height = 500)

      ),
      conditionalPanel(
        condition <- "(input.link_click_Site  !== undefined && input.link_click_Site !== null)",

        h3("Plots related to site chosen"),
        textOutput(outputId = "Check"),
        actionButton("Back", "Back")
      )
     ),
     tabItem(tabName = "widgets",
             h3("This is widget page")

             )
     )
  )
)


server <- function(input, output, session){
  Country = map("world", fill = TRUE, plot = FALSE, regions="USA")
  output$Map <- renderLeaflet({
    leaflet(Country) %>% addTiles() %>%  setView(0, 0,  zoom = 2)%>%
      #leaflet(target) %>% addTiles() %>%
      addPolygons(fillOpacity = 0.6,
                  fillColor = 'blue',
                  smoothFactor = 0.5, stroke = TRUE, weight = 1, popup =  paste("<b>", "USA", "</b><br>",
                                                                                actionLink(inputId = "View", 
                                                                                           label = "View Details", 
                                                                                           onclick = 'Shiny.onInputChange(\"link_click\",  Math.random())')))
  })

  output$CountryMap <- renderLeaflet({

    leaflet(Country) %>% addTiles() %>%   
      fitBounds(Country$range[1], Country$range[3], Country$range[2], Country$range[4])%>%
      addMarkers(lng = -71.03 , lat = 42.37, popup = paste("<b>", "Boston", "</b><br>",
                                                           actionLink(inputId = "View", 
                                                                      label = "View Details", 
                                                                      onclick = 'Shiny.onInputChange(\"link_click_Site\",  Math.random())')))
  })

  observeEvent(input$link_click_Site, {
    output$Check <- renderText("Success")

  })

  observeEvent({input$Back; input$mySidebar} , {
    session$sendCustomMessage(type = 'resetInputValue', message = "link_click_Site")
    session$sendCustomMessage(type = 'resetInputValue', message = "link_click")
  })

}


shinyApp(ui =ui, server = server)

This works when I go to widget tab and then come back to dashboard tab. Is there a way in which the dashboard tab gets reset when I am in that tab and click the dashboard tab item? — SBista, Jun 20 '16 at 14:00
@SBista If I understand correctly, you want the **Dashboard Tab** button to function like the **Back** button. That can be done in multiple ways. Best would be an onclick event for **all** the sidebar buttons. I will post a solution later this afternoon. — K. Rohde, Jun 20 '16 at 14:47

Shiny Dashboard: Reset the conditional panel state when we navigate across different tabitems

1 Answers1

Linked