Creating Actions Demo

Create Custom JavaScript Actions

This article demonstrates how to bind a JavaScript function to a button’s click action (src code is attached at end of the article). The Button Link property defines the action to take when the button is clicked. It’s value can be the file name of a page to transition the UI to or a JavaScript function to invoke when the button is clicked. Linking to a javascript requires prefixing the javascript function with javascript:

The attached demo illustrates:
1) calling phoneui.gotoPage() function
2) calling javascript alert() function (see figure-1 below)
3) calling a custom javascript function I created in the custom_page1.js file
See attachment custom-act-overview.png

The following screenshot illustrates the configuration of button2’s Link property to call the predefine javascript alert() function when clicked
See attachment show-alert-js.png

Lastly the 3rd button is bound to a custom JavaScript function that I created in the page1_custom.js file named exampleFunction. When the button is clicked the phoneui framework invokes the JavaScript exampleFunction(). This function will transition to page-3 and update a text component with the current system time. The outline snippet uses JQuery to lookup the text component and change the date text.
See attachment exampleFunction-ss.png

Source Code
See attachment custom-action-demo.zip