Shiny NavBar add additional info

enter image description here

Since my code is long I have considered the example code from here

I tried adding the following code (after last tabPanel) from here. But no luck.

tags$script(HTML("var header = $('.navbar > .container');
                        header.append('<div Company name text here>')")) 

All I want is a plain text (information) to be on the right hand side of the NavBar.

Asked By: Vasim
||

Answer #1:

The following code gives you what you want. The main problem was with tour html tags.

library(shiny)


server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars, type=input$plotType)
  })

  output$summary <- renderPrint({
    summary(cars)
  })

  output$table <- DT::renderDataTable({
    DT::datatable(cars)
  })
}


ui <-shinyUI(navbarPage("Navbar!",
           tabPanel("Plot",
                    sidebarLayout(
                      sidebarPanel(
                        radioButtons("plotType", "Plot type",
                                     c("Scatter"="p", "Line"="l")
                        )
                      ),
                      mainPanel(
                        plotOutput("plot")
                      )
                    )
           ),
           tabPanel("Summary",
                    verbatimTextOutput("summary")
           ),


           tags$script(HTML("var header = $('.navbar > .container');
                       header.append('<div style=""float:right""><h3>Company name text here</h3></div>');
                       console.log(header)"))
))

shinyApp(ui = ui, server = server)

Hope it helps!

[EDIT]: Due to recent changes in the navbar classes the above code doesn't work anymore. The below code seems to work:

library(shiny)


server <- function(input, output, session) {
  output$plot <- renderPlot({
    plot(cars, type=input$plotType)
  })

  output$summary <- renderPrint({
    summary(cars)
  })

  output$table <- DT::renderDataTable({
    DT::datatable(cars)
  })
}


ui <-shinyUI(navbarPage("Navbar!",
                        tabPanel("Plot",
                                 sidebarLayout(
                                   sidebarPanel(
                                     radioButtons("plotType", "Plot type",
                                                  c("Scatter"="p", "Line"="l")
                                     )
                                   ),
                                   mainPanel(
                                     plotOutput("plot")
                                   )
                                 )
                        ),
                        tabPanel("Summary",
                                 verbatimTextOutput("summary")
                        ),


                        tags$script(HTML("var header = $('.navbar> .container-fluid');
                       header.append('<div style=""float:right""><h3>Company name text here</h3></div>');
                       console.log(header)"))
))

shinyApp(ui = ui, server = server)

The only change is that in the html script .navbar > .container has been change to .navbar> .container-fluid.

Answered By: SBista

Answer #2:

I found another elegant/minimalist way to add text into the navbar using the package "shinyjs", with the added benefit of what i wanted, the ability to stack text on the right hand side of the navbar. It is in the "shinyjs::html()" function located in "server"

library(shiny)

ui <- fluidPage(
    shinyjs::useShinyjs(),#this line NEEDS to be somewhere in the ui!
    navbarPage(
        title = HTML("<b><u>Title</u></b>"),
        id = 'banner'
    )
)

server <- function(input, output) {
    
    shinyjs::addClass(id = "banner", class = "navbar-right")#moves navbar right
    #this next line is the one APPENDING text to the navbar, thanks to "add = TRUE"
    shinyjs::html(id = "banner", html = "<p>companyName</p><p>[email protected]</p>", add = TRUE)

}

# Run the application 
shinyApp(ui = ui, server = server)
Answered By: acoger
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .



# More Articles