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.
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
- SAP Managed Tags:
2 Comments
