For the shiny app, I changed the Titlepanel settings to create a favicon and window title. However, now I get a number appearing right below the navigation panel.
Here is the code for the UI:
ui <- navbarPage(titlePanel(windowTitle = "Name",
title = tags$head(tags$link(rel = "shortcut icon",
href = "images/image.png",
type="images/image-icon"))),
title = "Name",
selected = "home",
theme = shinytheme("readable"),
fluid = TRUE)
Here is the output
While I do see my favicon and window title, I cannot hide this tab number. What is the way to do this?
I am trying to add an external URL in a shiny dashboard that uses the package bs4Dash but when I click in it their is no response. I have something similar to the example below. It does not work using newTab = FALSE or newTab = TRUE. Am I missing something or this is the way it is supposed to behave?
# NOT RUN {
## Only run this example in interactive R sessions
if (interactive()) {
library(shiny)
library(bs4Dash)
# A dashboard header with 3 dropdown menus
header <- dashboardHeader(
title = "My dashboard"
)
sidebar <- dashboardSidebar(
sidebarMenu(
menuItem("My menu L1", href = "https://rinterface.github.io/bs4Dash/", newTab = FALSE),
menuItem("My menu L2",
menuSubItem("My submenu 1", href = "https://rinterface.github.io/bs4Dash/", newTab = TRUE)
)
)
)
shinyApp(
ui = dashboardPage(
header,
sidebar,
dashboardBody()
),
server = function(input, output) { }
)
}
# }
#Dwight, I "solved" this issue via a hack. Basically, I started using the shinydashboard::menuItem for those particular instances. I think the author fix this and hopefully will be available in the next version (https://github.com/RinteRface/bs4Dash/issues/225).
shinydashboard::menuItem(
text = "Help",
href = "http://example.com"
)
I'm Building a dashboard using the packages shiny and shinydashboard, The issue I am having is when I try to include a math symbol inline with text when the app is launched it always smaller than its surrounding text. When the app is launched and right click on a math symbol and navigate to
Math Setting>Math Render> the switch from HTML-CSS to HTML Preview it becomes the correct size. Wondering why this is the case and how I can make appear as the correct size by default so I don't have users switch HTML preview when they launch the app.
I tried adding the follow to change my Mathjax configuration upon the apps launch but it didn't seem to have any effect:
tags$div(HTML("<script type='text/x-mathjax-config' >
MathJax.Hub.Config({
showProcessingMessages: true,
jax: ['input/TeX', 'output/PreviewHTML'],
});
</script >
"))
Here is a basic version of what I'm dealing with when ran the Mu symbol is much smaller than the other text.
header <- dashboardHeader(
#Set the title and title size of the dashboard. This will be located in top left coner of app.
title = "My Dashboard",
titleWidth = 400
)
# Sidebar Layout
# Contains the design for collapsable sidebar of the dashboard which allows users to navigate to its differnt pages.
sidebar <- dashboardSidebar(
sidebarMenu(
# Each item navigates the dashboard to its corresponding page
menuItem("Inputs", tabName = "inputs",icon = icon("angle-right"))
)
)
#Boday Layout
# Contains the design for each indivual page listed within the side bar
body <- dashboardBody(
withMathJax(),
tags$div(HTML("<script type='text/x-mathjax-config' >
MathJax.Hub.Config({
showProcessingMessages: true,
jax: ['input/TeX', 'output/PreviewHTML'],
});
</script >
")),
dashboardBody(
# TabItemS refrences theset of dashboard pages as whole
tabItems(
# First Pages contents
tabItem(
tabName = "inputs",
h1("Here is the Problem"),
fluidRow(
box(width = 4,
h3("This symobl \\(\\mu\\) is much smaller")
)
)
)
)
)
)
ui <- dashboardPage(header,sidebar,body)
server <- function(input, output) {
}
shinyApp(ui, server)
I am using the shiny dashboard template to generate my web UI.
I'd like to dynamically generate an infobox when a computation is completed with a link directed to one of the tabItems in dashboardBody.
For example,
I can put this in my tabItem1 output,
renderInfoBox({
infoBox("Completed",
a("Computation Completed", href="#tabItem2"),
icon = icon("thumbs-o-up"), color = "green"
)
})
But the problem is that when I click the link, it does nothing. I would like it jumps to tabItem2. The link href seems valid when I hover on it.
Thanks!
Update:
Other than using Javascripts, looks like using actionLink and updateTabItems functions in shinydashboard package will work as well.
I apologize for the lengthy code sample, but I had to copy an example with tabItems from the shinydashboard homepage.
Your approach has only few problems. First, if you would inspect the menuItems, you'd see that the actual tab's id is not tabItem2, but shiny-tab-tabItem2. This, plus the extra attribute data-toggle="tab" within the a tag would suffice to open the desired tab. Snippet:
a("Computation Completed", href="#shiny-tab-tabItem2", "data-toggle" = "tab")
But, this has its limits. First and most obvious, the state of the menuItem in the sidebar is not set to active. This looks very odd and one might not be convinced, that one has been moved to another tab.
Second, and less obvious, if you listen to tab changes (on the server side), you will not get information about this tab switch. Those are triggered by the menuItem being clicked, and the tab itself will not report if it is visible or hidden.
So, my approach will be to simulate that the corresponding menuItem is clicked, and thus, all the above problems are solved.
Code example:
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(
tags$script(HTML("
var openTab = function(tabName){
$('a', $('.sidebar')).each(function() {
if(this.getAttribute('data-value') == tabName) {
this.click()
};
});
}
")),
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')", href="#"),
icon = icon("thumbs-o-up"), color = "green"
)
})
}
shinyApp(ui, server)
Note, that the only important thing is the onclick property, not an href. This means, that every div or other element can be used to create this link. You could even have just the thumbs-up image with this onclick command.
If you have more questions, please comment.
Best Regards
Edit: Whole infoBox clickable.
This is an answer to a comment by OmaymaS. The point was to make the infoBox a clickable container. To achieve this, one can define a new function that makes a somewhat different infoBox. The custom box will be as follows:
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)
}
This code is copied from the original infoBox function definition and only the line with onclick is new. I also added the openTab function (with some twitches) right inside the container such that you dont need to worry where to put this function inside the view. Might be a bit overloaded i feel.
This custom info box can be used exactly like the default one and if you pass the additional tab argument, the link to the sidebar is added.
Edit: Subtitle exploit
As Alex Dometrius mentioned, the use of subtitle crashes this functionality. This is because the script tag that was inserted, on accident, was used as the subtitle argument in order to be rendered with the box. To free up this spot, I edited the main example up top such that the script tag is sitting top level in the dashboardBody (literally anywhere in the ui would be fine).
(To avoid confusion: in Version 1, the tags$script was supplied inside of infobox where it was interpreted as the subtitle parameter.)
I'm trying to add a tabPanel in navbarPage so that when you click on it opens a modal window instead of a new tab. The snippet below is not valid because tabPanel does not have an id parameter.
library(shiny)
library(shinyBS)
shinyUI(fluidPage(
navbarPage("Sample App", id = "main_menu",
tabPanel("Open Modal", id = "moda")),
bsModal("modal1", "Example", "moda", p("This is a modal"))
)
If I edit the generated HTML code from browser, I can make this possible by changing the line
Open Modal
with
Open Modal
on the <li> element.
Any idea how to do this or at least how can I override the generated html from shiny?
One solution is to use Javascript to rewrite the attribute for the tab title. The JS code below finds the tab title link, and rewrites its attributes.
library(shiny)
jsStr <- '$(document).ready(function(){
$("a[data-value=\'OpenModal\']").attr({
"href":"#",
"data-toggle":"modal",
"data-target":"#modal1"
});
})
'
ui <- shinyUI(fluidPage(
tags$head(tags$script(HTML(jsStr))),
navbarPage("title",
tabPanel("OpenModal")
),
bsModal("modal1", "Example", "moda", p("This is a modal"))
))