CODEWITHSUNDEEP
cssrweb-applicationsshinyshinydashboard
SMAX
SMAX

Reputation: 73

R/Shiny : Color of boxes depend on select

I try to create dynamic boxes in shiny. We can change the status (color) of the box with (status = "warning" or "info" etc.) I would like to change the color of this box (dynamically) depend on the choice of select input like that :

https://image.noelshack.com/fichiers/2018/32/2/1533638864-v1.png https://image.noelshack.com/fichiers/2018/32/2/1533638864-v2.png

The code looks like this :

SelectInput("s010102i", label = NULL, 
 choices = list("Value 1" = 1, "Value 2" = 2, "Value 3" = 3), 
 selected = 1) ,width = 12, background = "blue", status = "info")),                                column(4,

We need to change the "info" in status by a variable. But when I try to put variable in ui side, it does not work and when i pass by the server like output$s010102i... the status is not equals to "info" in the output but :

ERROR: Invalid status: <div id="s010102o" class="shiny-html-output"></div>. Valid statuses are: primary, success, info, warning, danger.

How can i put this dynamically ? And how to change the selected by a variable ?

Thanks a lot !

Edit -> Here an exploitable code to understand :

 library(shiny)
 library(shinydashboard)
 library(DT)


  # Define UI for application that draws a histogram
  ui <- fluidPage(

  dashboardPage(
    dashboardHeader( title = "Simple Test"),

    dashboardSidebar(),      
    dashboardBody(          
    fluidRow(

           box(title = h3("S.01.01.02", style = "display:inline; font-weight:bold"),

             selectInput("s010102i", label = NULL, 
                         choices = list("Not good" = 1, "O.K" = 2, "Good" = 3), 
                         selected = 1) ,width = 12, background = "blue", status = renderUI("s010102o"))
                                                                              # I want a text or a variable here
                                                                              # Logically "danger", warning or success
           # If Not good is selected, i wan that the status (the color) go to red (danger)
    ))))



  # Define server logic required to draw a histogram
  server <- function(input, output) {

    statut = c("danger","warning","success")


    output$s010102o <- reactive({  
      valueStatut = input$s010102i # Give 1 2 or 3
      s010102o =  statut[valueStatut] # give the value of the statut if "danger" the box changes to red 

    })
  }

  # Run the application 
  shinyApp(ui = ui, server = server)

Upvotes: 3

Views: 2838

Answers (1)

Romain
Romain

Reputation: 450

The solution is to create the whole box in the server using renderUI and just render it in the UI using uiOutput. You can do something like this:

library(shiny)
library(shinydashboard)
library(DT)


# Define UI for application that draws a histogram
ui <- fluidPage(

  dashboardPage(
    dashboardHeader( title = "Simple Test"),

    dashboardSidebar(),      
    dashboardBody(          
      fluidRow(
        uiOutput("s010102o")
      ))))



# Define server logic required to draw a histogram
server <- function(input, output) {

  statut = c("danger","warning","success")

  output$s010102o <- renderUI({
    box(title = h3("S.01.01.02", style = "display:inline; font-weight:bold"),

        selectInput("s010102i", label = NULL, 
                    choices = list("Not good" = "danger", "O.K" = "info", "Good" = "success"), 
                    selected = 1) ,width = 12, background = "blue")})

  observeEvent(input$s010102i,{
    output$s010102o <- renderUI({
      box(title = h3("S.01.01.02", style = "display:inline; font-weight:bold"),

          selectInput("s010102i", label = NULL,
                      choices = list("Not good" = "danger", "O.K" = "info", "Good" = "success"),
                      selected = input$s010102i) ,width = 12, background = "blue",status = input$s010102i)
    })


  })

}

# Run the application 
shinyApp(ui = ui, server = server)

But be careful as you are updating the box in which the input is.

Upvotes: 3

Related Questions