R shiny: Add weblink to actionButton

Question

I have a box in my shiny application that has a button included within a shiny dashboard box like this:

shiny::fluidRow(
  shinydashboard::box(title = "Intro Page", "Some description...", 
      shiny::actionButton(inputId='ab1', label="Learn More", icon = icon("th"))
  )
)

I want to include a weblink in the button such that when I click on it, it should open the corresponding webpage in a new tab.

I know that I can do this instead:

# this does not create a submit button though, it just creates a link.
tags$div(class = "submit",
         tags$a(href = "www.google.com", 
                "Learn More", 
                target="_blank")
)

But with actionButton, there is a nice button and I can add an icon to it which looks aesthetically better.

How do I add a link to actionButton in shiny?

Geriatric

Answer 1

You can add the parameter

onclick ="location.href='http://google.com';"

To the action button and clicking it will take you to google.com in the current window or you can add

onclick ="window.open('http://google.com', '_blank')"

and you will be taken to Google in a new tab

That is

shiny::fluidRow(
  shinydashboard::box(title = "Intro Page", "Some description...", 
      shiny::actionButton(inputId='ab1', label="Learn More", 
                          icon = icon("th"), 
                          onclick ="window.open('http://google.com', '_blank')")
  )
)

Macswan

Wow! That worked! I couldn't find an answer anywhere when I googled, glad I posted it as a question here. Thanks a lot! – Geriatric

It works fine, but what if I wanna pass the link as a string variable, which is previously loaded?? – Giacomo

Answer 2

The onclick method is simple but it rely javascript. More importantly, it'll be awkward if you want to generate the link dynamically. I want to have a link in my app that open specific page according to user input, and I found you can just dress a link as a button.

First I deal with the dynamical part with uiOutput and renderUI, because the link can only be generated in server part. The simple link will be

a(h4("Open Link"), target = "_blank", href = paste0("http://www.somesite/", some_link))

Just run this line in R we get

<a target="_blank" href="http://www.somesite/somelink">
  <h4>Open Link</h4>
</a>

To create a button we can look at what an action button look like.

> actionButton("download", "Download Selected",
              icon = icon("cloud-download"))
<button id="download" type="button" class="btn btn-default action-button">
  <i class="fa fa-cloud-download"></i>
  Download Selected
</button>

Then we can do this

shiny::a(h4("Open Link", class = "btn btn-default action-button" , 
    style = "fontweight:600"), target = "_blank",
    href = paste0("http://www.somesite/", some_link))

to get

<a target="_blank" href="http://www.somesite/some_link">
  <h4 class="btn btn-default action-button" style="fontweight:600">Open Link</h4>
</a>

Now we have a link that looks like a button, and you can further customize its style either with style parameter or customized css. Open your app with chrome/firefox developer tools, modify the css to the effect you want, then add the modified css to style.css in www folder to override the default style.

If you look at the output of many html tags function, you will find you can actually combine and assemble lots of stuff together to get a lot of customizations.

Interosculate

Shiny already heavily relies on JavaScript, so I don't think this should be a problem. – Lenalenard

Answer 3

I wanted to combine the multiple questions/answers with my own reproducible example. This combines Marsenau, dracodoc, and Vincent's answer. And responds to Captain Hat's comment.

Dynamic link solution

UI side

uiOutput("ui_open_tab_button")

Server-side (where input$slider is an example of a dynamic element)

output$ui_open_tab_button <- renderUI({
      shiny::a(
        h4(icon("th"),
           paste0("Wiki Link Number: ",input$slider),
           class = "btn btn-default action-button",
           style = "fontweight:600"),
        target = "_blank",
        href = paste0("https://en.wikipedia.org/wiki/",input$slider)
  )
  })

Complete Example

library("shiny")
library("shinydashboard")

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sliderInput("slider", "Wiki Link Control", 1, 10, 1)
  ),
  dashboardBody(
      box(title = "UI Only Link", p("From Marsenau... Uses onclick"),
          actionButton(
            inputId='ab2',
            label="Wiki Main Link",
            icon = icon("th"),
            onclick=paste0("window.open('https://en.wikipedia.org/wiki/','_blank')")
          )
          ),
      box(title = "Dynamic link", p("From dracodoc and Vincent... answers Captain Hat's question"),
          uiOutput("ui_open_tab_button")
    ),
    fluidRow(
      htmlOutput("wiki")
    )
  )

)


server <- function(input, output) {
  output$ui_open_tab_button <- renderUI({
      shiny::a(
        h4(icon("th"),
           paste0("Wiki Link Number: ",input$slider),
           class = "btn btn-default action-button",
           style = "fontweight:600"),
        target = "_blank",
        href = paste0("https://en.wikipedia.org/wiki/",input$slider)
  )
  })
  output$wiki <- renderUI({
    tags$iframe(src=paste0("https://en.wikipedia.org/wiki/",input$slider), height=1000, width="100%")
  })
}

shinyApp(ui, server,  options = list(launch.browser=T))

Gosney

Answer 4

Building on @dracodoc's point about dynamically generated links, you can use renderUI to achieve the desired effect. In the example below, input$open_tab refers to a generic actionButton. Note that you still have to include a reference to the renderUI below in your UI (i.e., uiOutput("ui_open_tab"))

output$ui_open_tab <- renderUI({
  req(input$open_tab > 0)
  link <- function_to_build_the_link(a, b, c)
  tags$script(paste0("window.open('", link, "', '_blank')"))
})

Rochelrochell

This looks like just what I need, but I can't get it to work. What's the relationship between input$open_tab and output$ui_open_tab? How does this manifest in the code? Could you provide a minimal UI example? A truly reproducible example would be a great help. – Valuate

@CaptainHat I had the same question so I posted a complete example app – Gosney