Want to share your content on python-bloggers? click here.
Web developers love JavaScript. And who can blame them, it’s a fantastic do-it-all language for making stunning websites. But what about Shiny and Shiny for Python? As it turns out, you can add JavaScript scripts to your Shiny for Python dashboards without too much trouble. Today you’ll learn how to add JS scripts to Shiny for Python by making a simple app. All it does is ask the user for its name after clicking on a button, and then render the name or display a cancellation message. Truth be told, you can code the same app in Python/R, but we thought this would be a neat example for potential JavaScript usage.
What are out thoughts on Shiny for Python? Take a look at this First Impressions article.
Table of contents:
- Shiny for Python and JavaScript: Let’s Code a Basic App
- How to Serve Static Files in Shiny for Python
- How to Add JavaScript Scripts to Shiny for Python Dashboards
- Summary of Shiny for Python and JavaScript
Shiny for Python and JavaScript: Let’s Code a Basic App
First things first, we need an app. The good news is that it will take less than 10 lines of code to have it up and running. Open any code editor and create an app.py
file. The entire UI will have only three elements:
- Title – It’s just an
h3
element, not really important. - Button – It’ll open a prompt when clicked, but more on that later.
- Paragraph – For displaying the content entered by the user. It’s blank by default, and we care only about the
id
.
The server()
function will remain empty this time, as we won’t handle any logic with Python. Here’s the full code snippet for our simple app:
from shiny import App, ui app_ui = ui.page_fluid( ui.h3("Shiny for Python - JavaScript Example"), ui.input_action_button(id="btn", label="Click me!"), ui.p(id="prompt_text") ) def server(input, output, session): pass app = App(ui=app_ui, server=server)
Run the following command from the shell to run the app:
shiny run --reload app.py
It will run on localhost:8000
by default:
How to Serve Static Files
Think of static files as an umbrella term for images, CSS files, and scripts. Basically, it’s anything somewhat related to your app that isn’t written in the main file. A common practice is to create a www
folder and put everything mentioned inside it. Please create one yourself and make the following modifications to app.py
:
- Import the
Path
class from thepathlib
library. - Create a variable
www_dir
that will store an absolute path to thewww
directory. - Inside
App()
, specify an additional parameterstatic_assets
and set it towww_dir
.
Here’s the entire modified snippet in case you got lost in the process:
from shiny import App, ui from pathlib import Path app_ui = ui.page_fluid( ui.h3("Shiny for Python - JavaScript Example"), ui.input_action_button(id="btn", label="Click me!"), ui.p(id="prompt_text") ) def server(input, output, session): pass www_dir = Path(__file__).parent / "www" app = App(ui=app_ui, server=server, static_assets=www_dir)
The app still looks the same, even if you click on the button:
How to Add JavaScript Scripts to Shiny for Python Dashboards
Let’s take a short break from Python and focus on JavaScript. Create a script.js
file inside the www
directory, and inside it declare a runJS()
function. This function will be executed when the button is clicked. The function logic is straightforward – It prompts the user to enter its name, which is then displayed in the below paragraph. If the user cancels the prompt, an appropriate message is shown instead:
function runJS() { let text; let user = prompt("Please enter your name:", "First name"); if (user == null || user == "") { text = "Prompt cancelled by the user."; } else { text = "Hello " + user + "!"; } document.getElementById("prompt_text").innerHTML = text; }
But how can you now tie the button to the function? Well, it’s a two-step process:
- Add
script.js
to the document’shead
. - Add an
onclick
property to the button and set its value torunJS()
– This will run the function when the button is clicked.
If you prefer Python over English, here’s everything you need:
from shiny import App, ui from pathlib import Path app_ui = ui.page_fluid( ui.tags.head( ui.tags.script(src="script.js") ), ui.h3("Shiny for Python - JavaScript Example"), ui.input_action_button(id="btn", label="Click me!", onclick="runJS()"), ui.p(id="prompt_text") ) def server(input, output, session): pass www_dir = Path(__file__).parent / "www" app = App(ui=app_ui, server=server, static_assets=www_dir)
Refresh the app and click on the button – You’ll see the prompt like the one below:
Summary of Shiny for Python and JavaScript
Adding JavaScript to Shiny for Python apps comes with an important prerequisite, and that is creating and linking the static assets directory. That is if the JS file you plan to use is stored locally. If not, simply add a web url to the src
parameter. We hope this article has served you as the basis for more advanced JavaScript use cases in Shiny for Python. Let us know in the comment section below what are your thoughts on this integration, and how you plan to use JS in your apps. Also, feel free to continue the discussion on Twitter – @appsilon. We’d love to hear from you.
Take a break from Python – Learn to scrape dynamic websites in R instead!
The post appeared first on appsilon.com/blog/.
Want to share your content on python-bloggers? click here.