3MW (3 ways to include JS in your Shiny apps)

Guten Tag!

Many greetings from Ulm, Germany. Last week, we whipped together a little bit of JS code. Now it's time to use that in our Shiny app.

Wrap JS code into a function

First, we need to create a JS function. This is pretty easy as it uses the exact same syntax as R. So here's our code from last week wrapped into a function named shinyjs.collect_content().

You should notice two things about this function:

1. The syntax of the for-loop is a little bit different than last time. That's because I've noticed that the for-loop syntax of JS can actually be closer to R's for-loop syntax. You know, in R we write for (i in ) {}. This is basically the same in JS. It's just that vectors are called arrays and the syntax to create an array with entries 1, 2, 3... is a bit weird.

2. The name of the function is somewhat verbose. That's because I want to use this function by means of the {shinyjs} package. This requires the function names having a shinyjs. prefix.

Include your JS function with {shinyjs} and text variables

The easiest way to use a JS function with {shinyjs} is to follow these three steps:

1. Load {shinyjs} and include your JS function as a text variable jsCode in your app’s R script.

2. Enable {shinyjs} by placing useShinyjs() somewhere in your UI.

3. Register your JS function by placing extendShinyjs(text = jsCode, functions = 'collect_content') somewhere in your UI.

Here, we've used functions = 'collect_content'. This determines the JS function's name in R. Thus, we can now execute our JS function by calling js$collect_content() in our server() function. For example, we could tie this function to a button.

Here's a server function of an app that observes both input$texts and input$collect_btn. At the click of the button, our JS script is executed and input$texts is updated.

Include JS function via external file

Clearly, adding JS code by text variables clutters your app quite fast. So instead, try moving your JS code to a separate file. For example, I’ve saved the exact same code from before in a file collect_content.js.

Now, we need to store this .js-file in a directory called www. I know that this seems weird but it's important so that your app can find the file. Then, do not use text = jsCode in extendShinyjs() but script='collect_content.js'.

Recommended Resources

If you want, you can also include the JS code without {shinyjs}. You can find out how in my newest blog post. This post summarizes this week's and last week's newsletter. It contains all the code, all the apps and a couple of extras. Enjoy.

That's a wrap! As always, I'm happy to hear your feedback about this week's issue. Feel free to write me on Twitter or reply to this mail.

Enjoy the rest of your day!Albert

Did you like this post and want to support more content like this? Whenever you feel like it, you can support me with a coffee or a membership.

Need help visualizing your data? Or need to build a Shiny app? I'm open to freelance work. You can book a free 30-minute Zoom meeting with me and we can find out if I'm a good match for your project.