knitr::opts_chunk$set( collapse = TRUE, comment = "#>" )
Navigating a web app without pointing and clicking is common in many popular websites. For example, GitHub has a number of hotkeys, all of which can be viewed by pressing ?.
The same functionality can be used in shiny apps with keys
. In this vignette, we'll go over a small example that demonstrates how you can use keys
to navigate a shiny app with tabs. First we start by loading the required packages:
library(keys) library(shiny)
Next, we define the UI part of our app:
ui <- fluidPage( useKeys(), keysInput("keys", c("1", "2", "3")), tabsetPanel( id = "tabs", tabPanel("Tab 1", "We're on tab 1"), tabPanel("Tab 2", "We're on tab 2"), tabPanel("Tab 3", "We're on tab 3") ) )
This interface has 3 components:
keys
input with some defined hotkeystabsetPanel
It's important to note that the tabsetPanel
has an ID assigned to it. An ID must be assigned to a tabsetPanel
in order to observe which tab is active from the server, ?tabsetPanel
will give some additional detail on this.
The last step is to write the server logic:
server <- function(input, output, session) { observeEvent(input$keys, { switch (input$keys, "1" = updateTabsetPanel(session, "tabs", "Tab 1"), "2" = updateTabsetPanel(session, "tabs", "Tab 2"), "3" = updateTabsetPanel(session, "tabs", "Tab 3") ) }) }
With this, we can observe which hotkeys the user presses and then update which tab is active. We could even bypass the switch
call by providing a value
to each tabPanel
that corresponds with the hotkeys:
tabPanel("Tab 1", "We're on tab 1", value = "1") tabPanel("Tab 2", "We're on tab 2", value = "2") tabPanel("Tab 3", "We're on tab 3", value = "3")
The server would then be simplified to:
observeEvent(input$keys, { updateTabsetPanel(session, "tabs", input$keys) })
This is pretty much all you need to start using keys
for conditional logic in your app. If you're looking for more advanced logic, you can be creative with functions like addKeys
, removeKeys
, and recordKeys
.
Finally, below is the full scripts for both apps demonstrated above:
# without tab values assigned library(keys) library(shiny) ui <- fluidPage( useKeys(), keysInput("keys", c("1", "2", "3")), tabsetPanel( id = "tabs", tabPanel("Tab 1", "We're on tab 1"), tabPanel("Tab 2", "We're on tab 2"), tabPanel("Tab 3", "We're on tab 3") ) ) server <- function(input, output, session) { observeEvent(input$keys, { switch (input$keys, "1" = updateTabsetPanel(session, "tabs", "Tab 1"), "2" = updateTabsetPanel(session, "tabs", "Tab 2"), "3" = updateTabsetPanel(session, "tabs", "Tab 3") ) }) } shinyApp(ui, server) # with tab values assigned library(keys) library(shiny) ui <- fluidPage( useKeys(), keysInput("keys", c("1", "2", "3")), tabsetPanel( id = "tabs", tabPanel("Tab 1", "We're on tab 1", value = "1"), tabPanel("Tab 2", "We're on tab 2", value = "2"), tabPanel("Tab 3", "We're on tab 3", value = "3") ) ) server <- function(input, output, session) { observeEvent(input$keys, { updateTabsetPanel(session, "tabs", input$keys) }) } shinyApp(ui, server)
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.