CODEWITHSUNDEEP
rshinyshinydashboardshinyapps
kristymazoo
kristymazoo

Reputation: 21

how to leverage valuebox in ShinyApp w/o dashboard structure?

I am building a shinyApp without the dashboard structure since I want to use the left side as a sidebar for the page rather than navigating to different pages. And have the navbar be where the user navigates to a different page.

Without using the shinydashboard/flexdashboard structure, valueBox doesn't display properly. Does anyone have ideas on how to leverage the valueBox design without dashboard structure as dependency?

I found an example from stackOverflow and repurposed for this question:

without dashboard structure / design of valueBox gets lost


library(shiny)
library(shinydashboard)


ui <- fluidPage(
    
    # Application title
    titlePanel("Old Faithful Geyser Data"),
    
    # Sidebar with a slider input for number of bins 
    sidebarLayout(
        sidebarPanel(
            sliderInput("bins",
                        "Number of bins:",
                        min = 1,
                        max = 50,
                        value = 30)
        ),
        
        # Show a plot of the generated distribution
        mainPanel(
            valueBoxOutput("vbox1", width = 2)
        )
    )
)

server <- function(input, output) {
    
    
    output$vbox1 <- shinydashboard::renderValueBox({ 
        d <- 42
        shinydashboard::valueBox( d, "Ccy")
    })
    
}

shinyApp(ui, server)

normal way with dashboard / design that I'd like to achieve without dashboard structure only the UI section differs

library(shiny)
library(shinydashboard)

ui <- dashboardPage(skin = "black",
                    dashboardHeader(title = "test"),

                    dashboardSidebar(
                        sidebarMenu()),

                    dashboardBody(
                        fluidRow(
                            valueBoxOutput("vbox1", width = 2))))

server <- function(input, output) {
    
    
    output$vbox1 <- shinydashboard::renderValueBox({ 
        d <- 42
        shinydashboard::valueBox( d, "Ccy")
    })
    
}

shinyApp(ui, server)

Upvotes: 2

Views: 1686

Answers (1)

ismirsehregal
ismirsehregal

Reputation: 33417

You can use useShinydashboard from shinyWidgets to realize the desired result:

library(shiny)
library(shinydashboard)
library(shinyWidgets)


ui <- fluidPage(
  useShinydashboard(),
  
  # Application title
  titlePanel("Old Faithful Geyser Data"),
  
  # Sidebar with a slider input for number of bins 
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    
    # Show a plot of the generated distribution
    mainPanel(
      valueBoxOutput("vbox1", width = 2)
    )
  )
)

server <- function(input, output) {
  
  
  output$vbox1 <- shinydashboard::renderValueBox({ 
    d <- 42
    shinydashboard::valueBox( d, "Ccy")
  })
  
}

shinyApp(ui, server)

Upvotes: 3

Related Questions