Enable switching between pages without {shiny.router}

[kyle-power]

Referencing: https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html#adding-shiny-router

Is it possible to enable switching between pages/modules without using the {shiny.router} functions? I understand that using {shiny.router} also provides "shareable URLs to individual pages", but this isn't always a desired feature.

In my specific use case, I am utilizing the {golem} package for the application framework, which promotes the function shiny::moduleServer() and requires the use of namespace functions NS() . This becomes difficult to accomplish since the local namespace function ns() is only available from within each respective ui function, but the shiny.router::make_router() function requires the ui to be available in the global environment.

For example, using the shiny.fluent demos provided, when defining the filters stack...

filters <- Stack(
    tokens = list(childrenGap = 10),
    Stack(
      tokens = list(childrenGap = 10), horizontal = TRUE,
      DatePicker(ns("fromDate"), value = as.Date('2020/01/01'), label = "From date"),
      DatePicker(ns("toDate"), value = as.Date('2020/12/31'), label = "To date")
    ),
    Label("Filter by sales reps"),
    NormalPeoplePicker(ns("selectedPeople"), options = shiny.fluent::fluent_people,
                       pickerSuggestionsProps = list(
                         suggestionsHeaderText = 'Matching people', mostRecentlyUsedHeaderText = 'Sales reps',
                         noResultsFoundText = 'No results found', showRemoveButtons = TRUE
                       )
    ),
    Slider(ns("slider"),
           value = 0, min = 0, max = 1000000, step = 100000,
           label = "Minimum amount",
           valueFormat = JS("function(x) { return '$' + x}"),
           snapToStep = TRUE
    ),
    Toggle(ns("closedOnly"), value = TRUE, label = "Include closed deals only?")
  )

Since the controls (toggle, people picker, etc) need their input_id to be wrapped in ns(), this needs to be called beforehand (where filters is nested in the mod_test_ui function)

mod_test_ui <- function(id){
  ns <- NS(id)
  filters <- Stack(
      tokens = list(childrenGap = 10),
      Stack(
        tokens = list(childrenGap = 10), horizontal = TRUE,
        DatePicker(ns("fromDate"), value = as.Date('2020/01/01'), label = "From date"),
        DatePicker(ns("toDate"), value = as.Date('2020/12/31'), label = "To date")
      ),
      Label("Filter by sales reps"),
      NormalPeoplePicker(ns("selectedPeople"), options = shiny.fluent::fluent_people,
                         pickerSuggestionsProps = list(
                           suggestionsHeaderText = 'Matching people', mostRecentlyUsedHeaderText = 'Sales reps',
                           noResultsFoundText = 'No results found', showRemoveButtons = TRUE
                         )
      ),
      Slider(ns("slider"),
             value = 0, min = 0, max = 1000000, step = 100000,
             label = "Minimum amount",
             valueFormat = JS("function(x) { return '$' + x}"),
             snapToStep = TRUE
      ),
      Toggle(ns("closedOnly"), value = TRUE, label = "Include closed deals only?")
    )

Since the namespace id is required, I cannot define this object outside of the function in the global environment, But if the ui is not available in the global, then shiny.router::make_router() cannot route the page.

Thoughts?

[kyle-power]

not sure if I need to tag people in order to get alert @marekrogala

[marekrogala]

thanks, got the notification now. We'll take a look into that! (cc @kamilzyla)

[kamilzyla]

Hi @kyle-power, thanks for reaching out! I hope these examples help. LMK if you have additional questions.

Using Nav without shiny.router

It might be slightly obscure, but you can use the Nav component without shiny.router.

library(glue)
library(shiny)
library(shiny.fluent)

handleLinkClick <- function(inputId) {
  JS(glue("(e, link) => Shiny.setInputValue('{inputId}', link.key)"))
}

shinyApp(
  ui = withReact(
    Nav(
      groups = list(
        list(links = list(
          list(name = 'Home', key = 'home', icon = 'Home'),
          list(name = 'Appsilon', key = 'appsilon', icon = 'Accounts')
        ))
      ),
      onLinkClick = handleLinkClick("link")
    )
  ),
  server = function(input, output) {
    observe(showNotification(req(input$link)))
  }
)

Please note, that Nav on its own doesn't provide any way of changing the visible page. It simply sets the URL or triggers an event, and you need to somehow use that to change the view. One option is to use shiny.router - check below to learn how to use it with modules.

Using shiny.router with modules

Putting shiny.fluent aside, please note that you can actually use shiny.router with modules easily:

library(shiny)
library(shiny.router)

helloUI <- function(id) {
  ns <- NS(id)
  tagList(
    actionButton(ns("click"), "Say Hello")
  )
}

helloServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    observeEvent(input$click, showNotification("Hello!"))
  })
}

byeUI <- function(id) {
  ns <- NS(id)
  tagList(
    actionButton(ns("click"), "Say Bye")
  )
}

byeServer <- function(id) {
  moduleServer(id, function(input, output, session) {
    observeEvent(input$click, showNotification("Bye!"))
  })
}

router <- make_router(
  route("/", helloUI("apples")),
  route("bye", byeUI("bananas"))
)

shinyApp(
  ui = fluidPage(
    h4("Navigation"),
    p(a(href = "#!/", "Hello Page")),
    p(a(href = "#!/bye", "Bye Page")),
    h4("Content"),
    router$ui
  ),
  server = function(input, output) {
    router$server()
    helloServer("apples")
    byeServer("bananas")
  }
)

[marekrogala]

@kyle-power does that answer your question? Is there anything else we can help with?

[kyle-power]

@marekrogala @kamilzyla
I am still struggling to implement this technique using the {golem} framework.
The ui and server components are the same as in your example, however the actual ui argument in shinyApp() is different.

router <- make_router(
    route(path = "/", ui = mod_homepage_ui(id = "homepage_ui_1"))
)

shinyApp(
    ui = tagList(
      # Leave this function for adding external resources
      golem_add_external_resources(),
      # List the first level UI elements here
      router$ui
    ),
    server = function( input, output, session ) {
      # List the first level callModules here
      router$server()
      moduleServer(id = "homepage_ui_1", module = mod_homepage_server)
    }
)

Where mod_homepage_ui returns a fluentPage() with layout() and makePage() . Is the issue because the ui is a tagList? The reason why tagList() is used is to add resource paths to the head to access the www folder, etc.
Or should I only be returning a mainUI div component with router$ui instead of a complete fluentPage and then later build the page with layout()?

[kyle-power]

@marekrogala @kamilzyla

It seems like the issue was having each ui component return an entire fluentPage(). Looking at what router$ui returns, it appears to be a single div element that needed to be within an already existing fluentPage. I adjusted the code to the following and got each page to render correctly.

router <- make_router(
    route(path = "/", ui = mod_homepage_ui(id = "homepage_ui_1"))
)

shinyApp(
    ui = tagList(
      # Leave this function for adding external resources
      golem_add_external_resources(),
      # List the first level UI elements here
      fluentPage(
        withReact(
          div(class = "grid-container",
              div(class = "header", header),
              div(class = "sidenav", navigation),
              div(class = "main", router$ui),
              div(class = "footer", footer)
          )
        )
      )
    ),
    server = function( input, output, session ) {
      # List the first level callModules here
      router$server()
      moduleServer(id = "homepage_ui_1", module = mod_homepage_server)
    }
)

So now, instead of calling fluentPage(withReact(layout())), as in the example https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html#footer, inside each individual ui component, I only call it once in the shinyApp() ui argument.

Does this appear to be a correct implementation?

[kamilzyla]

Hi @kyle-power! Yes, it looks right 🙂