Call Javascript from R

[dmenne]

How do I call Javascript from R? I normally do this with shinyjs, but I have not been able to use it in the rhino-environment.

[kamilzyla]

Hey @dmenne! Our How-to: Write JavaScript code article briefly describes this. You'll need to mark functions in app/js/index.js with export keyword, and refer to them in R with an App. prefix.

[dmenne]

I had read and tried this. But in *(onclick = "App.sayHello()"), sayHello is a Javascript function, R does not know anything about App (some "use" required?). The classic way uses session$sendCustomMessage(type, message) , the easy way extendShinyjs.

[dmenne]

Looks like my question was not clear enough. Let's try a different variant first:

Use the standard template and the following main.R:

box::use(
  shiny[fluidPage,
        actionButton,
        observeEvent, textInput,
        moduleServer, NS],
  shinyjs
)


#' @export
ui <- function(id) {
  ns <- NS(id)
  shinyjs::useShinyjs(debug = TRUE)
  fluidPage(
    actionButton(ns("toggle"), "Toggle Element"),
    textInput(ns("element"), "Watch what happens to me")
  )
}

#' @export
server <- function(id) {
  moduleServer(id, function(input, output, session) {
    observeEvent(input$toggle, {
      cat("toggle called\n")
      # effective selector is app-element
      shinyjs::toggle(id = "element")
    })
  })
}

Nothing happens. I assume it has to do because I called useShinjs in a module, and it should be called in the top level.

Ping @daattali as author of shinyjs.

The question how to call javascript from rhinoed-shiny is then a sequitur.

[dmenne]

That was an easy one: useShinyjs must be inside fluidPage :

  fluidPage(
    shinyjs::useShinyjs(debug = TRUE)

[dmenne]

a workaround: rhino uses prefix App to call javascript, shinyjs uses prefix shinyjs. So a translator help, but it is definitively ugly:

jsCode <- "shinyjs.showHelp = function(){App.showHelp()}"

Here the full code (add standard template from rhino)

box::use(
  shiny[fluidPage,
        actionButton,
        observeEvent, textInput,
        moduleServer, NS],
  shinyjs
)


jsCode <- "shinyjs.showHelp = function(){App.showHelp()}"


#' @export
ui <- function(id) {
  ns <- NS(id)
  fluidPage(
    shinyjs::useShinyjs(debug = TRUE),
    shinyjs::extendShinyjs(text = jsCode, functions = c("showHelp")),
    actionButton(ns("toggle"), "Toggle Element"),
    textInput(ns("element"), "Watch what happens to me"),
    actionButton(ns("help"), "Help alert")
  )
}

#' @export
server <- function(id) {
  moduleServer(id, function(input, output, session) {
    observeEvent(input$help, {
      cat("help alert called\n")
      shinyjs::js$showHelp()
    })
    observeEvent(input$toggle, {
      cat("toggle called\n")
      # effective selector is app-element
      shinyjs::toggle(id = "element")
    })
  })
}

[kamilzyla]

Thanks for @dmenne for clarifying! To use shinyjs::extendShinyjs() you can do something like this:

app/js/index.js

function sayHello(name) {
  alert(`Hello ${name}!`);
}

function sayBye(name) {
  alert(`Bye ${name}!`);
}

export const extensions = { sayHello, sayBye };

Remember to run rhino::build_js() whenever you edit index.js.

app/main.R

box::use(
  shiny[actionButton, fluidPage, moduleServer, NS, observeEvent],
  shinyjs[extendShinyjs, js, useShinyjs],
)


#' @export
ui <- function(id) {
  ns <- NS(id)
  fluidPage(
    useShinyjs(),
    extendShinyjs(
      text = "shinyjs = { ...shinyjs, ...App.extensions }",
      functions = c("sayHello", "sayBye")
    ),
    actionButton(ns("hello"), "Hello"),
    actionButton(ns("bye"), "Bye")
  )
}

#' @export
server <- function(id) {
  moduleServer(id, function(input, output, session) {
    observeEvent(input$hello, js$sayHello("Rhino"))
    observeEvent(input$bye, js$sayBye("Rhino"))
  })
}

Explanation

In index.js we define an exported object extensions with keys sayHello and sayBye which map to JS functions. This object can be accessed as App.extensions in the browser.

The extendShinyjs() function expects that the code passed to it extends the global shinyjs object. We use the JS spread operator to add all functions from App.extensions to shinyjs with this snippet: shinyjs = { ...shinyjs, ...App.extensions }.

[dmenne]

Thanks, great, will try. Please put it into the doc!