So my question is two-fold regarding uiOutput:
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?
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)
For Controlbar:
Add to ui:
controlbar = uiOutput("cont_bar")
Add to server:
output$cont_bar = renderUI({
NULL
})
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)