Proper way to do mailto: and tel: links

13 posts, 1 answers
  1. J.
    J. avatar
    22 posts
    Member since:
    Jan 2013

    Posted 07 Feb 2013 Link to this post

    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:sample@email.com">sample@email.com</a><br /> <a href=tel:1231231234">123-123-1234</a> </li> <li> option two<br /> <div onclick="window.location.href = 'mailto:sample@email.com';">sample@email.com</div>
    <div onclick="window.location.href = 'tel:1231231234';">123-123-1234</div> </li>
    </ul>





  2. Kristian D. Dimitrov
    Admin
    Kristian D. Dimitrov avatar
    68 posts

    Posted 11 Feb 2013 Link to this post

    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:sample@email.com" data-rel="external">sample@email.com</a><br />
            <a href="tel:1231231234" 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.
  3. J.
    J. avatar
    22 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    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:test@test.com">test@test.com</a><br />
    <a data-rel="external" href="tel:1231231234">(123) 123-1234</a>
    </p>
    </li>
  4. J.
    J. avatar
    22 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    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>
  5. J.
    J. avatar
    22 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    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!
  6. Answer
    J.
    J. avatar
    22 posts
    Member since:
    Jan 2013

    Posted 15 Feb 2013 Link to this post

    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.
  7. J.
    J. avatar
    22 posts
    Member since:
    Jan 2013

    Posted 18 Feb 2013 Link to this post

    Thanks, Kristian. I'll give that a try.
  8. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 15 Dec 2013 Link to this post

    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:test@test.com?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:test@test.com"
    window.location = "mailto:test@test.com"

    Nothing seems to work. Now I get a 'null' in the recipient and nothing else. 
  9. Zdravko
    Admin
    Zdravko avatar
    657 posts

    Posted 18 Dec 2013 Link to this post

    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:test@test.com?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.
  10. Sam
    Sam avatar
    60 posts
    Member since:
    Mar 2011

    Posted 18 Dec 2013 Link to this post

    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. 
  11. Ram
    Ram avatar
    3 posts
    Member since:
    Jul 2015

    Posted 28 Jul 2015 Link to this post

    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:01628788788">Call us</a>
                        <a class="btn" data-rel="external" target="_blank" data-role="touch" href="mailto:info@parkcarsexecutive.com?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

     

     

  12. Ventsislav Georgiev
    Admin
    Ventsislav Georgiev avatar
    17 posts

    Posted 31 Jul 2015 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  13. Trisha
    Trisha avatar
    1 posts
    Member since:
    Jul 2016

    Posted 23 Jul in reply to J. Link to this post

    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:girlfridayz@girlfridayz.com" data-rel="external">sample@email.com</a><br />
    <a href="tel:1231231234" data-rel="external">123-123-1234</a>
    </li>

    <li>
    option two<br />
    <div onclick="window.location.href= 'mailto:girlfridayz@girlfridayz.com';">sample@email.com</div>
    <div onclick="window.location.href = 'tel:1231231234';">123-123-1234</div>
    </li>
    </ul>

    </body>

     

Back to Top