0

The value boxes in bslib are attractive and fulfill a need when dashboarding. However, there doesn't seem to be a straightforward way to populate them with reactive (non-static) values without breaking the formatting and therefore reducing the power to communicate important results.

Here's output from my example app (code at bottom)

Example app output

The value in the bottom value_box will respond to the slider, but textOutput and similar functions wrap it in a <p> tag and that makes it so that the value is no longer formatted.

Is there a clean way to put a reactive value in my value_box without messing up my formatting?

library(shiny)
library(bslib)

# Define UI for app that draws a histogram ----
ui <- bslib::page(
  
      # Input: Slider ----
      sliderInput(inputId = "number",
                  label = "number to display",
                  min = 1,
                  max = 50,
                  value = 30),
      
      # Output: Value Box Formatted ----
      bslib::value_box(
        title = "Good formatting", 
        value = 30
      ),
    
      # Output: Value Box Broken formatting ----
      bslib::value_box(
        title = "Bad formatting",
        value = textOutput("out_text")
      )
)

# Define server logic required to draw a histogram ----
server <- function(input, output) {
  output$out_text <- renderText(input$number)
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)
Pegasaurus
  • 145
  • 12

2 Answers2

1

Hopefully this will improve in the future, but for now, I would change textOutput("out_text") textOutput("out_text", container = h2)

Carson
  • 2,617
  • 1
  • 21
  • 24
  • Sorry, it took a while to accept your answer. I think this is the cleanest way to do this for the problem as I posed it. Since the prominent text in the value-box is an h2, this is substantially, the same as passing in a value in the way that one would hope. Once I got into it, I liked the flexibility of using the renderUI as I ended up suggesting because it gives the flexibility to change the glyph and the background color, but that was beyond the question I originally posed. – Pegasaurus Jun 16 '23 at 21:41
0

Not the cleanest answer, since you're shifting most of your UI for the value_box onto the server and breaking the whole zen-of-shiny.

But, I got it to work using you can use renderUI to populate the value on the server side so that it's directly consumed by the value-box rather than being wrapped in a <p> or a <div> or a <span>.

If you can come up with a cleaner solution where most of my UI can stay in the ui you can have the accepted answer and the accompanying glory and internet points.

enter image description here

library(shiny)
library(bslib)

# Define UI for app that draws a histogram ----
ui <- bslib::page(
  
  # Input: Slider ----
  sliderInput(inputId = "number",
              label = "number to display",
              min = 1,
              max = 50,
              value = 30),
  
  # Output: Value Box fixed formatting ----
  uiOutput("fixed_vb")
)

# Define server logic required to draw a histogram ----
server <- function(input, output) {
  
  output$fixed_vb <- renderUI({
    bslib::value_box(
      title = "Fixed formatting",
      value = input$number
    ) 
  })
  
}

# Create Shiny app ----
shinyApp(ui = ui, server = server)
Pegasaurus
  • 145
  • 12