Comments (15)
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 bs4DashControlbar
depending on the selected tab (from the bs4SidebarMenu
).
I first thought about using conditionalPanel
with "condition = input$tab == tab1"
, but as said before setting anid
to 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.
Related Issues (20)
- Problem with the header HOT 2
- menuItem with menuSubItem HOT 1
- Start a box invisible HOT 1
- bs4DashGallery() does not work for me HOT 7
- Right control of carousel is broken
- Will bs4Dash going to support bootstrap 5? HOT 11
- List of icon
- Leaflet map width after maximizing box HOT 1
- Error in version 2.3.0 but not 2.2.1: 'Uncought error: cannot call methods on tooltip prior to initialization' HOT 1
- Dark and help toggle always show up
- Place the theme switch button in the center relative to the vertical
- I wish there was an updatebs4TabCard function. HOT 2
- bs4dash with sever package conflict box=TRUE doesnt work HOT 1
- Request to upgrade jQuery UI
- Persistent Theme Selection Error in dashboardHeader Function of ds4Dash Package HOT 1
- Request for function to zoom out screen in bs4dash HOT 2
- `popover()` doesn't work HOT 2
- allow HTML tags inside `popover()`
- Remove/Hide Controlbar Header Icon
- `messageItem` Hyperlink Reference Logic
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bs4dash.