rshinyuioutput

Nested uiOutput gives incorrect width and uiOutput controlbar = NULL doesn't work


So my question is two-fold regarding uiOutput:

  1. I create the tab Data via uiOutput. In the output of that tab I have other uiOutput. However that output gives incorrect width of the cards, why?

  2. If I want to add controlbar = NULL via uiOutput it doesnt work, why? I get the error:

Error in tagAssert(controlbar[[2]], type = "aside", class = "control-sidebar") : Expected an object with class 'shiny.tag'.

library(shiny)
library(bs4Dash)

ui <- dashboardPage(
  header = dashboardHeader(title = "bs4Dash Example"),
  sidebar = dashboardSidebar(
    sidebarMenu(
      id = "tabs",
      menuItem("Tab 1", tabName = "tab1", icon = icon("chart-line"))
    )
  ),
  body = dashboardBody(
    tabItems(
      tabItem(
        tabName = "tab1",
        uiOutput("tab_data")
      )
    )
  ),
  controlbar = dashboardControlbar(
    width = 300,
    actionButton("button1", "Button 1"),
    actionButton("button2", "Button 2")
  )
)

server <- function(input, output) {
  
  
  output$tab_data = renderUI({
    
    fluidRow(
      uiOutput("column_1"),
      uiOutput("column_2"),
      uiOutput("column_3")
    )
  })
  
  #column 1
  output$column_1 = renderUI({
    
        column(width = 4,
               bs4Card(title = div("Card 1", style='color:black; font-size:18px;'),
                       id = "card_1", width = NULL, height = "720px", 
                       p("Text")
               )
        )
  })
  
  #column 1
  output$column_2 = renderUI({
    
    column(width = 4,
           bs4Card(title = div("Card 2", style='color:black; font-size:18px;'),
                   id = "card_2", width = NULL, height = "720px", 
                   p("Text")
           )
    )
  })
  
  #column 1
  output$column_3 = renderUI({
    
    column(width = 4,
           bs4Card(title = div("Card 3", style='color:black; font-size:18px;'),
                   id = "card_3", width = NULL, height = "720px", 
                   p("Text")
           )
    )
  })
  
  
}

shinyApp(ui, server)

enter image description here

For Controlbar:

Add to ui:

controlbar = uiOutput("cont_bar")

Add to server:

output$cont_bar = renderUI({
    
    NULL
    
  })

Solution

  • Defining the column width in the same renderUI as fluidRow() will fix your issue #1. I do not see an error if I define uiOutput("cont_bar") inside dashboardControlbar(). Try this

    library(shiny)
    library(bs4Dash)
    
    ui <- dashboardPage(
      header = dashboardHeader(title = "bs4Dash Example"),
      sidebar = dashboardSidebar(
        sidebarMenu(
          id = "tabs",
          menuItem("Tab 1", tabName = "tab1", icon = icon("chart-line"))
        )
      ),
      body = dashboardBody(
        tabItems(
          tabItem(
            tabName = "tab1",
            uiOutput("tab_data")
            
          )
        )
      ),
      controlbar = dashboardControlbar(
        width = 300,
        actionButton("button1", "Button 1"),
        actionButton("button2", "Button 2"),
        uiOutput("cont_bar")
      )
    )
    
    server <- function(input, output) {
      
      output$tab_data = renderUI({
        
        fluidRow(
          column(4,uiOutput("column_1")),
          column(4,uiOutput("column_2")),
          column(4,uiOutput("column_3"))
        )
      })
      
      #column 1
      output$column_1 = renderUI({
        
        #column(width = 4,
               bs4Card(title = div("Card 1", style='color:red; font-size:18px;'),
                       id = "card_1", width=NULL, height = "720px", 
                       p("Text")
               )
        #)
      })
      
      #column 1
      output$column_2 = renderUI({
        
        #column(width = 4,
               bs4Card(title = div("Card 2", style='color:black; font-size:18px;'),
                       id = "card_2", width = NULL, height = "720px", 
                       p("Text")
               )
        #)
      })
      
      #column 1
      output$column_3 = renderUI({
        
        #column(width = 4,
               bs4Card(title = div("Card 3", style='color:blue; font-size:18px;'),
                       id = "card_3", width = NULL, height = "720px", 
                       p("Text")
               )
        #)
      })
      
      output$cont_bar = renderUI({
        
        NULL
        
      })
      
    }
    
    shinyApp(ui, server)