Site icon R-bloggers

Official release of shiny.router and its new features

[This article was first published on r – Appsilon Data Science | We Provide End­ to­ End Data Science Solutions, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

In a web application, routing is the process of using URLs to drive the user interface. Routing adds more possibilities and flexibility while building a complex and advanced web application, offering dividing app into separated sections.

New features

Contributing to open source is incorporated into Appsilon mission. Last week we updated i18n internationalization package, now it’s time for shiny.router. Our shiny.router package provides you an easy solution how to add routing to your Shiny application. Since the last release we managed to improve and add some great features to it. Find them on the list below!

Routing moved fully to R assets

Previously shiny.router was based on the external page.js library. Thanks to the use of shiny session object we moved it fully to R.

Separated server for each bookmark

Now each bookmark can be isolated and fully working shiny app. The new feature allows you not only to separate UI for each bookmark – you may also define its own server now. Just check below example!

library(shiny)
library(shiny.router)

# This creates UI for each page.
page <- function(title, content) {
  div(
    titlePanel(title),
    p(content),
    uiOutput("power_of_input")
  )
}

# Part of both sample pages.
home_page <- page("Home page", "This is the home page!")
side_page <- page("Side page", "This is the side page!")

# Callbacks on the server side for the sample pages
home_server <- function(input, output, session) {
  output$power_of_input <- renderUI({
    HTML(paste(
      "I display <strong>square</strong> of input and pass result to <code>output$power_of_input</code>: ", 
      as.numeric(input$int) ^ 2))
  })
}

side_server <- function(input, output, session) {
  output$power_of_input <- renderUI({
    HTML(paste(
      "I display <strong>cube</strong> of input and <strong>also</strong> pass result to <code>output$power_of_input</code>: ", 
      as.numeric(input$int) ^ 3))
  })
}

# Create routing. We provide routing path, a UI as well as a server-side callback for each page.
router <- make_router(
  route("home", home_page, home_server),
  route("side", side_page, side_server)
)

# Create output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
  shiny::sliderInput("int", "Choose integer:", -10, 10, 1, 1),
  router_ui()
))

# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
  router(input, output, session)
})

# Run server in a standard way.
shinyApp(ui, server)

Pass parameters to an app using GET URL variables

library(shiny)
library(shiny.router)

# Main page UI.
home_page <- div(
  titlePanel("Home page"),
  p("This is the home page!"),
  uiOutput("power_of_input")
)

# Creates routing. We provide routing path, a UI as well as a server-side callback for each page.
router <- make_router(
  route("/", home_page, NA)
)

# Create output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
  shiny::sliderInput("int", "Choose integer:", -10, 10, 1, 1),
  router_ui()
))

# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
  router(input, output, session)
  
  component <- reactive({
    if (is.null(get_query_param()$add)) {
      return(0)
    }
    as.numeric(get_query_param()$add)
  })
  
  output$power_of_input <- renderUI({
    HTML(paste(
      "I display input increased by <code>add</code> GET parameter from app url and pass result to <code>output$power_of_input</code>: ", 
      as.numeric(input$int) + component()))
  })
})

# Run server in a standard way.
shinyApp(ui, server)

Operate routing from the server side

library(shiny)
library(shiny.router)

# This generates menu in user interface with links.
menu <- (
  tags$ul(
    tags$li(a(class = "item", href = route_link("home"), "Home page")),
    tags$li(a(class = "item", href = route_link("side"), "Side page"))
  )
)

# This creates UI for each page.
page <- function(title, content) {
  div(
    menu,
    titlePanel(title),
    p(content),
    actionButton("switch_page", "Click to switch page!")
  )
}

# Both sample pages.
home_page <- page("Home page", uiOutput("current_page"))
side_page <- page("Side page", uiOutput("current_page"))

# Creates router. We provide routing path, a UI as
# well as a server-side callback for each page.
router <- make_router(
  route("home", home_page, NA),
  route("side", side_page, NA)
)

# Create output for our router in main UI of Shiny app.
ui <- shinyUI(fluidPage(
  router_ui()
))

# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
  router(input, output, session)
  
  output$current_page <- renderText({
    page <- get_page(session)
    sprintf("Welcome on %s page!", page)
  })
  
  observeEvent(input$switch_page, {
    if (is_page("home")) {
      change_page("side")
    } else if (is_page("side")) {
      change_page("home")
    }
  })
})

# Run server in a standard way.
shinyApp(ui, server)

Styling – Bootstrap and Semantic UI

You can suppress Bootstrap dependency on the specified bookmark. You can switch between Bootstrap and Semantic UI pages or disable styles. This is especially useful when using both Bootstrap and semantic-UI frameworks in one application.

 

library(shiny)
library(shiny.router)
library(shiny.semantic)

# Both sample pages.
bootstrap_page <- fluidPage(
  sidebarLayout(
    sidebarPanel(
      sliderInput("obs_bootstrap",
                  NULL,
                  min = 0,
                  max = 100,
                  value = 50,
                  step = 1)
    ),
    mainPanel(
      p("Selected value:"),
      textOutput("value_bootstrap")
    )
  )
)

semanticui_page <- semanticPage(
  slider_input("obs_semantic",
              min = 0,
              max = 100,
              value = 50,
              step = 1),
  p("Selected value:"),
  textOutput("value_semantic")
)

# Creates router. We provide routing path, a UI as
# well as a server-side callback for each page.
router <- make_router(
  route("bootstrap", bootstrap_page),
  route("semantic", semanticui_page),
  page_404 = page404("You opened non existing bookmark!")
)

# Create output for our router in main UI of Shiny app.
ui <- shinyUI(
  tagList(
    tags$head(
      singleton(disable_bootstrap_on_bookmark("semantic"))
    ),
    router_ui()
  )
)

# Plug router into Shiny server.
server <- shinyServer(function(input, output, session) {
  router(input, output, session)
  output$value_bootstrap <- renderText(input$obs_bootstrap)
  output$value_semantic <- renderText(input$obs_semantic)
})

# Run server in a standard way.
shinyApp(ui, server)

How to get shiny.router?

Shiny.router is available both on R Cran and Github. If you will stumble upon any issues please file them on GitHub where our team will reply. Are you using already shiny.router package in your shiny projects? Say hello to us and share your story – it will help us make our open source better.  Look for us on R events and collect our hex stickers!

 

Further steps and plans for the package

We are planning to constantly work on the package to make it more versatile. As next steps we want to allow passing parameters between separated bookmarks servers and ability to save application state. We hope that you will appreciate improvements we did within last two years.

Feedback will be very valuable for us.

Artykuł Official release of shiny.router and its new features pochodzi z serwisu Appsilon Data Science | We Provide End­ to­ End Data Science Solutions.

To leave a comment for the author, please follow the link and comment on their blog: r – Appsilon Data Science | We Provide End­ to­ End Data Science Solutions.

R-bloggers.com offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.