Can't render shinydashboard inside a renderUI

[vikram-rawat]

How can I create a dashboard inside a renderUI

library(shiny)
library(shinydashboard)

ui <-uiOutput('app')
# main_ui('some')

server <- function(input, output, session) {

    # callModule(mod_crud_serve,'some')

    output$app<-renderUI({
        dashboardPage(
            dashboardHeader(),
            dashboardSidebar(),
            dashboardBody()
        )
    })
}

shinyApp(ui, server)

Please help me I am trying to connect a login page with shinydashboard.

It doesn't throw a dashboard in renderUI to outputUI but shows me a blank page.

[wch]

Sorry, you can't put an entire shinyDashboard() in a renderUI(). You might be able to use renderUI() to add a div that covers the entire window, using the position: absolute CSS property.

[akshatha-g]

Hi wch, I am trying to build a shiny app with multiple pages and need to render the pages from server instead of ui. One of the pages in a navbarPage and the other is a shinydashboard. Is there a way to render this from server? Any tips would help! Thanks!

[mxfeinberg]

@akshatha-g , I am running into the same issue right now. I'm thinking about just hosting the pages on different apps and linking them via href. @wch could you provide some more details about the work around you proposed?

[alandipert]

While it's not possible to put shinyDashboard() in a renderUI(), it is possible to use shinyjs to toggle between different UIs on the client. In case it's helpful, an example is below.

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <-  tagList(
    useShinyjs(),
    div(id = "dashboard",
        style = "display:none",
        dashboardPage(
            dashboardHeader(),
            dashboardSidebar(),
            dashboardBody(actionButton("goNavbar", "Navbar Page"))
        )
    ),
    div(id = "navbarPage",
        style = "display:none",
        navbarPage("App Title",
           tabPanel(
             "Plot",
             actionButton("goDashboard", "Dashboard")
           ),
           tabPanel("Summary"),
           tabPanel("Table")
        )
    )
)

server <- function(input, output) {
    shinyjs::show("navbarPage")
    observeEvent({ input$goNavbar; input$goDashboard }, {
        shinyjs::toggle("navbarPage")
        shinyjs::toggle("dashboard")
    })
}

shinyApp(ui, server)

[akshatha-g]

Hi Alan,

Thanks for this tip. Currently, my app is organized as follows

?params=a => shinydashboard ?params=b => fluidpage 1 ?params=c => fluidpage 2

The 3 pages are not linked (you cannot click on any tab and land in a different ui page) But based on the request params, we would serve a different ui page. This was easy to do with just the fluidpage. The server would check the params and serve a different fluid page through render ui. The issue is I can't do the same with the dashboard page.

Is there a way to still use shinyjs to switch between dashboard and navbarPage like your example? (without the actionbutton)

[alandipert]

Hi, yes, a way to do what I think you're asking for comes to mind. Here's what it looks like:

app.R:

library(shiny)
library(shinydashboard)
library(shinyjs)

jsCode <- "shinyjs.setTitle = function(title) { window.document.title = title; }"

ui <-  tagList(
  useShinyjs(),
  extendShinyjs(text = jsCode),
  div(id = "page_a",
      style = "display:none",
      dashboardPage(
        dashboardHeader(),
        dashboardSidebar(),
        dashboardBody("In the dashboard page.")
      )
  ),
  div(id = "page_b",
      style = "display:none",
      navbarPage("App Title",
                 tabPanel(
                   "Plot",
                   "In the navbar page." 
                 ),
                 tabPanel("Summary"),
                 tabPanel("Table")
      )
  )
)

server <- function(input, output) {
  pages <- c(a = "Page A", b = "Page B")
  pageNames <- names(pages)
  observe({
    showName <- getQueryString()$page
    showName <- if (is.null(showName)) "a" else showName
    for (hideName in  pageNames[pageNames != showName]) {
      shinyjs::hide(paste0("page_", hideName))
    }
    shinyjs::show(paste0("page_", showName))
    js$setTitle(pages[[showName]])
  })
}

shinyApp(ui, server)

[akshatha-g]

Hi @alandipert This worked :) Thanks a lot for sharing this workaround.

The only issue I observed was that the window title (in tab on browser) always uses the page_a title and not the page_b title (even when page_b is shown). When i inspect the page source, this is how the title is set:

--   |   |   |   |