id parameter for bs4SidebarMenu? about bs4dash HOT 15 CLOSED

Hi @Thercast ,
I think I had the same issue.

You wanted to update the tabset panel, right? Like in your case maybe to 'cards'.
shiny::updateTabsetPanel(session, "tabs", selected = "cards")

The following seems to work for me:
shinyjs::runjs("$('a[data-value="cards"]').tab('show');")

(I'm loving the package @DivadNojnarg!)

from bs4dash.

Hi all,
Because I needed the same functionality of reacting to menu selection, I created a workaround using javascript.
Using onClick attributes on the nav-links to trigger a shiny event, which can than be reacted to:

// add onClick attribute to every menu item
function addMenuOnClickEvents() {
  $("div.sidebar a.nav-link").attr("onClick", "onMenuSelect(this.id.substr(4))"); // bs4Dash prepends 'tab-' to the menuItem name given in R
}

// send event to R, will be available as input$menuItem
function onMenuSelect(id) {
  Shiny.setInputValue("menuItem", {id:id}, {priority: "event"});
}

Might not be pretty, but it works...
edit: only affect nav-links in the actual sidebar

from bs4dash.

This is coming for the next release in July (with sidebar sub-items, ...).

from bs4dash.

Good news for you:

devtools::install_github("RinteRface/bs4Dash")

library(shiny)
library(bs4Dash)
 
 shinyApp(
   ui = bs4DashPage(
     sidebar_collapsed = TRUE,
     controlbar_collapsed = TRUE,
     enable_preloader = FALSE,
     loading_duration =  2,
     navbar = bs4DashNavbar(skin = "light"),
     body = bs4DashBody(
       
     ),
     sidebar = bs4DashSidebar(
       skin = "light",
       bs4SidebarMenu(
         id = "test",
         bs4SidebarMenuItem(
           tabName = "tab1",
           text = "Tab 1"
         ),
         bs4SidebarMenuItem(
           tabName = "tab2",
           text = "Tab 2"
         ),
         bs4SidebarMenuItem(
           text = "Click me pleaaaaase",
           bs4SidebarMenuSubItem(
             tabName = "subtab1",
             text = "Tab 3"
           ),bs4SidebarMenuSubItem(
             tabName = "subtab2",
             text = "Tab 4"
           )
         )
       )
     ),
     controlbar = bs4DashControlbar(skin = "light"),
     footer = bs4DashFooter()
   ),
   server = function(input, output, session) {
     observeEvent(input$test, {
       if (input$test == "subtab1") {
         showModal(modalDialog(
           title = "Thank you so much",
           "You clicked me! This event is the result of
           an input bound to the menu. By adding an id to the
           bs4SidebarMenu, input$id will give the currently selected
           tab. This is useful to trigger some events.",
           easyClose = TRUE,
           footer = NULL
         ))
       }
     })
   }
 )

The next step is the updateTabItem function ...

from bs4dash.

Hi Eric,
I look into that asap!
David

from bs4dash.

Hi all,

For me it's about displaying different setting options in the bs4DashControlbardepending on the selected tab (from the bs4SidebarMenu).

I first thought about using conditionalPanelwith "condition = input$tab == tab1", but as said before setting anidto the bs4SidebarMenu still not works yet.

If there's a workaround, I will be happy to try it :)

Thanks a lot.

@DivadNojnarg : great thanks for this awesome package!

from bs4dash.

Hi,
if you don't need to use shinytest or something requiring that your inputs are registered via custom input binding, @pmallot solution will do the job.

Anyway, at some point I will need to do this in a clean way, namely using custom input and output bindings, similarly as what was done in shinydashboard.

I put it on my road map for 2019.

from bs4dash.

Sorry for not getting back to this sooner. My use case will involve shinytest down the road so I'll keep watching for a solution that can play nicely with that workflow. But it's good to know the custom javascript from @pmallot is an option for my apps that won't need that testing framework.

from bs4dash.

@pmallot do you have a minimal reprex of this solution working? I've tried adding the js script with includeScript() but it doesn't seem to be setting any input values oninput$menuItem when clicking on the sidebar menu items. Thanks!

from bs4dash.

@PaulC91 you also need to call addMenuOnClickEvents() once. I simply added something like tags$script("addMenuOnClickEvents()") to the end of my ui file.
If that doesn't fix your problem I can get back to you on monday.

from bs4dash.

Thanks @pmallot - yeah I figured that out eventually! I tweaked the function so that it was called on app launch with the below code:

// add onClick attribute to every menu item on app launch
$(document).ready(function() {
  $("div.sidebar a.nav-link").attr("onClick", "onMenuSelect(this.id.substr(4))"); // bs4Dash prepends 'tab-' to the menuItem name given in R
});

from bs4dash.

@PaulC91 Even better!

from bs4dash.

I'm facing the same issue related to lack of id in sidebarmenu. this is useful to updatetabitems function

from bs4dash.

Awesome @DivadNojnarg

from bs4dash.

Excellent @DivadNojnarg ! Now the door is open for me to implement shinytest with my bs4Dash powered apps 👍

from bs4dash.