KirkD-CO
KirkD-CO

Reputation: 1793

Add progress meter to header in Shiny (shinydashboard/shinydashboardplus)

I have a shiny app that uses shinydashboard and shinydashboardPlus. In the header, I was able to add a switchInput to allow users to toggle between two options. When the options are changed, the overall UI (which is fairly complex) is updated to change various labels based on the user selection. This process takes few seconds causing the application to be non-responsive, so I would like to add a progress meter or a spinner next to the switchInput, but all my attempts have failed. (I've tried adding the progressBar from shinydashboardPlus and the shinyWidgets, but neither of those actually appear on the header.)

EDIT: Maybe more detail on my use case would help. When the user clicks the toggle, I call a function that operates in multiple steps and the overall function takes about 20 seconds. After each step, I would like to update the progress bar or spinner as a cue to the user that something is happening. Also, prior to clicking and after the function returns, I would like to hide the progress bar or spinner.

Here's some very simplified code with the header including the switchInput.

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

# Define UI for application that draws a histogram
ui <- dashboardPage(skin = 'blue', 
                    
shinydashboardPlus::dashboardHeader(title = 'Example',
    leftUi = tagList(
        switchInput(inputId = 'swtLabels', label = 'Labels', value = TRUE,
                    onLabel = 'Label 1', offLabel = 'Label 2',
                    onStatus = 'info', offStatus = 'info', size = 'mini', 
                    handleWidth = 230)
        )
    ),
    dashboardSidebar(),
    dashboardBody()
)

server <- function(input, output) {}

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

Upvotes: 0

Views: 291

Answers (2)

Deepansh Khurana
Deepansh Khurana

Reputation: 23

Not sure if you were able to fix the issue in your comment from Nov 3, 2021.

Namely, the Error in if (name != "li" || !is.null(class) || class != "dropdown") { : missing value where TRUE/FALSE needed In my case, I was trying to send a custom tagList as a part of the leftUI tagList and got the same error.

Reading the code made me realise that it expects a name property in the list elements, adding it manually or even setting it to "" works.

shinyWidgets::progressBar() probably does not have the name attribute in the final object it returns and therefore, the error is thrown. I'm not sure why this is such a strict requirement here.

I'm just leaving this context here for anyone who stumbles onto this error in the future.

Upvotes: 1

Anudeep Vanjavakam
Anudeep Vanjavakam

Reputation: 11

Is this close to what you are expecting? progress bar on dashboard header

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


# Define UI for application that draws a histogram
ui <- dashboardPage(skin = 'blue', 
                    
                    shinydashboardPlus::dashboardHeader(title = 'Example',
                                                        leftUi = tagList(
                                                          switchInput(inputId = 'swtLabels', label = 'Labels', value = TRUE,
                                                                      onLabel = 'Label 1', offLabel = 'Label 2',
                                                                      onStatus = 'info', offStatus = 'info', size = 'mini', 
                                                                      handleWidth = 230),
                                                          shinydashboardPlus::progressBar(
                                                                        value = 100,
                                                                        striped = TRUE,
                                                                        animated = TRUE,
                                                                        label = "loading...100%"
                                                                      )
                                                           )
                                                        ),
                    
                    
                    dashboardSidebar(),
                    dashboardBody()
                
)

server <- function(input, output) {}

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

Upvotes: 1

Related Questions