Skip to Content
Author's profile photo Former Member

SUP 2.1.3 adds the LINK control

The Sybase Unwired Platform (SUP) has had a customization mechanism for Hybrid Web Container (HWC) applications since the 2.0 release.  Apps written with the SUP Workflow Forms Editor generate cross-platform hybrid web apps based on the JQueryMobile and PhoneGap frameworks.  These apps run inside the SUP Hybrid Web Container, which can be downloaded from the Apple AppStore or GooglePlay for Android devices. 

One particular artifact that is created during the app generation process is the “custom.js” file, which allows developers to write specific UI customizations with an event-driven coding architecture.  

If you have experimented with the Employee Directory sample app, you’ve seen the custom.js file in action.  The code in the beforeShowScreen() event for the Employee Details screen would replace the simple text fields for Address, Phone, and Email Address with actual HTML anchors.  The address field would become a link to the Google Maps API, and the phone and email fields would become <tel:> and <mailto:> anchors, respectively.  It was a nice feature for the users, but fairly complex to implement.

Sybase and SAP have just released version 2.1.3 of the Sybase Unwired Platform, or SUP, and it contains a number of welcome enhancements.  The one I’ll be discussing in this blog is the new Link control.  This new control replaces the need to write javascript customizations into the custom.js file to do simple tasks like embedding <tel:> and <mailto:> anchors.  Figure 1 below shows the new control in action.  Notice that I have selected the email field.  In the prior versions of this app, that was a simple Text field, and javascript was required to transform that into a mailto: anchor.  It is now a Link control, and the HREF settings section of the Properties pane is used to set the appropriate HTML tag.

workflow forms editor.png

The available options are

  • Phone Number:  generates a <tel:> tag, and clicking the number activates the phone on the device (if present).  It will also activate Skype for VOIP calls, if installed on the device.
  • Email Address:  generates a <mailto:> tag.  Clicking the link initiates the mail client, and creates a new email with the designated recipient.
  • Open External URL:  this generates the openURLinBrowser() javascript function, and passes the URL from the field as the argument.
  • Custom:  this also generates the openURLinBrowser() function, but allows for additional parameters/arguments to be encoded into the method call.  The Address link control in the sample app is an example of the Custom option.

Download the latest Employee Directory sample app for 2.1.3 to see this new control in action.

-Paul Horan-

Global Mobility SWAT

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Paul,

      I am using Generate Hybrid App API approach of SUP 2.2.

      Can you please suggest as to how we can open the google maps in external browser using HTML5 and JS.



      Author's profile photo Former Member
      Former Member

      Tried out using

      <a href="javascript: showUrlInBrowser('URL')">Text Here</a> and it worked.