-
|
With the example from the dashboard tutorial - I am curious how to make sure the correct NAV group is selected when hitting the back or forward button in the browser or when refreshing the page, I.e., when you hit refresh while on the Analysis Page, of course NAV invokes the initialSelectedKey - in this case 'home', even if we are on the analysis page. I was wondering whether if someone is able to provide a small example on how to properly pass the SelectedKey element in the shiny.fluent, shiny.router framework, i suppose this has to happen somewhere in the server function, hasn´t it? For completeness, i´ll paste a version of the dashboard here.
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
I have the same question as well and hoping to implement using shinyjs::onclick() to update the selectedKey parameter of the nav bar when a user clicks on an interactive button. I'm imagining the solution would be something similar to base Shiny's updateNavbarPage() function, not sure if that can be adapted for shiny.fluent's Nav() function (presume not as it requires an inputID and selected parameter which are different from the shiny.fluent parameters). |
Beta Was this translation helpful? Give feedback.
-
|
Hi @mviertel, I've stripped down the example to bare minimum and implemented changing of navbar selection when using navigation buttons (back, forward) and refresh button. Please let us know if this is something you had in mind: library(shiny)
library(shiny.fluent)
library(shiny.router)
library(shinyjs)
library(glue)
library(dplyr)
library(purrr)
links <- data.frame(
route = c("/", "Analysis"),
name = c('Home', 'Analysis'),
url = c('#!/', '#!/Analysis'),
key = c('home', 'analysis'),
icon = c("home", NA)
)
router <- make_router(
route("/", h1("Home")),
route("Analysis", h1("Analysis"))
)
navigation <- tagList(
Nav(
groups = list(
list(
links = purrr::transpose(links)
)
),
initialSelectedKey = 'home',
styles = list(
root = list(
height = '100%',
boxSizing = 'border-box',
overflowY = 'auto'
)
)
)
)
ui <- fluentPage(
useShinyjs(),
div(
class = "grid-container",
div(class = "sidenav", navigation),
div(class = "main", router$ui)
)
)
server <- function(input, output, session) {
router$server(input, output, session)
shiny::observeEvent(shiny.router::get_page(), {
page_title <- shiny.router::get_page()
page_title <- links %>%
filter(route == page_title) %>%
pull(name)
runjs(glue("$('.ms-Nav-link[title={page_title}]')[0].click()"))
})
}
shinyApp(ui, server)@Tbwheeler94 please take a look at this example how we can update runjs(glue("$('.ms-Nav-link[title={page_title}]')[0].click()"))I'm using page name to select the appropriate navigation button, but probably we could also use other attribute of the link as e.g. |
Beta Was this translation helpful? Give feedback.
-
|
@jakubsob - worked for me, thank you! |
Beta Was this translation helpful? Give feedback.
-
|
@jakubsob - I've been having trouble implementing this for all of my nav items. The code you provided works correctly for nav items with no spaces in the name, but for nav items with spaces, it appears that the page_title object is not being run correctly by the line of js you posted above (for example the "Home", "Methods", and "Contact" pages work, but "Analysis Page" does not. I've tried with a couple others that have spaces and they do not work either). I presume it has something to do with a string object in R not being read correctly by runjs() and perhaps there is a simple js solution. `links <- data.frame( shiny::observeEvent(shiny.router::get_page(), { |
Beta Was this translation helpful? Give feedback.
-
|
@Tbwheeler94 That's correct, this approach doesn't work with page titles that contain spaces in them. To make the CSS selector work we need to wrap the name in quotes runjs(glue("$('.ms-Nav-link[title=\"{page_title}\"]')[0].click()"))instead of runjs(glue("$('.ms-Nav-link[title={page_title}]')[0].click()"))Here's a whole example that takes into account pages which have spaces in their names: library(shiny)
library(shiny.fluent)
library(shiny.router)
library(shinyjs)
library(glue)
library(dplyr)
library(purrr)
links <- data.frame(
route = c("/", "analysis_page"),
name = c('Home', 'Analysis Page'),
url = c('#!/', '#!/analysis_page'),
key = c('home', 'analysis'),
icon = c("home", NA)
)
router <- make_router(
route("/", h1("Home")),
route("analysis_page", h1("Analysis Page"))
)
navigation <- tagList(
Nav(
groups = list(
list(
links = purrr::transpose(links)
)
),
initialSelectedKey = 'home',
styles = list(
root = list(
height = '100%',
boxSizing = 'border-box',
overflowY = 'auto'
)
)
)
)
ui <- fluentPage(
useShinyjs(),
div(
class = "grid-container",
div(class = "sidenav", navigation),
div(class = "main", router$ui)
)
)
server <- function(input, output, session) {
router$server(input, output, session)
shiny::observeEvent(shiny.router::get_page(), {
page_title <- shiny.router::get_page()
print(page_title)
page_title <- links %>%
filter(route == page_title) %>%
pull(name)
print(page_title)
runjs(glue("$('.ms-Nav-link[title=\"{page_title}\"]')[0].click()"))
})
}
shinyApp(ui, server) |
Beta Was this translation helpful? Give feedback.
-
|
@jakubsob - makes sense, just implemented and everything is working now, thank you! |
Beta Was this translation helpful? Give feedback.
Hi @mviertel,
I've stripped down the example to bare minimum and implemented changing of navbar selection when using navigation buttons (back, forward) and refresh button. Please let us know if this is something you had in mind: