From the shiny dashboard github, I've gathered that it's possible to create drop down menus at the top right of the header, but there are only 3 "types" (messages, notifications, and tasks).
https://rstudio.github.io/shinydashboard/structure.html#structure-overview
Is there a method for creating a custom dropdown? I'd like to make a settings dropdown, where I give the user some checkboxes that they can use to adjust the dashboard in ways (displaying/hiding things, filtering data, etc.)
I customized one of the three types of menu to allow this. You could then add actionItem(s) for items. tabSelect property when true simulate the selection of a sidebarMenuItem.
dropdownActionMenu <- function (..., title=NULL, icon = NULL, .list = NULL, header=NULL) {
items <- c(list(...), .list)
lapply(items, shinydashboard:::tagAssert, type = "li")
type <- "notifications" # TODO créer action + CSS
dropdownClass <- paste0("dropdown ", type, "-menu")
tags$li(class = dropdownClass, a(href = "#", class = "dropdown-toggle",
`data-toggle` = "dropdown", icon, title), tags$ul(class = "dropdown-menu",
if(!is.null(header)) tags$li(class="header",header),
tags$li(tags$ul(class = "menu", items))))
}
actionItem = function (inputId, text, icon = NULL, tabSelect=FALSE) {
if(!is.null(icon)) {
shinydashboard:::tagAssert(icon, type = "i")
icon <- tagAppendAttributes(icon, class = paste0("text-", "success"))
}
if(tabSelect) {
tags$li(a(onclick=paste0("shinyjs.tabSelect('",inputId,"')"),icon,text))
} else {
tags$li(actionLink(inputId,text,icon))
}
}
javascript function to select tab (to be inserted after useShinyjs() in body)
extendShinyjs(text="shinyjs.tabSelect=function(tabName){$('a[data-value='+tabName+']').click();}")
Sample code
dashboardHeader(
dropdownActionMenu(title="test",
actionItem("mnuFirst","First"),
actionItem("mnuSecond","Second")
)
)
Shiny Dashboard is based on admin LTE. So the existing type of drop downs are designed for admin LTE use case, which is quite different from many Shiny app usage.
If something is not even available in admin LTE, it's less likely to be supported in Shiny dashboard.
For your specific question, you can put some controls in the side bar. Another possibility is to use the wrench icon in box, which is not implemented in Shiny yet.
Related
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 using a popup window in R Shiny with the following code:
library(shiny)
library(shinyjqui)
ui = basicPage(
actionButton("show", "Show modal dialog"),
textAreaInput(
inputId = 'textEditor',
label = NULL,
value = "R is a free software environment for statistical computing and graphics.",
height = "300",
resize = "none"
)
)
server = function(input, output)
{
observeEvent(input$show,
{
showModal(draggableModalDialog(
title = "Add the following text in the box at the left:",
"The R language is widely used among statisticians and data miners.",
footer = tagList(
actionButton("ok", "OK")
)
))
})
observeEvent(input$ok,
{
removeModal()
print("OK")
})
}
shinyApp(ui = ui, server = server)
It strikes me that when the popup window is open, you can not use the elements on the background. The whole background is greyed-out.
In most cases this may be the right behaviour, but in my case I would like to be able to edit the text in the left window while the popup window is open.
Is it possible to make this possible? If so, how?
You are trying to use a modal dialog in a way it is not intended to be used, so you need to make some manual changes in its behaviour. There are three problems you need to solve to fully remove the gray background and allow interactions with everything in the background:
You have to hide the backdrop (the gray background) itself.
The movable modal has a parent overlay that covers the full screen in order to allow free movement. This overlay captures all pointer events and makes everything below it unclickable.
The draggableModalDialog element has attribute tabindex="-1", which is a HTML trick that prevents interactions with input fields outside of the modal. See the source on Github.
Problems #1 and #2 are solvable with a little CSS:
ui = basicPage(
tags$head(tags$style(HTML("
.modal-backdrop { # hide backdrop
display: none;
}
.modal { # pass through clicks etc. on the overlay
pointer-events: none;
}
.modal-dialog { # do capture mouse events on the modal itself
pointer-events: all;
}"
))),
[...]
)
For problem #3 you actually need to modify the draggableModalDialog function. You can copy-paste the original definition and remove the tabindex definition:
customDraggableModalDialog <- function(..., title = NULL,
footer = shiny::modalButton("Dismiss"),
size = c("m", "s", "l"),
easyClose = FALSE, fade = TRUE) {
size <- match.arg(size)
cls <- if (fade) { "modal fade" } else { "modal" }
shiny::div(
id = "shiny-modal",
class = cls,
# tabindex = "-1", This line should be commented out or removed
`data-backdrop` = if (!easyClose) { "static" } ,
`data-keyboard` = if (!easyClose) { "false" } ,
shiny::div(
class = "modal-dialog",
class = switch(size, s = "modal-sm", m = NULL, l = "modal-lg"),
jqui_draggable(shiny::div(
class = "modal-content",
if (!is.null(title)) {
shiny::div(
class = "modal-header",
shiny::tags$h4(class = "modal-title", title)
)
},
shiny::div(class = "modal-body", ...),
if (!is.null(footer)) {
shiny::div(class = "modal-footer", footer)
}
))
),
shiny::tags$script("$('#shiny-modal').modal().focus();")
)
}
Then you can replace uses of draggableModalDialog with customDraggableModalDialog.
Resolution:
We had been struggling with modals opening in background since 6 months and the following settings has resolved it for all our clients:
Change the cache behavior in IE from “automatic” to “Every time the page changes” and you will never face this quirky issue :)
I want to remove the check all/none checkbox from a Reactable table.
In this image, I do not want the orange circled checkbox to appear.
Using Chrome Inspector, I examine the css of this checkbox and set display: none;
This removes the entire column of checkboxes. How do I remove just this one?
R Script
library(reactable)
reactable(iris,
onClick = "select",
selection = "multiple")
U can append some javascript code and make it run when the reactable is rendered:
ie
// Hide the select all check box
document.querySelector('.rt-select-input[aria-label="Select all rows"]').parentElement.parentElement.style.display = "none";
The final R-code
library(reactable)
library(htmlwidgets)
e<-reactable(iris,
onClick = "select",
selection = "multiple")
javascript <- JS('
document.querySelector(\'.rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement.style.display="none";
')
(p <- prependContent(e,onStaticRenderComplete(javascript)))
Improvements
In order to streamline the process and specifically target the wanted checkbox (as the aforementioned method would be unsuccessful when handling 2 tables in the same page) I wrote a function that'll dynamically target the wanted checkbox:
hide.select.all <- function(x){
javascript <- JS(paste0('
let id = null;
for (const script of document.querySelectorAll("script[data-for]")) {
if(script.text.includes("', x$x$tag$attribs$dataKey ,'")) {
id="#" + script.dataset.for;
break;
}
}
if(id) document.querySelector(id + \' .rt-select-input[aria-label="Select all rows"]\').parentElement.parentElement.style.display="none";
'))
prependContent(x,onStaticRenderComplete(javascript))
}
hide.select.all(e)
What is the best way to create in the header of a shiny dashboard a button where you can choose languages to appear on the app page(English, French, Spanish...)? What I want is a kind of a dropdown button like this(https://www.conversationexchange.com/resources/keyboard-language.php?lg=en). I want to add a flag icon as well next to each language choice.
Any solution or tips would be appreciated!
What I tried:
dropdownMenu
It works but it's only useful either for "messages", "notifications" or "tasks". I was able to customise none of them to match my purpose.
navbarMenu
This is exactly what I want but can be used only in navbar. I tried putting this to the header but didn't work.
I assume that you are using shinydashboard, then you can do:
dashboardHeader(
title = "MY TITLE",
tags$li(class = "dropdown",
radioButtons(inputId = "language",
label = "",
choices = c("日文" = "cn", "English" = "en"),
selected = "jp")
)
)
How can I change the default font and its size from a menu in a GUI I'm creating using Tcltk? The example below has only one menu called 'File', but in my GUI, It will have more than that. So all of them have to be re-sized. Is there any way to do that for my entire GUI?
Thank you in advance!
require(tcltk)
readCsv <- function(){
myval <- tkgetOpenFile()
mydata <- read.csv(paste(as.character(myval), collapse = " "))
assign("myData", mydata, envir = .GlobalEnv)
}
tt <- tktoplevel()
topMenu <- tkmenu(tt)
tkconfigure(tt, menu = topMenu)
fileMenu <- tkmenu(topMenu, tearoff = FALSE)
tkadd(fileMenu, "command", label = "Quit", command = function() tkdestroy(tt))
tkadd(fileMenu, "command", label = "Load", command = function() readCsv())
tkadd(topMenu, "cascade", label = "File", menu = fileMenu)
tkfocus(tt)
The default font for menus is a named font; TkMenuFont on most platforms (and menu on OSX, where you really shouldn't change it). This is usually mapped to the correct system default font for menus. However, if you do want to change it, you're still recommended to use a named font (which is what is used in a font object in R TclTk) following the pattern on this page except that you're applying the font to a menu widget instead of a label.
# Example to show how to do it
fontMenu <- tkfont.create(family="times",size=24,weight="bold",slant="italic")
fileMenu <- tkmenu(topMenu, tearoff = FALSE, font = fontMenu)
The only platform where you shouldn't do this at all is OSX, where menus work rather differently (except at the script level; there's a lot of differences being hidden under the covers!)
Yes, using the option database.
See this question for an example showing the option database for use with a button, but works the same for menus:
https://stackoverflow.com/questions/20960107/is-there-a-way-to-have-a-global-style-for-button-in-tcl