Add a custom JavaScript library into your app
You might want to include a JavaScript library (or chunk of JavaScript code) within your app.
There are different ways to achieve this:
- Add the code to Custom JavaScript
- Add the code to a button/link using the JavaScript Action
- Run the code automatically when the screen loads
PLEASE NOTE:
This example makes use of a Pomodoro Timer, but this is just to demonstrate the concept.
You can add almost any other JavaScript library in a similar way.
In this article we show you how to run the code when the screen loads. The example we are using adds a "Pomodoro Timer" to your app. Find out more here.
You can download the source files used in this example.
- Open the file "css/main.css" and copy the code.
- Paste the CSS code into Custom CSS in the app Settings -> Advanced -> Custom CSS... and Save
- Open the Standard Screen where you want to place the Timer.
- Add a Text item to the screen and set the following properties:
- Name: "onLoad"
- Styles -> Custom Class: "event onLoad"
- Action: JavaScript
- Open the file "js/script.js"
- You need to make some minor modifications to this file.
- Find the line that starts with "window.onload..."
Delete this line. - Find the closing "}" for this function... line 27
Delete this line - Your code should have the changes shown in the screengrab:
- Copy all the code from "script.js" and paste into the JavaScript Action for your Text item... Save
- Add the HTML
- Open the "index.html" file and copy the code inside the body tag.
- Add a "Formatted Text" item to the screen.
- View the HTML and paste in the code from the index file.
- Save the item.
- Open the "index.html" file and copy the code inside the body tag.
- Preview the Pomodoro Timer
- You can now preview the Pomodoro Timer in the simulator.
- Notice the Text item at the top called "onLoad". This is item will run the code to launch the time every time the screen loads.
- You can click on the buttons in the timer to Start, Reset, Stop.
- If you want to improve the formatting you will need to make changes to the CSS (App Settings -> Advaned -> Custom CSS)