I found the bsModal works as expected with fluidPage but not without it. Just click "View Table" button to see the difference.
The version with fluidPage:
library(shiny)
library(shinyBS)
shinyApp(
ui =
fluidPage(
sidebarLayout(
sidebarPanel(
actionButton("tabBut", "View Table")
),
mainPanel(
bsModal("modalExample", "Data Table", "tabBut", size = "large",
"distTable")
)
)
),
server =
function(input, output, session) {}
)
The version without fluidPage, the only change is that the fluidPage is replaced by tagList:
library(shiny)
library(shinyBS)
shinyApp(
ui =
tagList(
sidebarLayout(
sidebarPanel(
actionButton("tabBut", "View Table")
),
mainPanel(
bsModal("modalExample", "Data Table", "tabBut", size = "large",
"distTable")
)
)
),
server =
function(input, output, session) {}
)
Can anyboday help me explain what happened between bsModal and fluidPage?
Because fluidPage is much, much more than a simple tagList.
tagList simply takes it arguments and concatenates them (expecting each argument to be some sort of HTML tag). fluidPage literally generates an entire HTML document with bootstrap dependencies.
Your first example is figuratively "build a house with basement, floor plan and attic" with sidebarLayout explaining the layout of floors and fluidPage being the house. Remove the fluidPage and you're trying to build a house with basement, floor plan and attic, but without the foundation, walls or roof.
Related
I have been trying to develop this tabsetpanel for a while but without success. The goal is to assemble the tabs dynamically. After the user click the search button, the tabs will be assembled from the user's selection in selectizeInput. Each tab will have a specific content. When the user presses the search button again, the tabs must be built again with the information from selectizeInput without duplication.
I appreciate any help.
the result should be like this image:
library(shiny)
ui <- fluidPage(
title = "Examples of DataTables",
sidebarLayout(
sidebarPanel(
selectizeInput(
'state', 'State', choices = state.name, multiple = TRUE
),
actionButton("search", "Search"),
),
mainPanel(
tabsetPanel(
id = 'dataset',
tabPanel("tab1", verbatimTextOutput("tab1"))
)
)
)
)
server <- function(input, output) {
output$tab1 <- renderPrint({
"tab1"
})
}
shinyApp(ui, server)
Well, I figure it out using insertUI and removeUI. To loop the tabsetPanel I used do.call method and voila!!!
How can I set the font in a text in a shiny app? Should I change it for every tags$ or is there a generic way?
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
),
dashboardBody(
)
)
server <- function(input, output) {
tags$h3(style="color:black","font-family:Calibri", "Text")
}
shinyApp(ui, server)
this is sample of the part that I want to edit:
output$tabers<-renderUI({
if(input$sec=="Introduction"){
tabsetPanel(id="I",type="tabs",tabPanel("Start", id = "StartHR",
tags$br(),
img(src='Alpha-Architect.png', align = "center",height="100%", width="50%"),
tags$br(),
tags$br(),
tags$h3(style="color:black", "About this Dashboard"),
br(),
p(style="text-align:justify; color:black;'",'Produced by',a("Alpha Architect.",
href = "https://alphaarchitect.com"),"and",a("RStudio.",
href = "http://www.reproduciblefinance.com/")),
#br(),
br(),
p(style="text-align:justify; color:black;'",'Please read our full disclosures',a("here",
href = "https://alphaarchitect.com/disclosures")),
Why do you write it in server?
To globally apply styles, you need to add styles in head of HTML.
Add this as your dashboard body:
dashboardBody(
tags$head(
tags$style("h3 {font-family:Calibri}")
)
)
I read all the threads about dynamic ui within the Shiny framework, but I did not find anything that work. I want to display a twitter timeline. This chunk of code works really well :
library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
a("Tweets by Andrew Ng",
class="twitter-timeline",
href = "https://twitter.com/AndrewYNg"
)
)
)
)
, server = function(input, output, session){
}
)
)
But when, I try to make it reactive, I only got a link to the twitter timeline:
library(shiny)
library(shinydashboard)
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
uiOutput("mytimeline")
)
)
)
, server = function(input, output, session){
output$mytimeline <- renderUI({
a("Tweets by Andrew Ng",
class="twitter-timeline",
href = "https://twitter.com/AndrewYNg"
)
})
}
)
)
The Twitter script only loads embedded content when it runs the first time. Since the script is in static UI but the timeline is in dynamic UI, the script will always run before the timeline is inserted.
The Twitter docs have a section about this: https://dev.twitter.com/web/javascript/initialization
You can run twttr.widgets.load() to scan the page for newly added embedded content.
One way to run execute this when inserting embedded content would be to include it in a script tag:
library(shiny)
twitterTimeline <- function(href, ...) {
tagList(
tags$a(class = "twitter-timeline", href = href, ...),
tags$script("twttr.widgets.load()")
)
}
runApp(list(ui = fluidPage(
tags$head(tags$script('!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?\'http\':\'https\';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");')),
titlePanel(""),
sidebarLayout(
sidebarPanel()
, mainPanel(
uiOutput("mytimeline")
)
)
)
,
server = function(input, output, session) {
output$mytimeline <- renderUI({
twitterTimeline("https://twitter.com/AndrewYNg", "Tweets by Andrew Ng")
})
}
))
See How to enable syntax highlighting in R Shiny app with htmlOutput for a similar issue with more details
I would like to add a tooltip for navbarMenu in Shiny app. Similar question asked here but, there is no answer.Here is my reproducible code
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu("Tab1",bsTooltip(id="Tab1", title="Short description for the tab", trigger = "hover"),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
During my research I found this solution R Shiny: Use navbarPage with bsModal by shinyBS, but for bsModel.
Also, there is a procedure mentioned here which is based in java-script.I know both solutions are for tabpanel but I believe it's the same problem, which is navbarMenu and tabpanel don't have an id.
I'm statistician and I don't have background in HTML or java-script to rewrite the attribute for the tab title or navbarMenu.
I hope I phrase my question in a clear manner. Thanks in advance for your time and kind help.
you can use HTML wenn passing the Title of the Tabs. in this case I just pt the title in a span and added the attribute titlewhich is the attribute HTML uses default for mouse-overs. For me this is much sinpler the trying to add it over shinyBS.
library(shiny)
library(shinyBS)
ui <- shinyUI(fluidPage(
sidebarLayout(
sidebarPanel(),
mainPanel(tabsetPanel(
navbarMenu(span("Tab1",title="Short description for the tab" ),
tabPanel("Tab1.1"),
tabPanel("Tab1.2")),
tabPanel("Tab2",tabsetPanel(
tabPanel("Tab2.1"),
tabPanel("Tab2.2"))),
tabPanel("Tab3",tabsetPanel(
tabPanel("Tab3.1"),
tabPanel("Tab3.2"),
tabPanel("Tab3.3")))
)))))
server <- function(input, output) {}
shinyApp(ui = ui, server = server)
hope this helps!
I found another solution using javascript. Perhaps it may be more useful.
library(shiny)
shinyApp(
ui = navbarPage(
tags$script(HTML('
$( document ).on("shiny:sessioninitialized", function(event) {
$(\'span[data-toggle="tooltip"]\').tooltip({
html: true
});
});'
)),
navbarMenu(
"Menu"
,tabPanel(span("navbarTitle 1",title="XXX",`data-toggle`="tooltip"),
tabsetPanel(
tabPanel(span("Tab 1", title = "aaa",`data-toggle`="tooltip")),
tabPanel(span("Tab 2",title="bbb",`data-toggle`="tooltip")),
tabPanel(span("Tab 3",title="ccc",`data-toggle`="tooltip"))
)
)
,tabPanel( "navbarTitle 2")
)
),
server = function(input, output) {
}
)
I've been trying to use shinyBS modals with dateInput. The problem is that the calendar widget is hidden behind the modal. Here is my example code:
library(shiny)
library(shinyBS)
shinyApp(
ui =fluidPage(
mainPanel(
actionButton("button", label = "Open Modal"),
bsModal("modalExample", "Data Table", "rowtogg", size = "small",
fluidPage(dateInput("dates", "Enter date")))
)
),
server = function(input, output, session) {
observeEvent({
input$button
},{
toggleModal(session, "modalExample", "open")
})
}
)
A screenshot of the problem can be found at: https://github.com/ebailey78/shinyBS/issues/46, where I already asked the question. However it seems to me like this is a more "general" problem, so I was hoping someone over here could help me out.
EDIT: Thanks to Yenne Info it works by adding:
tags$style(type = "text/css", ".datepicker{z-index: 1100 !important;}"),