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

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:
  1. Name: "onLoad"
  2. Styles -> Custom Class: "event onLoad"
     
     
     
     
  3. Action: JavaScript
• Open the file "js/script.js"
  
  
  
  1. You need to make some minor modifications to this file.
  2. Find the line that starts with "window.onload..."
     Delete this line.
  3. Find the closing "}" for this function... line 27 
     Delete this line
  4. 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
  1. Open the "index.html" file and copy the code inside the body tag.
     
     
     
     
  2. Add a "Formatted Text" item to the screen.
  3. View the HTML and paste in the code from the index file.
     
     
     
     
  4. Save the item.
• Preview the Pomodoro Timer
  1. You can now preview the Pomodoro Timer in the simulator.
  2. 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.
  3. You can click on the buttons in the timer to Start, Reset, Stop.
  4. If you want to improve the formatting you will need to make changes to the CSS (App Settings -> Advaned -> Custom CSS)