los - Enlace directo a tabItem con panel brillante R

en html, el atributo alt se emplea para

Question

Estoy usando la plantilla brillante del tablero para generar mi UI web.

Me gustaría generar dinámicamente un cuadro de información cuando se completa un cálculo con un enlace dirigido a uno de los tabItems en el dashboardBody de dashboardBody .

Por ejemplo, puedo poner esto en mi salida tabItem1 ,

renderInfoBox({
infoBox("Completed",
a("Computation Completed", href="#tabItem2"),
icon = icon("thumbs-o-up"), color = "green"
)
})

Pero el problema es que cuando hago clic en el enlace, no hace nada. Me gustaría que salte a tabItem2 . El enlace href parece válido cuando me cierro sobre él.

¡Gracias!

Actualización: además de usar Javascripts, parece que usar las funciones updateTabItems y updateTabItems en el paquete shinydashboard también funcionará.

Answer 1

Me disculpo por el largo ejemplo de código, pero tuve que copiar un ejemplo con tabItems de la página de inicio de shinydashboard.

Su enfoque tiene pocos problemas. Primero, si inspecciona los artículos del menuItems , verá que el ID de la pestaña no es tabItem2 , sino shiny-tab-tabItem2 . Esto, más el atributo extra data-toggle="tab" dentro de la etiqueta a sería suficiente para abrir la pestaña deseada. Retazo:

a("Computation Completed", href="#shiny-tab-tabItem2", "data-toggle" = "tab") 

Pero, esto tiene sus límites. Primero y más obvio, el estado del elemento de menuItem en la barra lateral no está establecido en active . Esto se ve muy extraño y es posible que uno no esté convencido de que se ha movido a otra pestaña.

En segundo lugar, y menos obvio, si escucha los cambios de pestañas (en el lado del servidor), no obtendrá información sobre este cambio de pestañas. Esos son activados por el menuItem se hace clic, y la pestaña en sí no informará si está visible u oculto.

Por lo tanto, mi enfoque será simular que se hace clic en el elemento de menuItem correspondiente y, por lo tanto, se resuelven todos los problemas anteriores.

Ejemplo de código:

library(shiny)
library(shinydashboard)
ui <- shinyUI(
dashboardPage(
dashboardHeader(title = "Some Header"),
dashboardSidebar(
sidebarMenu(
menuItem("Computations", tabName = "tabItem1", icon = icon("dashboard")),
menuItem("Results", tabName = "tabItem2", icon = icon("th"))
)
),
dashboardBody(
tabItems(
tabItem(tabName = "tabItem1",
fluidRow(
box(plotOutput("plot1", height = 250)),
box(
title = "Controls",
sliderInput("slider", "Number of observations:", 1, 100, 50)
)
),
infoBoxOutput("out1")
),
tabItem(tabName = "tabItem2",
h2("Widgets tab content")
)
)
)
)
)
server <- function(input, output){
histdata <- rnorm(500)
output$plot1 <- renderPlot({
data <- histdata[seq_len(input$slider)]
hist(data)
})
output$out1 <- renderInfoBox({
infoBox("Completed",
a("Computation Completed", onclick = "openTab(''tabItem2'')"),
tags$script(HTML("
var openTab = function(tabName){
$(''a'', $(''.sidebar'')).each(function() {
if(this.getAttribute(''data-value'') == tabName) {
this.click()
};
});
}
")),
icon = icon("thumbs-o-up"), color = "green"
)
})
}
shinyApp(ui, server)

Tenga en cuenta que lo único importante es la propiedad onclick , no un href . Esto significa que cada div u otro elemento se puede usar para crear este enlace. Incluso podría tener solo la imagen de pulgar arriba con este comando onclick .

Si tiene más preguntas, por favor comente.

Atentamente

Editar: todo el cuadro de información en el que se puede hacer clic.

Esta es la respuesta a un comentario de OmaymaS . El objetivo era hacer de la infoBox un contenedor seleccionable. Para lograr esto, uno puede definir una nueva función que hace un infoBox algo diferente. El cuadro personalizado será el siguiente:

customInfoBox <- function (title, tab = NULL, value = NULL, subtitle = NULL, icon = shiny::icon("bar-chart"), color = "aqua", width = 4, href = NULL, fill = FALSE) {
validateColor(color)
tagAssert(icon, type = "i")
colorClass <- paste0("bg-", color)
boxContent <- div(class = "info-box", class = if (fill) colorClass,
onclick = if(!is.null(tab)) paste0("$(''.sidebar a'')).filter(function() { return ($(this).attr(''data-value'') == ", tab, ")}).click()"),
span(class = "info-box-icon", class = if (!fill) colorClass, icon),
div(class = "info-box-content",
span(class = "info-box-text", title),
if (!is.null(value)) span(class = "info-box-number", value),
if (!is.null(subtitle)) p(subtitle)
)
)
if (!is.null(href)) boxContent <- a(href = href, boxContent)
div(class = if (!is.null(width)) paste0("col-sm-", width), boxContent)
}

Este código se copia de la definición original de la función infoBox y solo la línea con onclick es nueva. También agregué la función openTab (con algunos twitches) justo dentro del contenedor, de modo que no necesita preocuparse por dónde colocar esta función dentro de la vista. Puede ser un poco sobrecargado, siento. Este cuadro de información personalizado se puede usar exactamente igual que el predeterminado y si pasa el argumento de tab adicional, se agrega el enlace a la barra lateral.