navbarPage with window title

[Andy Singleton]

Is there any way of setting the window title when using navbarPage?

For example, if I simply only use fluidPage in ui.R, within that I can set:

titlePanel(title="My Shiny App",windowTitle="Shiny")

Is there a similar way to do this if I use navbarPage as I want the window title to be shorter than the title set in navbarPage.

Thanks.

[Andy Singleton]

I found a work-around but it doesn't seem to be the most elegant solution:

Adding titlePanel BEFORE navbarPage allows the window title to be explicitly set but results in an ugly (for me) extra panel above the navbar. I get around this by setting the height of this panel to 0px and playing around with the background colour and padding.

shinyUI(fluidPage(

  div(style=""background-color:#FEFEFE;padding: 1px 0px;height: 0px",

    titlePanel(

      title="",windowTitle="Shiny"

    )

  ),

  navbarPage(title="My Shiny App",

.

.

etc.

I'm wondering if there's a better way....

[Herman Sontrop]

Hi,

one solution is to use a modal. I made a small shiny app for you which displays a welcome message to the user in this way. After you close it you end up in the 'normal' app. Obviously if the welcome page is a real part of the application you can go back to, it can just be a tab in a tab panel. On the other hand, if it is a one time moment in the use of your app a modal may be an option.

The modal can be included using the ShinyBS package, which offers various nice extensions to the basic shiny framework. You can completely customize the modal e.g. you can make the modal full screen by changing the associated css rules, add a background etc. I included an example of how to do just that.

The modal addition in shinyBS is quite new, to use it install the development version of shinyBS:

install.packages("devtools")
install_github("shinyBS", "ebailey78")

Below the ui.r and server.r scripts of the toy app. The app itself allows you to sort a table by a column and save the result (I shamelessly copied that part from one of the other Shiny group users ;-)

Hope this helps, best Herman
the Netherlands

###
### ui.r
###

library(shiny)
library(shinyBS)

shinyUI(fluidPage(

    # add a button to open the modal
    bsButton("moTrig", "open Modal", style = "primary"),
   
    # a simple modal
    bsModal("moMod", "Welcome message", trigger = "moTrig",
          tags$head(
                tags$style(HTML("
                 .modal{
                  width: 90%;
                  left: 5%;
                  margin-left:auto;
                  margin-right:auto;
                  height: auto;
                }
                .modal-body {
                  color: white;
                  background-image:url('http://www.designbolts.com/wp-content/uploads/2012/11/Free-Topographic-Map-Seamless-pattern.jpg');
                }
            "))
          ),
         
        h1("Hello, welcome to shiny")
    ),

    # below some code to be able to download a filtered table object
    # that is, the user performs some filtering on the table by manual actions
    # after which you can download the table in
    tags$head(
        tags$style(type="text/css", "tfoot {display: table-header-group}")
    ),
  
    titlePanel("Filtered Data CSV Download"),
        sidebarLayout(
            sidebarPanel(
                HTML('
                    <script type="text/javascript">
                        $(document).ready(function() {
                            $("#downloadData").click(function() {
                                var filtered_table_data = $("#DataTables_Table_0").dataTable()._("tr", {"filter":"applied"});
                                Shiny.onInputChange("filtered_table", filtered_table_data);
                            });
                        });
                   </script>
                '),

                downloadButton('downloadData', 'Download Filtered Data')
            ),
            mainPanel(
                dataTableOutput("data_table")
            )
        )
))

###
### server.r
###


library(shiny)

shinyServer(function(input, output, session) {

    # open the modal on opening the shiny app
    toggleModal(session, "moMod")
       
    # below the code for the table example       
    Dataset <- reactive({
        df <- mtcars
        df[is.na(df)] <- ""
        return(df)
    })

    output$data_table <- renderDataTable({
        Dataset()
    }, options = list(sDom = "ilftpr",iDisplayLength = 10))


    ProcessedFilteredData <- reactive({
        v <- input$filtered_table
        col_names <- names(Dataset())
        n_cols <- length(col_names)
        n_row <- length(v)/n_cols
        m <- matrix(v, ncol = n_cols, byrow = TRUE)
        df <- data.frame(m)
        names(df) <- col_names
        return(df)
    })

    output$downloadData <- downloadHandler(
        filename = function() { 'filtered_data.csv' }, content = function(file) {
            write.csv(ProcessedFilteredData(), file, row.names = FALSE)
        }
    )
})




Op woensdag 4 juni 2014 15:45:42 UTC+2 schreef Andy Singleton:

[snickleach]

I had the same problem. In my first tabPanel, I use a sidebarLayout. Within sidebarPanel(), include the line

HTML('<script> document.title = "My Short Title"; </script>')

This overrides the default script created by navbarPage().

Hope this helps.

Scott

[Alain Vanlanduyt]

Hi,

Do you think it's possible to combine the use of bsModal and a navbarpage so that the bsButton only appears on a defined tab; if i try this in ui.R, i receive this message from server :
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Thanks
KR
Alain

##ui.r
shinyUI(bootstrapPage(

shinyUI(navbarPage("testtest",

tabPanel("Test1"
,h1("Hello, welcome to shiny")
),

tabPanel("Test2"
,h1("Hello, welcome to shiny 2")
,bsButton("moTrig", "open Modal", style = "primary"),

bsModal("moMod", "Welcome message", trigger = "moTrig",
tags$head(
tags$style(HTML("
.modal{
width: 90%;
left: 5%;
margin-left:auto;
margin-right:auto;
height: auto;
}
.modal-body {

color: green;
}
"))
),

    h1("Hello, welcome to shiny3"),         )

)

)
))

 

• Write
• Preview

[Herman Sontrop]

Hi,

yes it is. Try the ui.r & server.r code below. You made a few mistakes in ui.r. You should not refer to shinyUI twice and you can leave out bootstrapPage if you include navbarPage.

A related note: In the next release RStudio will implement Bootstrap 3 in Shiny. shinyBS uses the Bootstrap 2.x framework. I expect that a lot of the shinyBS code will break if you update Shiny when the next release comes out. There is a bootstrap 2 compatibility layer offered by RStudio by the way.

#ui.r

    library(shinyBS)
    shinyUI(navbarPage("Modal test",

    tabPanel("Test1",
      h1("Hello, welcome to shiny")
    ),

    tabPanel("Test2",
      h1("Hello, welcome to shiny 2"),

      bsButton("moTrig", "open Modal", style = "primary"),

      bsModal("moMod", "Welcome message", trigger = "moTrig",
        tags$head(
        tags$style(HTML("
          .modal{
            width: 90%;
            left: 5%;
            margin-left:auto;
            margin-right:auto;
            height: auto;
          }
          .modal-body {
            color: green;
          }
          "))
        ),

        h1("Hello, welcome to shiny3")       
      )  
    )
  ))

#server.r

  shinyServer(function(input, output, session) {
  })

[Alain Vanlanduyt]

 

 

Thank you very much for debugging and also for information about the new version of shiny (https://github.com/rstudio/shinyBootstrap2)