Have any questions?

+44 (20) 3540 6226

hello@appshed.com

Add a custom JavaScript library into your app

5.0/5 rating (1 votes)

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

    custom css

  • 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"

      onload

    3. Action: JavaScript
  • Open the file "js/script.js"

    script
    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:

      script2
  • Copy all the code from "script.js" and paste into the JavaScript Action for your Text item... Save

    action

  • Add the HTML
    1. Open the "index.html" file and copy the code inside the body tag.

      html

    2. Add a "Formatted Text" item to the screen.
    3. View the HTML and paste in the code from the index file.

      html source

    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)

      preview

 

 

 

 

Share this product

appshed name white text 250

Copyright © 2017 AppShed Limited