Popout button tutorial

This template provides a useful utility if your Shiny apps are typcially embedded into small iframes, like below, and displays an attractive “popout” button which will open the Shiny app in a new browser window:

What is being shown?

This Shiny app is designed to respond to “allowPopout” query string in the URL, i.e.

https://trainingidn.shinyapps.io/shiny-template_popout-button?allowPopout=TRUE/

The “query string” is everything after the “?”, multiple “query parameters” could be given (but aren’t coded for in this app) for instance: https://trainingidn.shinyapps.io/shiny-template_popout-button?allowPopout=TRUE&histColor=blue&histXAxis=foo

shinyServer(function(input, output, session))

The session argument of the shinyServer function allows the server component of a Shiny app to receive information from the client machines displaying the Shiny app. It’s perfectly safe to always include the session argument as it will preveny annoying errors from forgetting to include it.

For a detailed explanation of what’s available from session see this RStudio tutorial.

uiOutput(“url_allow_popout_UI”)

The optional “popout” button is displayed on screen when uiOutput("url_allow_popout_UI") is called in the ui.R file. It is therefore crucial that it is called as early as possible, to assist in this it is adviseable to use fluidPage rather than having “naked” objects like sidebarLayout.

shinyUI(navbarPage(
  "Name of App",
  tabPanel("Visualisation",
           fluidPage(
             ## url_allow_popout_UI MUST occur in first tabPanel
             uiOutput("url_allow_popout_UI"),
             plotOutput("chart"),
             ...
))))

source(“url_allowPopout.R”, local = TRUE)

All of the active components of this template are contained within the url_allowPopout.R file, this ensures portability of the code. The code is included into the server file as follows:

source("url_allowPopout.R", local = TRUE)

The local = TRUE argument ensures that the code is evaluated within the context of the shinyServer function, allowing the session parameter to be queried and output$url_allow_popout_UI to be sent to the ui.R file.

url_allowPopout_check

This uses a reactive expression to parse the query string for “allowPopout”, see reactive expressions tutorial if you’re unfamiliar with how eventReactive works.

parseQueryString is a utility function from the shiny library that returns the query string as a list of key-value pairs. We check whether allowPopout=="TRUE", with the freedom for the user to use any case for “true” but requires “allowPopout” to be written in the correct case.

If allowPopout=="TRUE" then the url_allowPopout_check reactive expression object is set to TRUE, otherwise it is FALSE.

url_allowPopout_icon

This is the function that generates the button:

url_allowPopout_icon(glyph = ,text = ,link = )

• glyph: What icon should be displayed? By default the “fullscreen” from the Glphyicons for Boostrap collection of excellent icons is used, but you can feasibly use any HTML here (including FontAwesome icons).
• text: What text should be displayed next to the icon?
• link: Automatically extracts the URL of the shiny app, meaning the new window will be spawned with the initial query string.

The function includes a JavaScript function that inserts the popout icon into navbar, the magic is contained within insertAdjacentHTML - see here for the MDN documentation on the method.

url_allow_popout_UI

Finally, if url_allowPopout_check == TRUE then the url_allowPopout_icon function is called and the popout icon is shown.