Tiggzi Docs > Documentation > App Builder > Working with events and actions

Working with events and actions

Introduction

When building a mobile web app pretty much everything happens based on some events. For example, clicking a button is a ‘click’ event. You can then do something based on this event, for example, navigate to another page or invoke some JavaScript. When you change a value inside an input field - that’s a ‘value change’ event. Again, you can pretty much do anything you want once an event fires. These are all just standard HTML events.

Note: All events are browser events, not Tiggzi events. There there are also PhoneGap events which are native device events.

To add an event to a component and define an action is done by opening the Events tab:

If you select a component and then open Events, only events for that particular component will be shown. To see events/actions defined for another component, select it from the component drop down list. To see all events defined on this page, select the page name from the drop down or click Show All blue button on the right-hand side.

Event types

The events are divided into three categories: HTML (these should be familiar to most of you), jQuery Mobile, and PhoneGap (device) events.

HTML

  • blur
  • click
  • focus
  • input
  • keydown
  • keypress
  • keyup
  • selected
  • valuechange
  • resize
  • beforeunload
  • unload
  • online
  • offline
  • message

jQuery Mobile

  • tap
  • taphold
  • swipe
  • swipeleft
  • swiperight
  • pageshow
  • pagehide

PhoneGap

  • deviceready
  • pause
  • resume
  • online
  • offline
  • backbutton
  • batterycritical
  • batterylow
  • batterystatus
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton

Adding new event and action

To add a new event and action:

  1. Open the Events tab, then select a component to which you want to add the event.
    1. It’s a good idea to rename components and give them more meaningful names. This will make it easier to find the component in the list
    2. If you select a component on the page and then open the Events tab, that component will be selected automatically in the Component list
    3. Some components have default events as they are most frequently used. For example:
      1. Select a button component, Click event will be selected
      2. Select input component, Value change event will be selected
    4. The following is an example selecting the button component and opening Events tab:
      You can always select a different event from the Event list.
  2. Once an event is defined, select an action to run. For example, selecting Run JavaScript action:
    Run JavaScript action allows you to run any JavaScript code you want.
  3. To save the event/action, click the green plus button:

To edit an existing event, click the blue pencil icon.

To delete an event, click the red icon.

Multiple events

A component can define one or more number events/action. The event/action will be processed in order defined. For example, a component with two events:

Events order

Events/actions will be invoked in order defined. It’s important to keep in mind that JavaScript is asynchronous. For example, if you defined two clicks events and invoke a service:

  1. click/invoke service
  2. click/invoke service

The first action will be invoked, but the browser will not wait for the first action to complete and will simply move to invoke the second action. The solution is to use service callback events to invoke the next service.

Actions

The following actions are available:

  • Set HTML Attribute
  • Set Property
  • Set Local Storage Variable
  • Navigate to Page
  • Navigate to Link
  • Open as Popup
  • Close Popup
  • Invoke Service
  • Run JavaScript
  • Set Detail Content (iPad project only)
Note: While the app builder defined a number of actions - it is primarily to make development easier and faster. All actions can be defined in JavaScript, via Run JavaScript action.

Set HTML Attribute

This action allows you to set any attribute on a HTML element.

  1. For Component name, select component on which you want to set the attribute.
    1. Note: to make it simpler to find and reference the component, change the component name in Properties.
  2. For Property name, enter any valid property on this particular HTML element. Make sure the property you enter is actually available on this element. Here are two good sites to tell you which properties are available on which elements: http://simon.html5.org/html-elements and http://htmldog.com.
  3. Set the property value.
When this action is invoked, the property you specified will be set to the value you specified. Here is an example running the action on page load event:

Optionally, you can set the property value by getting a value from local storage variable by checking Read from local storage variable option. Note that you will only see local storage variables defined via Create local storage variable action.

Set Property

This action is the basic version of Set HTML Attribute action. It works the same except that you are limited to properties available in the drop down list for each component:

As you can see Property name is limited to values from a list. In Set HTML Attribute action, you can enter any supported attribute.

Set Local Storage Variable

Creates a local storage variable

  1. Enter variable name, for example: id
  2. Enter value, for example: 12345

This will create a local storage variable with name of ‘id’ and value of ’12345′. It’s equivalent to running this in JavaScript:

localStorage.setItem('id', '12345');

It’s also possible to bind the variable to a component by checking Bind to Component. This means that when the local storage variable will be created, its value will be taken (read) from the component to which its bound.

For example, the value of ‘id’ will be set to the current value mobilelabel1 component.

Navigate to Link

Navigates to a page specified in URL. Optionally you can open the URL in a new window.

Open as Popup

Allows to open a popup

  1. To use this action, make sure at least one popup exists in the project. To create popup, select Project view > Create new > Popup. It is a good idea to set popup name in Properties, to make it simpler to refer to the popup.
  2. Once the action (Open as popup) is added, select a Popup name from the drop down list.

Close Popup

Allows to close a popup opened via Open As Popup action.

Invoke Service

Invokes a service selected from the list. A service first has to be defined and added to the page.

Learn how to define and add services to the page.

Run JavaScript

This action allows you to run any JavaScript. You can also reference any JavaScript you created from Create New > JavaScript.

You have access to this element inside this function. this - is the jQuery Mobile component to which the event was attached. In the example above, it’s the button component. For example, if you do:

console.log(this);

you will get:

<a data-role="button" name="saveButton" dsid="saveButton" class="b utton mobilebutton1 ui-btn ui-shadow ui-btn-corner-all ui-btn-blo ck ui-btn-icon-left ui-focus ui-btn-up-a" id="j_8" data-corners=" true" data-iconpos="left" data-inline="false" data-theme="a" tabi ndex="1" data-shadow="true" data-iconshadow="true" data-wrapperel s="span"><span class="ui-btn-inner ui-btn-corner-all"><span class ="ui-btn-text">Save
</span></span></a>

Set Detail Content (iPad project only)

Set Detail Content action is used to load content into detail screen when building an iPad app.

  1. Add a List component to the left-hand side
  2. Add a new page with any content, name the page ‘Details’
  3. Select the first item and add a Click event.
  4. Then add Set Detail Content action. You will be asked to select a page. Select ‘Details’. The content of this page will be loaded on the right-hand side in the iPad screen.