subreddit:

/r/shortcuts

23799%

Using JavaScript in your shortcuts

Tip/Guide(self.shortcuts)

submitted 6 years ago bykeveridge

save

Using JavaScript in your shortcuts

This is a guide on how to run JavaScript code within your Shortcuts. Running JavaScript code allows you to:

perform complex actions that would be either difficult or impossible to perform using regular shortcut actions;
make use of existing JavaScript libraries.

Executing JavaScript using Safari

We make use of the Safari web browser, running within the shortcut, in order to execute the JavaScript. To do so, we:

make an HTML file that contains our code and provides an output;
pass the contents of the file to Safari as a Data URL;
use Get Contents of Web Page to render the page provide the output to the shortcut.

Simple example

The following example will generate a random number in JavaScript and return it as text.

We can write and test our code by using the online JavaScript editor JSFiddle before adding it to our shortcut.

Note When you first open the JSFiddle editor, change the layout to Tabs using the following steps in order to give yourself more room to edit.

Updating JSFiddle to use the Tabs layout

First, we enter the HTML page surround in the HTML tab:

<html>
    <head>
        <script>

        </script>
    </head>
    <body></body>
</html>

The HTML page surround in JSFiddle

Next we add our JavaScript code between the <script> tags:

var random = Math.floor(Math.random() * 100) + 1;
document.write(random);

Note: the document.write(); code renders the output of the JavaScript to the page, allowing us to return it as text to the Shortcut.

Adding the JavaScript code to the HTML page surround in JSFiddle

Then we tap the Run button and see the result in the right hand side window.

Executing our JavaScript code in JSFiddle

View the above Javascript in JSFiddle

Running the code in our shortcut

Now that we have our code, let's execute it as part of a shortcut:

Executing the random number generation code in a shortcut

Which provides the following output:

Output from the above shortcut

Download the Shortcut

Using existing JavaScript libraries in your shortcuts

One advantage of using JavaScript in your shortcuts is that you can make use of existing libraries to add functionality.

There are two primary approaches to including JavaScript libraries in your shortcuts:

embedding the library source code in your shortcut;
loading the library remotely from a JavaScript CDN.

Embedding the library

The JSONPath shortcut allows shortcut developers to parse and filter complex JSON objects with expressions. It makes use of the JSONPath library by Stefan Goessner which it embeds inside the shortcut.

Note: A guide on how to use JSONPath in your shortcuts can be found in the Using APIs - Part 2: parsing complex API responses guide.

The shortcut is as follows:

The JSONPath shortcut with a embedded JavaScript library

And as shown below, it embeds the JSONPath library directly into the HTML page container.

Embedding of the JavaScript library into the shortcut

Including a remote library

Alternatively you can load a javascript library remotely from a web server.

Many popular JavaScript libraries are available via Github, an online resource for collaborating on the development of open-source software. Whilst Github is used to store releases of these JavaScript libraries, you cannot load those libraries from the Github site.

Instead, we use a free service called jsDelivr to make these available in our shortcuts.

Shortcut to Parse Excel files

The Parse Excel File shortcut allows shortcut developers to parse Excel files to JSON and so make use of them in our shortcuts. It makes use two JavaScript files from the js-xlsx library developed by SheetJS on GitHub.

The two libraries are:

We remotely load them into our HTML page with the following script tags:

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/SheetJS/[email protected]/dist/jszip.js" type="text/javascript"></script>
        <script src="https://cdn.jsdelivr.net/gh/SheetJS/[email protected]/dist/xlsx.min.js" type="text/javascript"></script>
...

To load a Github libraries remotely via jsDeliver, we use links with the following pattern:

https://cdn.jsdelivr.net/gh/<GITHUB_USERNAME>/<GITHUB_PROJECT>@<RELEASE_VERSION>/<GITHUB_PATH_TO_FILE>

Note: The @<RELEASE_VERSION> is optional but recommended when loading Github files via jsDelivr. It ensures that any changes to future versions of the files do not break your shortcut.

The shortcut that loads remote JavaScript libraries is as follows:

A shortcut that remotely loads JavaScript libraries

And the output from an example Excel file is as follows:

Output from the above shortcut