Custom HTML Templates

Urban Airship provides several predefined templates to be used for sending Rich Application Pages and Landing Pages to the device. Custom templates are also supported by uploading an HTML page.

Urban Airship JavaScript Interface

Both Android and iOS loads an Urban Airship JavaScript interface into every landing page and Rich Application Page. This interface allows the HTML pages to access information about the system and trigger actions. The interface is available on both platforms, namespaced by a global UAirship object.

UAirship.getUserId()

The user’s ID in the UA system (e.g. 4e84b80563051f67ec001a87).

UAirship.getDeviceModel()

The device model on which the user is viewing the Rich Application Page (e.g. iPod touch, XT1053).

UAirship.close()

Close the current landing page or Rich Application Page.

  • Android Simulates a back button
  • iOS If the webview’s delegate implements the protocol UARichContentWindow it will call closeWindow:

UAirship.runAction(actionName, argument, callback)

Triggers an action asynchronously. Any action that is registered in the device’s action registry are able to be triggered from JavaScript. For more information on actions, including a list of available actions and how to write custom actions, see Android Actions and iOS Actions.

  • actionName The name of the action to trigger.
  • argument The value of the action’s argument in the form of any valid JSON.
  • callback Callback when the action finishes. Invoked with an instance of an Error if an error occurred and any result data from the action.

Example:

// Triggers the add tags action with tag "MY_TAG"
UAirship.runAction("add_tags_action", "MY_TAG", function(error, result) {
  console.log("add_tags_action finished")
  if (!error) {
    console.log("Added MY_TAG")
  } else {
    console.log("Failed to add MY_TAG")
  }
})

console.log("add_tags_action called")

The callback will be called after the action has finished executing. The earliest the callback will ever be triggered is during the next turn of the event loop, i.e., the example above will always log “add_tags_action called” before “add_tags_action finished”.

UAirship.getMessageId()

The message ID being displayed or null for Landing Pages.

UAirship.getMessageSentDate()

The message’s sent date in GMT with format ‘yyyy-MM-dd HH:mm:ss’ or null for Landing Pages.

UAirship.getMessageSentDateMS()

The message’s sent date in milliseconds (unix epoch time) or -1 for Landing Pages.

UAirship.getMessageTitle()

The message’s title or null for Landing Pages.

Events

ualibraryready

Fired once the UAirship interface is fully loaded. This event will be fired after the content of the page is loaded.

Example:

// Check if the interface is fully loaded
if(typeof UAirship === 'object' && UAirship.runAction) {
  onload()
} else {
  document.addEventListener('ualibraryready', onload, false)
}

Urban Airship URL intercepting

Any URLs with the scheme uairship will be intercepted by the Urban Airship SDK.

uairship://run-basic-actions

Runs action with implicit string arguments. Actions and the arguments are defined by the URI parameters.

Example:

<a href="uairship://run-basic-actions?add_tags_action=hi&">Add tags!</a>

Will add the tag “hi” when the user clicks the link.

uairship://run-actions

The same as run-basic-actions but the action’s arguments are JSON encoded.

Example:

<!-- ["foo", "bar"] url encoded is %5B%22foo%22%2C%22bar%22%5D -->
<a href="uairship://run-actions?add_tags_action=%5B%22foo%22%2C%22bar%22%5D">Add tags!</a>

Will add the tags “foo” and “bar” to the device when the user clicks the link.

Custom Template Sample

Send a Rich Application Page or Landing page with the following HTML.

<html>
  <head>
    <script>
      function onUAReady() {
        var output = document.getElementById('output')

        // Write out all of the getters
        output.textContent += 'User Id:' + UAirship.getUserId() + '\n'
        output.textContent += 'Device Model: ' + UAirship.getDeviceModel() + '\n'
        output.textContent += 'Message Id: ' + UAirship.getMessageId() + '\n'
        output.textContent += 'Message Title: ' + UAirship.getMessageTitle() + '\n'
        output.textContent += 'Message Sent Date: ' + UAirship.getMessageSentDate() + '\n'
        output.textContent += 'Message Sent Date MS: ' + UAirship.getMessageSentDateMS()

        var closeButton = document.getElementById('close')
        closeButton.disabled = false
        closeButton.addEventListener('click', function()  {
          UAirship.close()
        })

        var addTagsButton = document.getElementById('addTags')
        addTagsButton.disabled = false
        addTagsButton.addEventListener('click', function()  {
            UAirship.runAction("add_tags_action", "hi", function(error, result) {
              if (error) {
                console.log("Failed to add tags!")
              } else {
                console.log("Tags added!")
              }
          })
        })
      }

      document.addEventListener('ualibraryready', onUAReady, false)
    </script>
  </head>
  <body>
    <button id="close" disabled>close</button>
    <button id="addTags" disabled>add tags</button>

    <pre id="output"></pre>
  </body>
</html>

The message displayed on the device.

../_images/custom_template.png

Apple, StoreKit and iPhone are trademarks of Apple, Inc. Maponics Neighborhood Boundaries © Maponics 2012. DMA® is a registered service mark of The Nielsen Company. Used under License.