Proper way to do mailto: and tel: links

[J.]

I've got a Kendo UI Mobile listview and each item has a phone number and email address, both of which should be clickable/touchable and open the email app and phone dialer, respectively. I've tried several things, but none of them work in the simulator, and all of which only seem to work either extremely rarely or slowly on the phone. How should this look?

<ul data-role="listview">
<li>
option one<br />
<a href="mailto:[e-mail]">[e-mail]</a><br />
<a href=tel:[phone]">123-123-1234</a>
</li>

<li>
option two<br />
<div onclick="window.location.href = 'mailto:[e-mail]';">[e-mail]</div>
<div onclick="window.location.href = 'tel:[phone]';">123-123-1234</div>
</li>
</ul>

[Kristian D. Dimitrov]

Hi J.,

 You must specify, that you want to navigate to an external link using 'data-rel="external"' attribute. It still won't work in the simulator, because this functionality is not implemented inside it yet. However it will work as expected on real devices. You should modify your code like so:

<ul data-role="listview">
    <li>
        <a href="mailto:[e-mail]" data-rel="external">[e-mail]</a><br />
        <a href="tel:[phone]" data-rel="external">123-123-1234</a>
    </li>
</ul>

Regards,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[J.]

Thanks, Kristian. That works better, but I still have to tap the links several times before it opens. I'm wondering if having more than one link per <li> is the problem. You can view my project under this account (called MVCS). Here's the code I'm using:

<li>
<h3>Title</h3>
<p>
<a data-rel="external" href="mailto:[e-mail]">[e-mail]</a><br />
<a data-rel="external" href="tel:[phone]">[phone]</a>
</p>
</li>

[J.]

Let me add something. I've got another place where I have web links ("Other Links" view if you look at my project) and I added data-rel="external" to them. I have to click the several times and then they open the web site in a browsers within my application. I'd like them to open the URL in the browser app. Here's the code:

<div data-role="view" id="tabstrip-otherlinks" data-title="Other Links">
<h1>Other Links</h1>
<ul data-role="listview">
<li data-icon="globe">
<a data-rel="external" href="http://www.test.org/" target="_blank">Website</a>
</li>
<li data-icon="pinterest">
<a data-rel="external" href="http://pinterest.com/" target="_blank">Pinterest</a>
</li>
</ul>
</div>

[J.]

Since you haven't had a chance to respond to this thread yet, let me tag a third related question on to the first two:

In addition to:
1) linking the user to sites in the phone's native browser app and
2) linking with mailto: and tel: links

I'd also like to know:
3) how to open a link to an embedded PDF in the native browser app.

Thanks!

[J.]

Hi J.,

For the issue with "mailto:" and "tel:" just update the Kendo Mobile with the latest version shipped with Icenium (v2012.3.1315) and this should solve it. To update Kendo just copy the Kendo files(or their content) from a new blank Kendo Mobile project.

To open sites in the default browser you should modify your code as shown below.

HTML:

<ul data-role="listview" data-click="navigateToAddress">
    <li data-icon="globe">
        <a data-rel="external" data-link="somelink.com" target="_blank">Somelink</a>
    </li>
</ul>

JavaScript:

navigateToAddress = function(e){
       var that = this,
             data = e.target.data();
        if(device.platform.toLowerCase() === "android"){
              navigator.app.loadUrl(data.link, { openExternal:true } );
         } else {
              window.location.href = data.link;
         }
}

We made a sample application to demonstrate open PDF file in both Android and iOS using Icenium and the Child Browser plugin. Everyone can Clone it from Sample Projects in Graphite or Mist. Note that plugins do not work in simulators, so test on real device only.

You might want to hide the Android splash-screen as soon as Cordova fires "deviceready" event. To do so, just add the following line of code inside the "deviceready" handler:

function onDeviceReady() {
    navigator.splashscreen.hide();
}

Greetings,
Kristian D. Dimitrov
the Telerik team

Share feedback and vote for features on our Feedback Portal.
Want some Kendo UI online training - head over to Pluralsight.

[J.]

Thanks, Kristian. I'll give that a try.

[Sam]

Hopefully this is a good place for this. We have an app that used the following HTML:

<div data-role="navbar">
    <a id="btnUploadPics" data-click="uploadPics" data-role="button" data-align="right">Add Photos</a>
</div>

JS: 
function uploadPics() {
    var sLink = "mailto:[e-mail]?subject=test";
    window.open(sLink, "emailWindow");
}

This was working fine for the last 2 years until the latest KendoUI update. I've tried
window.location.href = "mailto:[e-mail]"
window.location = "mailto:[e-mail]"

Nothing seems to work. Now I get a 'null' in the recipient and nothing else. 

[Zdravko]

Hello Sam,

I updated kendo to 2013.3.1119 version and the code below works perfect. Your code works as well, but it opens the link in the browser first so I modified it.

app.upl=function () {
        var sLink = "mailto:[e-mail]?subject=test";
        //window.open(sLink, "emailWindow");
        window.location.href=sLink;
    };

<div data-role="navbar">
    <a data-rel="external" id="btnUploadPics" data-click="app.upl" data-role="button" data-align="right">Add Photos</a>
</div>

If you send me your project I could take a look.
Thanks.

Regards,
Zdravko
Telerik
You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
Looking for tips & tricks directly from the Icenium team? Check out our blog!
Share feedback and vote for features on our Feedback Portal.

[Sam]

Thanks for the response. I did get it working by just using the href attribute on the anchor tag. I was using a function because I had to change out the parms being sent so I'm just updating the attribute instead and it works fine now. Thanks again for the quick reply. 

[Ram]

Hi,

Im using appBuilder extension on visual studios 2015 rc and im using Kendo UI to build an app..

            <ul data-role="listview">
                <li>
                    <a class="btn" data-rel="external" target="_blank" data-role="touch" href="tel:[phone]">Call us</a>
                    <a class="btn" data-rel="external" target="_blank" data-role="touch" href="mailto:[e-mail]?subject=Contact via App">Mail us</a>
                </li>
            </ul>

both links are doing nothing on android phone.. I haven't tested it on iOS.

Can someone please help me?

more details:

OS: windows 7, Visual studios 2015rc with AppBuilder Extension, Kendo UI with Tabstrip template

 

 

[Ventsislav Georgiev]

Hello Ram,

Thank you for contacting us. I am afraid I was not able to reproduce the issue.

I have tested your exact code snippet on Android 4.0.4 and 5.0 device:

• The "tel:*" link opens the dialer with the number already in.
• The "mailto:*" opens a popup to choose a mail client.

The test was made with a newly created project from the Kendo UI TabStrip template in Visual Studio.
The Kendo UI version was Kendo UI Core v2014.1.624 which is the default version coming with the template. I also tested with an updated version - Kendo UI Core v2015.2.727.

Users have experienced issues with external links after Cordova 3.6 was released as external links had to be explicitly white listed. We have already addressed the issue by extending the default configuration files. You can find more information in the External Application Whitelist section of this article. You can also check this Stack Overflow thread.

Here is a useful link about how to access the configuration files for the different platforms inside an AppBuilder project. Make sure your configuration files white list the tel: and mailto: links. If that doesn't help, please send over your project so we can further investigate the issue.

Regards,
Ventsislav Georgiev
Telerik

 

 

[Trisha]

Hi 

I tested your code in Js.do you forgotten a quote. I added in only the phone link work and launch my skype. I put a real email address to see if it open my email or outlook but it does nothing.

<html>
<body>
<ul data-role="listview">
<li>
option one<br />
<a href="mailto:[e-mail]" data-rel="external">[e-mail]</a><br />
<a href="tel:[phone]" data-rel="external">123-123-1234</a>
</li>

<li>
option two<br />
<div onclick="window.location.href= 'mailto:[e-mail]';">[e-mail]</div>
<div onclick="window.location.href = 'tel:[phone]';">123-123-1234</div>
</li>
</ul>

</body>

 

[rashmi]

Hi,

I have a doubt how will the '' behave when there is no email client application in mobile devices