R Shiny navbarMenu - r

I'm developing a Shiny app using the development version of the package, as documented here.
When I use navbarPage with tabsetPanel, everything works as expected:
library(shiny)
shinyUI(
navbarPage("Page Title",
tabPanel("Panel 1")
tabPanel("Panel 2"),
tabPanel("Panel 3"))
)
But when I add a navbarMenu to one of the tabs:
library(shiny)
shinyUI(
navbarPage("Page Title",
navbarMenu("Menu",
tabPanel("Panel 1.1"),
tabPanel("Panel 1.2")),
tabPanel("Panel 2"),
tabPanel("Panel 3"))
)
The text 'tab-pane active' appears on every tab of the app, even the ones not inside the navbarMenu. It seems like 'tab-pane active' is a CSS class that should be inside of a div tag, but somehow it's appearing as plain text in the page source code.
Does anyone have an idea about what's causing that, or how it can be fixed?

I wish I could find a good analogy or were a better writer to explain this in few words.
But I think of it in terms of containers and content. In your fist example you have a "navbar page". That is a container that can be filled with other "pages" such as tabPanels.
But tabPanels cannot be filled with tabPanels, only with content like graphs or tables that your R output is generating. If you want a page with multiple tabPanels you need a container that is able to contain them: a tabsetPanel (literally a set of tabpanels).
shinyUI(
navbarPage("Page Title",
tabPanel("Panel 1",
tabsetPanel(
tabPanel("Panel 1.1"),
tabPanel("Panel 1.2")
)),
tabPanel("Panel 2"),
tabPanel("Panel 3")
)
)
now you will see that you have an extra "page" set by the tabsetPanel (a set of tabs) with its own tabs.
You can try to follow that analogy through with other examples on the shiny app layout guide that you link to. So for instance, in your example you will never be able to make a submenu but just adding another tabPanel to a tabPanel (a tabPanel cannot be a container for a tabPanel as we saw above). You would first need to say that you want a navbarMenu, which in fact can contain multiple tabPanels.
It seems complex because navigation and pages are very closely related, and if a container contains containers, it becomes in practice a navigation item. There are good hints in the terms that the RStudio team chose for these lay-out items, but it is not always immediately obvious how it works.

Related

Flutter - Sliver App Bar (Use Buttons instead of Tabs)

We are using Sliver App bar for our app. The difference in our app is we have multiple buttons instead of tabs (as shown in "Final Result" in the article below)
https://medium.com/#diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe
But we are seeing issue
Scenario: Select Button1 (instead of Tab1), Collapse upper portion of the app, Select "Button 2"
Issue: As soon as "Button 2" is clicked the upper section expands
Expectations: The upper section should stay collapsed when "Button 2" is clicked or switched between "Button 1" & "Button 2" or should expand ONLY when user pulls the screen down.
Has anyone faced this issue?
Please let me know if you need a code snippet. Its not exactly the same as mentioned in the link as we have some modifications to add buttons and actions related to it.
Tried code provided here..
https://medium.com/#diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

upload button in Shiny

I've some Shiny app with download button:
column(width=1,downloadButton("downloadData", "download", class = "btn-success",style = "font-family:calibri;font-size: 45px !important;")),
I want also some button but just to upload file, I don't want to use "fileInput" because I want
to set style to my button and I don't want also the text box that comes with "fileInput",
I just want a button.
You can use the default fileInput and style-away the text input element used to show the filename.
# modified https://stackoverflow.com/a/54447823/3358272
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
titlePanel(""),
sidebarLayout(
sidebarPanel(
fileInput("file", "Select a file")
),
mainPanel()
)
)
server <- function(input, output){
runjs("$('#file').parent().parent().siblings().removeClass('form-control').attr('hidden','true');")
}
shinyApp(ui, server)
Notes:
You may want to finesse the rest of the styling of it, as two corners are rounded, two not.
Depending on the interface, you are likely to see the input box momentarily before it is deleted. This is due to running this in javascript once the layout has already been set.
I believe the encasing div is sized based on the input form element being present before it disappears.
There might be other interactions I haven't tested.
A better solution might be to implement this in raw CSS and read in from the start without running it in javascript. (I encourage somebody else to go that route.)

Shiny - display image next to widget for info pop-up

I'm trying to display an information (i) image next to a selectInput control in Shiny, which the user can click on to display some more extensive help about the control.
I can use renderImage to display the image and modalDialog combined with a click event on the rendered image to display the information. HOWEVER what I am unable to achieve is to put the image next to the widget. By default it displays below the widget. Theoretically I could put the image in a new column but this leads to far too much space between the widget and the image.
Is there any way around this? Alternatively, can I display the image in the control's label while still allowing it to be clicked?
You could use the property display:inline-block the elements that should appear next to each other. Working example:
library(shiny)
ui <- fluidPage(
div(style='display: inline-block;',
selectInput('input','Input: ', choices=LETTERS[1:10])
),
img(src='https://www.zorro.com/wp-content/uploads/cc_resize/005-1200x542.jpg',height='100px',style='display: inline-block;'))
server <- function(input, output, session) {
}
shinyApp(ui, server)
Furthermore, you can use e.g. margin-left:100px in the image style to control the space between the elements.
Hope this helps!

Control visible/invisible of the menu items of shiny dashboard using "shinyjs" package

Can I friendly ask a question about “shinyjs” package?
I built a shiny dashboard and I would like to set a function using “shinyjs” to control the visible/invisible of menu items.
I designed the first menu item/page is to select the data for this dashboard. After the users selected the data they want, I don’t want them to go back to change their selection. So I want to design a button that if users click this button, the first menu item will disappear but the rest of the menu item will appear.
I am sure it is possible but I think it need some Javascript knowledge to code it.
It is just like the answer for this question but my is just toggling the visible/invisible of menu items.
activate tabpanel from another tabpanel
I appreciate any replies!
Thank you!
Joanna
I solved it by adding tags$div() for the items that I want to hide/show.
ui:
hidden(tags$div(
class = "header",
id = "haha",
menuItem(
tags$em("DIY Pivot Table", style = "font-size:170%"),
icon = icon("bar-chart-o"),
tabName = "Pivot"
),
br(),
menuItem(
tags$em("Search Data", style = "font-size:170%"),
icon = icon("bar-chart-o"),
tabName = "searchdata"
)
))
server:
observeEvent(input$showSidebar, {
shinyjs::toggle("haha")
})
So in this way, you can use the input$showSidebar to control visible/invisible of menu items.

Using conditionalPanel to create a temporary banner that disappears if user navigates away

I want to create a welcome message for when a user first opens the shiny webpage. Currently I have it such that it is constantly on the first tabPanel. Is there a way to make it disappear when the user navigates away and then back to that panel?
fluidRow(
column(width=12,
tabsetPanel(type = "tabs", id = "tabs1",
tabPanel("Express Usage", wellPanel("Welcome! Please select the libraries you are interested in viewing from below and use the tabs to navigate between graphs. It is best to limit your selection to no more than 5 libraries at a time"), plotOutput("express_Plot", height=400)),
tabPanel("Juvenile Usage", plotOutput("juvenile_Plot", height=400)),
tabPanel("test", h3(textOutput("text_test")))))
),

Resources