This page describes how you can add your own custom JavaScript code to your AppShed app.
The JavaScript action gives you complete flexibility to customise the events and actions that occurr when a link is tapped.

 

NB: In your app, add a link (any link) and choose the action "JavaScript".
This will give you an text area where you can enter your JavaScript code.

 

 

AppShed Custom Javascript

Inserting your code

There are two places you can add code into a javascript app, either to the app itself, or to a an item.

App

The javascript code you set on an app is run when your app is first loaded. Here you can make changes to your app, or cause your app to navigate to specific screen. This code is run before any screens are loaded. So you should not try and modify the contents of a screen here.

There are two variables accessable to this piece of code.

• this - The DOM Element of the app.
• app - The Appshed app object specified below.

Item

Code added to an item is run when the user of your app taps/clicks on the item.

There are two variables accessable to this piece of code.

• this - The DOM Element of the item.
• app - The Appshed app object specified below.

app

1. app object has a few useful functions that you can use to access the functionality of your app.

• showTab(id) - The app will navigate the tab with id or name given.
• showScreen(id) - The app will navigate to the screen with id or name given.
• showRemoteScreen(url) - The app will navigate to a remote screen that is loaded from url. url can contain parameters in the form {name} that will be replaced with the value of a form item with the given name.
• getVariable(name) - Get the value of a form variable with the given name.
• setVariable(name, value) - Set the value of name to value.

Events

You can also use the app object to add event listeners. These are functions that are called when certain things happen.

In most cases its recommended that you add your event listeners in your apps general code, not on a specific item.

1. addScreenEvent(id, func) - The given func will be called whenever the screen id is shown. This function returns an identifier. Within func, this will refer to the Element of the screen that is shown. There is one parameter app.
2. removeScreenEvent(identifier) - Call this function with the return value of addScreenEvent to stop it being called in the future.
3. addTabEvent(id, func) - The given func will be called whenever the tab id is shown. This function returns an identifier. Within func, this will refer to the Element of the tab that is shown. There is one parameter app.
4. removeTabEvent(identifier) - Call this function with the return value of addTabEvent to stop it being called in the future.
5. addVariableEvent(name, func) - The given func will be called whenever the value of name changes. This function returns an identifier. funcis called with two parameters.
   1. value - The new value of the variable
   2. app
6. removeVariableEvent(identifier) - Call this function with the return value of addVariableEvent to stop it being called in the future.

Enviroment

• app.isMobile - Will be true when running on a supported mobile device
• app.isPhoneGap - Will be true when running on a phonegap platform

Examples

Some code you might add to your app.

app.addScreenEvent(17078, function() {
    this.getElement('.title span').set('text', app.getVariable('textbox'));
});
app.addVariableEvent('textbox', function(val) {
    var t = document.getElement('#screen17078 .title span');
    if(t) {
        t.set('text', val);
    }
});

An example of what you might put as an action on an item.

if(app.getVariable('textbox') == 'hello') {
    app.showScreen(17081);
}

More

If you want to learn about Javascript Mozilla Developer Network is a good place to start.

You can of course use any of your browsers standard functionality. You can read about the DOM.

We make extensive use of Mootools in Appshed. You should consider using it when interacting with the DOM as it will greatly simpliy your life! All of the Core and More functions are avaliable to your code in Appshed.

Use your browsers inspect element functionality to explore the DOM tree of your app.

If you intend on deploying your app using phonegap, you can read about avaible functions - Phonegap Docs. You should be sure to check app.isPhoneGap before calling any PhoneGap specific functions. Note that any javascript setup in Appshed is run after thedeviceready event is called.