Comments (9)
Hi,
There is no updateTabItems function for argonCard because it does not have tabs. Do you mean argonTabSet instead? By the way the classic shiny updateTaItems will probably not work since the code between tabSetPanel/tabCard and argonTabSet is significantly different. This has to be done however.
from argondash.
I am preparing a jQuery example for you ;)
from argondash.
I am interested by this feature to activate another argonTabItem
from another one on an event.
The use case is a form where I want to add a button at the end and send to another tabItem.
it is not for argonCard
but for argonTabItem
in the same way it works with shiny using updateTabsetPanel
. As the argonTabItem
as no id, I am not sure it could work the same.
As a workaround, I'll try to use JS to do that but I am not expert. If you plan to add this kind of update*
function it would be nice, and I am ready to help with the right guidance.
from argondash.
Here you are:
library(shiny)
library(argonR)
library(argonDash)
shiny::shinyApp(
ui = argonDashPage(
title = "Argon App",
description = "Your description",
author = "You",
navbar = argonDashNavbar(),
sidebar = argonDashSidebar(
id = "sidebar",
side = "left",
size = "md",
skin = "light",
background = "white",
sliderInput(
"controller",
"Controller",
min = 1,
max = 2,
value = 1,
step= 1
),
argonSidebarMenu(
argonSidebarItem(
tabName = "Tab1",
icon = argonIcon(name = "circle-08", color = "success"),
"Tab 1"
),
argonSidebarItem(
tabName = "Tab2",
icon = argonIcon(name = "atom", color = "success"),
"Tab 2"
)
)
),
header = argonDashHeader(),
body = argonDashBody(
# recover the R export in JS in the message arg. Message is an object.
# If on the R side message was a list, you can access its children by
# message.children.
shiny::tags$head(
shiny::tags$script(
'Shiny.addCustomMessageHandler("update-tabs", function(message) {
var currentTab = parseInt(message);
console.log(message); // we check if the message is displayed
// hide and inactivate all not selected tabs
$(".active.show").removeClass("active show");
$(".tab-pane.active.show").removeClass("active show");
// add active class to the current selected tab and show its content
$("#tab-Tab" + currentTab).addClass("active show");
$("#shiny-tab-Tab" + currentTab).addClass("active show");
});
'
)
),
argonTabItems(
argonTabItem(
tabName = "Tab1",
argonCard(
status = "primary",
width = 12,
title = "Card 1",
hover_lift = TRUE,
shadow = TRUE,
icon = argonIcon("check-bold"),
src = "#",
"Argon is a great free UI package based on Bootstrap 4
that includes the most important components and features."
)
),
argonTabItem(
tabName = "Tab2",
argonBadge(
text = "My badge",
src = "https://www.google.com",
pill = FALSE,
status = "success"
)
)
)
),
footer = argonDashFooter(copyrights = "Yourself")
),
server = function(input, output, session) {
# send data from R to Javascript
observeEvent(input$controller, {
session$sendCustomMessage(
type = "update-tabs",
message = input$controller
)
})
}
)
from argondash.
Of course, the previous code is dirty and there should be a proper implementation. I accept any help since my free time tends to -infinity :)
from argondash.
Similarly, let's assume you also want to change the icon of the tab, you would have:
observeEvent(input$controller, {
session$sendCustomMessage(
type = "update-tabs",
message = list(
idx = input$controller,
icon = input$icon
)
)
})
Make sure that input$icon is given by a selectInput where choices correspond to all argon icons.
Then on the UI side, when your call you JS function:
Shiny.addCustomMessageHandler("update-tabs", function(message) {
// extract each element of the message object
var icon = message.icon;
var currentTab = parseInt(message.idx);
// You JS logic
});
from argondash.
Thanks a lot ! That will definitely help!
If I found time, I could try something.
from argondash.
That a great work-around. How do you update argonTabSet ?
from argondash.
I tried to use this script to update argonTabSets in my Shiny app, but it does not work. Basically, I am trying to use an action button on one TabSet to navigate to the next TabSet on my sidebar upon clicking the action button.
from argondash.
Related Issues (20)
- add rsconnect folder to Rbuildignore HOT 1
- I cannot add an argonCard in Shiny tabItem HOT 2
- App does not run well in shiny server pro HOT 2
- Optional args for argonInfoCard HOT 1
- Icon not getting displayed inside argonInfoCard HOT 1
- ArgonModal in an argonCard
- Sidebar tab doesn't work when published to shinyapps.io HOT 6
- argoInfoCard stat color
- Reference should be updated
- argonDashGallery() "no file found" HOT 5
- Editing Layout of argonProfile()
- Possibility to capture argonDropNavItem in server as an input? HOT 3
- Package Highcharter HOT 1
- argonDashSidebar size not responding
- stat color
- argonDashGallery() not working
- argondash don't work with horizontal layout
- Create multiple rows in argonTable
- How to reduce the white space between the argonDash cards?
- Update ArgonTabItems in my Shiny app
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 argondash.