You’ve got a Windows Phone 8 app and you want to initiate a phone call from a number embedded in a Web View. In Windows 8, this just works, literally put a phone number in your rendered html and the WebView will detect it and make it clickable. However, on Windows Phone 8 you will find that your phone number just renders as regular text.
At first, I attempted doing this the easy way by using a telephone protocol link in your html as mentioned on David Walsh’ blog post on the matter.
But… it seems like the protocol trick just isn’t working, it may be possible that we can inject something to turn on built-in “data detectors” but I can’t figure it out, so let’s make something we know can work.
Given: We can make a phone call in C# and WebView controls can allow us to call JS that can externally notify a method in C#. So let’s embed a button that when clicked calls out to the C# which in turn will initiate a phone call!
But let’s do this a cool way and in effect, create our own data detector since we don’t get the luxury of having one automatically like in Windows 8. Let’s also make it configurable, and why not put it in the main XPCK branch in case someone else wants to use this feature in an XPCK app.
In essence, we will create something technically referred to as a shim: http://en.wikipedia.org/wiki/Shim_(computing)
First we set the ID_CAP_PHONEDIALER capability to true in WMAppmanifest.xml, otherwise we won’t be able to initiate a call as this requires elevated permissions.
Then create a JS function to detect phone numbers and turn those into buttons with a method that calls out to C#, here is a JSFiddle I created: http://jsfiddle.net/JVsM4/252/
It simulates what we want to do but….
Note: To actually call out to C# requires a slight modification:
First we must create a scriptNotify event and enable script execution on the WebView control
And in our JS, change alert() to window.external.notify(), because whenever window.external.notify is called, it will enter the method set to execute off of the scriptNotify event and pass along any parameter it may have as a single string.
So we encode this parameter with a known prefix (launchPhoneCall: ) and intercept the parameter in C#, parsing out the 16 characters of the known prefix to yield a phone number.
Next we look at the docs for the Phone task @ http://msdn.microsoft.com/en-us/library/windowsphone/develop/hh394025(v=vs.105).aspx and create a method to perform a call on our intercepted parameter.
To be useful to XPCK we simply create a setting in AppSettings.cs and trigger all of this behavior based on that value with a simple conditional in the View. If true, we inject the JS method created above into the rendered Item.Description, otherwise we leave it out.
You can view the specific implemtation of this feature in the following XPCK commit entry: https://github.com/winappkits/XPlatformCloudKit/commit/026788bb70111530163a5075ff4affd0168ee35d
