Compatibility with shinyWidgets pickerInput about bs4dash HOT 20 CLOSED

Hi there!
I have update bootstrap-select dependencies (used by pickerInput), so if you install dev {shinyWidgets}, it should be better (choices appears).

This works for me with shinyWidgets_0.4.3.994 :

library(shiny)
library(shinyWidgets)
library(bs4Dash)

ui <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = list(`actions-box` = TRUE)
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

shinyApp(ui = ui, server = server)

Victor

PS: David this works with ratp-traffic application too.

from bs4dash.

Hi Victor!
Works for me as well.
Many Thanks

working demo here: http://130.60.24.205/dreamRs_ratp/

from bs4dash.

And the good new is that it works with the old bootstrap 3 CSS:

devtools::install_github("RinteRface/bs4Dash")

library(shiny)
library(bs4Dash)
library(shinyWidgets)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

ui_bs4Dash <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = pickerOptions(
                actionsBox = TRUE, 
                selectedTextFormat = "count > 3", 
                countSelectedText = "{0} cars selected", 
                showTick = TRUE
              )
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

# showTick doesn't work with bs4Dash 
shinyApp(ui = ui_bs4Dash, server = server)

from bs4dash.

Wouah, that was fast !!
Thanks a lot !

Can I close the issue now ?

from bs4dash.

Awesome! Thank you David, it works all fine with the latest dev version of bs4Dash.

from bs4dash.

I'm glad I found this issue, only I wish I had found it sooner! I was running the bs4Dash CRAN 0.2 release and was going crazy trying to figure out why the check marks weren't appearing in my pickerInput. Needless to say I've upgraded to the dev version and it works perfectly 👏

from bs4dash.

Do you have the latest version of shinyWidgets?
If so unfortunately, this is not possible to fix (or not so easy). shinyWidgets uses bootstrap 3 and bs4Dash bootstrap 4

from bs4dash.

Yes, I have the latest version of shinyWidgets 0.4.3 (CRAN, not github devel).
Is there an older version which may be compatible with bs4Dash ?

from bs4dash.

I realized that when I translated the app of @dreamRs:
http://130.60.24.205/dreamRs_ratp/
They had a pickerInput, which is not working, similar to your case.

So I keep it open until there is a solution

from bs4dash.

Top David!
There's still an ugly warning in the Javascript console because bootstrap-select is loaded before Bootstrap... don't know how to fix it right now, this is due to the way dependencies are managed in shiny.

Victor

from bs4dash.

I use htmlDependency() from devtools but we do not have any option to control the way scripts are loaded. This is can be disastrous if some scripts need to be run at a given place in the footer instead of the head, for instance.
The first version of bs4Dash used includeScript or includeCSS() but I did not find that way really elegant.

from bs4dash.

Hi @DivadNojnarg and @pvictor,

Thanks a lot for developing bs4Dash and shinyWidgets packages, I use both for my dashboards.

Despite the fix above, I still have an issue with pickerInput as the showTick option doesn’t seem to work in bs4Dash. By contrast, it works as expected in shinydashboard.

It’s annoying when I have multiple selection enabled and a lot of inputs because I would like to set selectedTextFormat = "count > 3" but then the user can’t see which inputs are ticked, which is confusing (see reproductible example below).

I understand that shinyWidgets uses Bootstrap 3, whereas bs4Dash uses Bootstrap 4 and this might lead to inherent incompatibilities. However, I wonder whether you could come up with a simple fix similar to the one above?

Thank you in advance,
Anton

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

  ui_bs4Dash <- bs4DashPage(
    navbar = bs4DashNavbar(),
    sidebar = bs4DashSidebar(),
    body = bs4DashBody(
      bs4TabItems(
        bs4TabItem(
          tabName = "test",
          fluidRow(
            column(
              width = 6,
              pickerInput(
                inputId = "p1",
                label = "Select all option",
                choices = rownames(mtcars),
                multiple = TRUE,
                options = pickerOptions(
                  actionsBox = TRUE, 
                  selectedTextFormat = "count > 3", 
                  countSelectedText = "{0} cars selected", 
                  showTick = TRUE
                  )
                ),
              verbatimTextOutput(outputId = "res")
              )
            )
          )
        )
      )
    )


  ui_shinydashboard <- dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
     sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"))
      )),
    dashboardBody(
      tabItems(
        tabItem(
          "dashboard",
          fluidRow(
            column(
              width = 6,
              pickerInput(
                inputId = "p1",
                label = "Select all option",
                choices = rownames(mtcars),
                multiple = TRUE,
                options = pickerOptions(
                  actionsBox = TRUE, 
                  selectedTextFormat = "count > 3", 
                  countSelectedText = "{0} cars selected", 
                  showTick = TRUE
                  )
                ),
              verbatimTextOutput(outputId = "res")
              )
            )
          )
        )
      )
    )

  server <- function(input, output, session) {
    output$res <- renderPrint(input$p1)
  }

  # showTick doesn't work with bs4Dash 
  shinyApp(ui = ui_bs4Dash, server = server)
  
  # showTick works with shinydashboard   
  shinyApp(ui = ui_shinydashboard, server = server)

My R session info (I'm using the dev versions of shiny, shinyWidgets and bs4Dash):

R version 3.5.1 (2018-07-02)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS  10.14.1

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.5/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] bindrcpp_0.2.2         DT_0.4                 leaflet.extras_1.0.0   leaflet_2.0.2          highcharter_0.5.0     
 [6] fontawesome_0.1.0      shinyWidgets_0.4.4.900 bs4Dash_0.3.0.9000     rintrojs_0.2.1         shinyjs_1.0.1.9004    
[11] janitor_1.1.1          readxl_1.1.0           here_0.1               Hmisc_4.1-1            Formula_1.2-3         
[16] survival_2.41-3        lattice_0.20-35        lubridate_1.7.4        forcats_0.3.0          stringr_1.3.1         
[21] dplyr_0.7.7            purrr_0.2.5            readr_1.1.1            tidyr_0.8.1            tibble_1.4.2          
[26] ggplot2_2.2.1          tidyverse_1.2.1        shinydashboard_0.7.1   shiny_1.2.0.9000       Matrix_1.2-14         
[31] styler_1.0.2           roxygen2_6.1.0         knitr_1.20             packrat_0.4.9-3        usethis_1.4.0         
[36] devtools_2.0.1        

loaded via a namespace (and not attached):
 [1] colorspace_1.3-2    rprojroot_1.3-2     htmlTable_1.12      base64enc_0.1-3     fs_1.2.6            rstudioapi_0.8     
 [7] remotes_2.0.1       xml2_1.2.0          splines_3.5.1       rlist_0.4.6.1       pkgload_1.0.1       jsonlite_1.5       
[13] broom_0.5.0         cluster_2.0.7-1     compiler_3.5.1      httr_1.3.1          backports_1.1.2     assertthat_0.2.0   
[19] lazyeval_0.2.1      cli_1.0.1           later_0.7.5         acepack_1.4.1       htmltools_0.3.6     prettyunits_1.0.2  
[25] tools_3.5.1         igraph_1.2.2        gtable_0.2.0        glue_1.3.0          Rcpp_0.12.19        cellranger_1.1.0   
[31] nlme_3.1-137        crosstalk_1.0.0     ps_1.2.0            testthat_2.0.1      rvest_0.3.2         mime_0.6           
[37] zoo_1.8-4           scales_1.0.0        hms_0.4.2           promises_1.0.1      RColorBrewer_1.1-2  yaml_2.1.18        
[43] curl_3.2            quantmod_0.4-13     memoise_1.1.0       gridExtra_2.3       rpart_4.1-13        latticeExtra_0.6-28
[49] stringi_1.2.4       desc_1.2.0          checkmate_1.8.5     TTR_0.23-4          pkgbuild_1.0.2      rlang_0.3.0.1      
[55] pkgconfig_2.0.2     commonmark_1.6      bindr_0.1.1         htmlwidgets_1.2     processx_3.2.0      tidyselect_0.2.5   
[61] plyr_1.8.4          magrittr_1.5        R6_2.3.0            pillar_1.3.0        haven_1.1.2         foreign_0.8-69     
[67] withr_2.1.2         xts_0.11-1          nnet_7.3-12         modelr_0.1.2        crayon_1.3.4        grid_3.5.1         
[73] data.table_1.11.8   callr_3.0.0         digest_0.6.18       xtable_1.8-3        httpuv_1.4.5        munsell_0.5.0      
[79] sessioninfo_1.1.0  

from bs4dash.

My guess is that the glyph icons dependency is not setup in bs4Dash.
As far as I see, I am not sur glyphicons is still available since on the website they ask me to pay...
and bootstrap 4 definitely does not use it https://getbootstrap.com/docs/4.2/extend/icons/

I will try to fix it by the way

from bs4dash.

Unfortunately i am still having trouble with this issue. I have tried installing the dev version of bs4Dash 0.4.0.9 as well as shinyWidgets 0.4.8, but that didn't help. What am I doing wrong here?

# devtools::install_github("RinteRface/bs4Dash")
# devtools::install_github("dreamRs/shinyWidgets")
library(shiny)
library(bs4Dash)
library(shinyWidgets)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

ui_bs4Dash <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = pickerOptions(
                actionsBox = TRUE, 
                selectedTextFormat = "count > 3", 
                countSelectedText = "{0} cars selected", 
                showTick = TRUE
              )
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

# showTick doesn't work with bs4Dash 
shinyApp(ui = ui_bs4Dash, server = server))`

If it is of any help, here is my session info:

sessionInfo()
R version 3.5.3 (2019-03-11)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 17134)

Matrix products: default

locale:
[1] LC_COLLATE=German_Germany.1252  LC_CTYPE=German_Germany.1252   
[3] LC_MONETARY=German_Germany.1252 LC_NUMERIC=C                   
[5] LC_TIME=German_Germany.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

other attached packages:
[1] shinyWidgets_0.4.8 bs4Dash_0.4.0.9000 shiny_1.3.2       

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.1       digest_0.6.19    later_0.8.0     
 [4] mime_0.6         R6_2.4.0         xtable_1.8-4    
 [7] jsonlite_1.6     magrittr_1.5     scales_1.0.0    
[10] promises_1.0.1   tools_3.5.3      munsell_0.5.0   
[13] httpuv_1.5.1     compiler_3.5.3   colorspace_1.4-1
[16] htmltools_0.3.6 

from bs4dash.

Unfortunately i am still having trouble with this issue. I have tried installing the dev version of bs4Dash 0.4.0.9 as well as shinyWidgets 0.4.8, but that didn't help. What am I doing wrong here?

# devtools::install_github("RinteRface/bs4Dash")
# devtools::install_github("dreamRs/shinyWidgets")
library(shiny)
library(bs4Dash)
library(shinyWidgets)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

ui_bs4Dash <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = pickerOptions(
                actionsBox = TRUE, 
                selectedTextFormat = "count > 3", 
                countSelectedText = "{0} cars selected", 
                showTick = TRUE
              )
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

# showTick doesn't work with bs4Dash 
shinyApp(ui = ui_bs4Dash, server = server))`

If it is of any help, here is my session info:

sessionInfo()
R version 3.5.3 (2019-03-11)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 17134)

Matrix products: default

locale:
[1] LC_COLLATE=German_Germany.1252  LC_CTYPE=German_Germany.1252   
[3] LC_MONETARY=German_Germany.1252 LC_NUMERIC=C                   
[5] LC_TIME=German_Germany.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

other attached packages:
[1] shinyWidgets_0.4.8 bs4Dash_0.4.0.9000 shiny_1.3.2       

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.1       digest_0.6.19    later_0.8.0     
 [4] mime_0.6         R6_2.4.0         xtable_1.8-4    
 [7] jsonlite_1.6     magrittr_1.5     scales_1.0.0    
[10] promises_1.0.1   tools_3.5.3      munsell_0.5.0   
[13] httpuv_1.5.1     compiler_3.5.3   colorspace_1.4-1
[16] htmltools_0.3.6 

I have the same issue and I decided that I would not move from Shinydashboard to bs4Dash for this reason now. It would be annoying for the users that they cannot see what they select with the pickerinput filters.. And select all / deselect all is only available here..

from bs4dash.

@thomasthomasth and @prehi12:

Can you try to download bs4Dash from this:

devtools::install_github("RinteRface/bs4Dash", ref = "d2dac17c7f08b99d016fde5ae13c53131c1e4d23")

I guess this is coming from the bootstrap 4.3.1 update

@pvictor: I just tried the last version of bootstrap-select deps (https://developer.snapappointments.com/bootstrap-select/) and it seems to work with bs4Dash and shinydashboard:

library(shiny)
library(bs4Dash)
library(shinyWidgets)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

ui_bs4Dash <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    tags$head(
      includeCSS(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css"),
      includeScript(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js")
    ),
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = pickerOptions(
                actionsBox = TRUE, 
                selectedTextFormat = "count > 3", 
                countSelectedText = "{0} cars selected", 
                showTick = TRUE
              )
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

# showTick doesn't work with bs4Dash 
shinyApp(ui = ui_bs4Dash, server = server)

@thomasthomasth and @prehi12: can you also please try the code above with the last version of bs4Dash

devtools::install_github("RinteRface/bs4Dash")

With shinydashboard:

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

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(
        includeCSS(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css"),
        includeScript(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js")
      ),
      pickerInput(
        inputId = "p1",
        label = "Select all option",
        choices = rownames(mtcars),
        multiple = TRUE,
        options = pickerOptions(
          actionsBox = TRUE, 
          selectedTextFormat = "count > 3", 
          countSelectedText = "{0} cars selected", 
          showTick = TRUE
        )
      ),
      verbatimTextOutput(outputId = "res")
    ),
    title = "Dashboard example"
  ),
  server = function(input, output, session) {
    output$res <- renderPrint(input$p1)
  }
)

from bs4dash.

@thomasthomasth and @prehi12:

Can you try to download bs4Dash from this:

devtools::install_github("RinteRface/bs4Dash", ref = "d2dac17c7f08b99d016fde5ae13c53131c1e4d23")

I guess this is coming from the bootstrap 4.3.1 update

@pvictor: I just tried the last version of bootstrap-select deps (https://developer.snapappointments.com/bootstrap-select/) and it seems to work with bs4Dash and shinydashboard:

library(shiny)
library(bs4Dash)
library(shinyWidgets)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

ui_bs4Dash <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    tags$head(
      includeCSS(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css"),
      includeScript(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js")
    ),
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = pickerOptions(
                actionsBox = TRUE, 
                selectedTextFormat = "count > 3", 
                countSelectedText = "{0} cars selected", 
                showTick = TRUE
              )
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

# showTick doesn't work with bs4Dash 
shinyApp(ui = ui_bs4Dash, server = server)

@thomasthomasth and @prehi12: can you also please try the code above with the last version of bs4Dash

devtools::install_github("RinteRface/bs4Dash")

With shinydashboard:

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

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      tags$head(
        includeCSS(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css"),
        includeScript(path = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js")
      ),
      pickerInput(
        inputId = "p1",
        label = "Select all option",
        choices = rownames(mtcars),
        multiple = TRUE,
        options = pickerOptions(
          actionsBox = TRUE, 
          selectedTextFormat = "count > 3", 
          countSelectedText = "{0} cars selected", 
          showTick = TRUE
        )
      ),
      verbatimTextOutput(outputId = "res")
    ),
    title = "Dashboard example"
  ),
  server = function(input, output, session) {
    output$res <- renderPrint(input$p1)
  }
)

Hi,

It looks like it is working now. I hope you will find a stable way and merge it to the CRAN version.

Thanks for the great package, anyway.

Tamas

from bs4dash.

@thomasthomasth: I pushed a patch to shinyWidgets which properly updates dependencies (not like the previous dirty example).

devtools::install_github("dreamRs/shinyWidgets")

Hence, the example below will work without the need of extra CSS/JS file:

library(shiny)
library(bs4Dash)
library(shinyWidgets)

server <- function(input, output, session) {
  output$res <- renderPrint(input$p1)
}

ui_bs4Dash <- bs4DashPage(
  navbar = bs4DashNavbar(),
  sidebar = bs4DashSidebar(),
  body = bs4DashBody(
    bs4TabItems(
      bs4TabItem(
        tabName = "test",
        fluidRow(
          column(
            width = 6,
            pickerInput(
              inputId = "p1",
              label = "Select all option",
              choices = rownames(mtcars),
              multiple = TRUE,
              options = pickerOptions(
                actionsBox = TRUE, 
                selectedTextFormat = "count > 3", 
                countSelectedText = "{0} cars selected", 
                showTick = TRUE
              )
            ),
            verbatimTextOutput(outputId = "res")
          )
        )
      )
    )
  )
)

# showTick doesn't work with bs4Dash 
shinyApp(ui = ui_bs4Dash, server = server)

The CRAN versions will follow.

from bs4dash.

It's working perfectly now, thank you very much @DivadNojnarg

from bs4dash.

Is this the same issue? We have modules which work fine with shinywidgets::pickerinput, but the main navbar has the same issue with not displaying choices. Skipping leftUi makes it work.

This issue is not present with the base shiny shiny::selectInput, so apologies if this is out of scope of this package.

library(shiny)
library(shinyWidgets)
library(bs4Dash)

shiny::shinyApp(
  ui = bs4DashPage(
    navbar =  bs4DashNavbar(
      # `shiny::selectInput` works fine
      # specifying "leftUi = " here causes the dropdown to not show any options
      leftUi = shinyWidgets::pickerInput(
      # shinyWidgets::pickerInput(
        inputId = "pickerchoice",
                  label = NULL,
                  choices = letters)
    ),
    sidebar = bs4DashSidebar(disable = TRUE),
  ),
  server = function(input, output) {}
)

Tested in Firefox and Chrome on Windows 10 x64.

> sessionInfo()
R version 3.6.2 (2019-12-12)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 17763)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] bs4Dash_0.5.0.9000 shinyWidgets_0.5.0 shiny_1.4.0       

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.3       packrat_0.5.0    digest_0.6.23    later_1.0.0      mime_0.9         R6_2.4.1        
 [7] lifecycle_0.1.0  xtable_1.8-4     jsonlite_1.6.1   magrittr_1.5     scales_1.1.0     rlang_0.4.4     
[13] promises_1.1.0   tools_3.6.2      munsell_0.5.0    httpuv_1.5.2     fastmap_1.0.1    compiler_3.6.2  
[19] colorspace_1.4-1 htmltools_0.4.0 

from bs4dash.