R shiny: How to insert html link in a material_button

Question

I would like to open a html link when I click on a button, a "material button" from the shinymaterial package

library(shiny)
library(shinymaterial)

ui <- material_page(
   title = "page",
   material_button(
    input_id = "button1",
    label = "label1",
    color = "blue"
  )

server <- function(input, output) {
  }
shinyApp(ui = ui, server = server)

I can do :

label = a("label1",href="my link",target="_blank")

but then it works only when I click on the label of the button. Can I add my link on the server part of the shinyapp?

Answer 1

You can always use Javascript, but there is another approach if you know all these Shiny UI are just html code.

I answered a similar question before, which is actually a general method that can solve many different questions.

First we look at what is a material button:

> material_button(
+     input_id = "button1",
+     label = "label1",
+     color = "blue"
+   )
<button class="waves-effect waves-light btn shiny-material-button blue" id="button1" value="0">label1</button>

All the Shiny UI functions just generate html code with some attributes, and you can run them in console to see the result, this is a easy way to experiment.

If you look at ?shiny::actionButton, there are actionButton and actionLink. What is the difference?

> shiny::actionButton("test", "button")
<button id="test" type="button" class="btn btn-default action-button">button</button>
> shiny::actionLink("test", "button")
<a id="test" href="#" class="action-button">button</a>

Instead of insert link in a button, we can create a link with appearance of button.

You can play with all the Shiny html tag functions if you know what the html code should look like for your purposes. Now we want a link with some text, a target, some css class.

A dynamic link in Shiny can be created like this:

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

Note this is not the simplest way to create link. I used this format because I want to be able to generate link dynamically in server code. This example can give you some hints on how to combine different html tag functions:

1. overall it's a link so we use a in outmost layer
2. you can use any format to show the text/label, I used h4, which probably will be override by the css, but this give you the idea
3. you can generate the attributes dynamically

Then we just need to apply the proper css class to it to make it look like a material button:

> shiny::a(h4("Open Link", class = "waves-effect waves-light btn shiny-material-button blue" , id = "button1",
+               style = "fontweight:600"), target = "_blank",
+            href = paste0("http://www.somesite/", "some_link"))
<a target="_blank" href="http://www.somesite/some_link">
  <h4 class="waves-effect waves-light btn shiny-material-button blue" id="button1" style="fontweight:600">Open Link</h4>
</a>

Note I used full qualified name shiny::a, otherwise sometimes there could be warnings for some short html tag function names. I also added a style attribute which is probably not needed in this case but this is a simple way to make further customizations.

Note:

1. the color parameter may change the css class value, so you need to use the specific value from that.

2. action button have an id which can be used for event observer, but for a button of link you usually don't need that because the behavior is just opening a link.

Another hint for customizing Shiny app visual appearance:

1. run the Shiny app in browser, turn on developer tools in Chrome/firefox
2. find the css for the element you want to change, experiment with it until you are satisfied with it
3. save it in a css file under www folder, include it in UI code with includeCSS("www/styles.css").

Answer 2

As it seems it cant be passed as an argument for the materialButton() so instead you could add it yourself via javascript:

Find the element by Id and add an onlick listener.

library(shiny)
library(shinyjs)
library(shinymaterial)

ui <- material_page(
  useShinyjs(),
  title = "page",
  material_button(
    input_id = "button1",
    label = "label1",
    color = "blue"
  )
)

server <- function(input, output) {
  runjs("document.getElementById('button1').onclick = function() { 
           window.open('http://stackoverflow.com/', '_blank');
         };"
  )
}
runApp(shinyApp(ui = ui, server = server), launch.browser = TRUE)