PDA

View Full Version : Firing a 'tel:' link from a button



BenMajor
21 Mar 2011, 2:32 AM
Hi,

I have an ActionSheet which is shown when a user taps on a list item. In the ActionSheet are three buttons - one to remove the contact, one to make a call to them and one to dismiss the ActionSheet. My question is, how do I bind the equivalent of a '<a href=""></a>' to the button?

I need to specify the 'tel:' protocol so that iOS and Android will force the Phone application to load with this number? I have tried to bind the following to the 'tap' event of the button without success:


window.location.href = 'tel: numberHere';

Thanks,
Ben.

BenMajor
4 Apr 2011, 3:16 AM
Does no-one have an answer for this?

Thanks,
Ben.

heringsfilet
4 Apr 2011, 4:02 AM
I'm facing the same issue. I simply use plain text for the phone number yet but a button would be great.
I've heard that it would be better to ask the user if he really wants to call the number if you want to put your app into the Apple AppStore.

SimonFlack
4 Apr 2011, 4:13 AM
I am using a standard link but styling it to look like a button. This is a hack but it works. If anybody has a better solution please post it here.


.clicktocall{
background-color: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#dfdfdf));
border-style: solid;
border-width: 1px;
border-color: #c0c0c0;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 4px;
text-decoration: none;
color: #000;
margin-top: 5px;
margin-bottom: 5px;
width: 200px;
text-align: center;
}

.clicktocallon{
background: -webkit-gradient(linear, left top, left bottom, from(#00bcf2), to(#03799b));
}

.clicktocall a{
text-decoration: none;
color: #000;
}

HTML

<div id="clickPhone" class="clicktocall"><a href="tel:+4775517200" onclick="uin.contact.doVisualFeedBack(\'clickPhone\')">+47 755 17 200</a></div>

Visual Feedback Function

uin.contact.doVisualFeedBack = function(id,callback){
var hasClass = function(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
};
var addClass = function(ele,cls) {
if (!hasClass(ele,cls)) ele.className += " "+cls;
};
var removeClass = function(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
};

var div = document.getElementById(id);

addClass(div,'clicktocallon')

setTimeout(function(){
removeClass(div,'clicktocallon')
if(callback){
callback();
}
},1000);
}

BenMajor
4 Apr 2011, 4:40 AM
Thanks for your help, Simon. I guess that's the only option to implement it at the moment, unless any of the Sencha Touch developers can help?

For a mobile framework, I would have expected this to be more of a common issue than it appears to be, to be honest.

Thanks,
Ben.

SimonFlack
4 Apr 2011, 5:33 AM
Hey Ben. This is a common issue and it has been discussed before. The problem if I recall it correctly is due to the mobile browsers not allowing location changed from javascript and only supporting "<a href" type links.

Maybe you could try this... Seemed to work.


{
xtype: 'button',
html: '<a id="mylink" style="position:absolute; width: 0px; height: 0px; opacity: 0;" href="mailto:postmottak@uin.no">postmottak@uin.no</a>',
text: 'test',
handler: function(){
var fireEvent = function (obj,evt){
var fireOnThis = obj;
if( document.createEvent ) {
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( evt, true, false );
fireOnThis.dispatchEvent(evObj);
} else if( document.createEventObject ) {
fireOnThis.fireEvent('on'+evt);
}
}

fireEvent(document.getElementById('mylink'),'click');

}
}

heringsfilet
4 Apr 2011, 6:18 AM
Sorry for that question, I'm new to JS and SenchaTouch but what is the advantage of your solution compared to:


listeners: {
'tap': function () {
location = "tel:{phonenumber}";
}
}

mitchellsimoens
4 Apr 2011, 7:31 AM
Why not handle the redirect in the handler function of the button?

SimonFlack
4 Apr 2011, 7:44 AM
Does that work when the app is in standalone/homescreen mode?

I just figured it didn't seeing Ben was having problems. I have had problems with window.open() and assumed his problems may be being caused by the same issue.

But if you can do it straight from the handler than that is definitely the easiest.

mitchellsimoens
4 Apr 2011, 7:48 AM
I thought if you try to direct to a tel link that the browser will stop the redirect and launch the phone app. I could be totally wrong too :D

btw @SimonFlack, the link to your editableList demo is broken

SimonFlack
4 Apr 2011, 7:54 AM
I will test it on a phone asap. Do you know a good solution for opening external links in a new browser window from a sencha button in a standalone app?

BenMajor
4 Apr 2011, 8:02 AM
Sorry for the late response chaps. When I tried to use window.location.href in combination with the button handler in app mode, it didn't seem to intercept, even though I was passing a valid telephone number and the tel: prefix.

As far as I can tell, the only solution for now is that posted by Simon.

Thanks,
Ben.

SimonFlack
4 Apr 2011, 8:09 AM
btw @SimonFlack, the link to your editableList demo is broken

Our servers crashed over the weekend... I am restoring everything now :-(

Update: Should be up again now.

SimonFlack
4 Apr 2011, 9:51 AM
Hey Ben.

I created a little plugin to do this for you. Just tested it on my phone in standalone mode and everything worked.

demo: http://www.whitefox.no/plugins/linkbutton/

plugin: http://www.whitefox.no/plugins/linkbutton/simfla.ux.plugins.linkButton.js

Usage:

{
xtype: 'button',
linkId: 'myLink3',
url: 'tel:+4790992724',
text: 'Call: Simon Flack',
plugins: [ new simfla.ux.plugins.linkButton() ]
}

I am going to use this for opening external links but it will also work for tel and mailto links.

Hope this helps.

BenMajor
4 Apr 2011, 10:56 AM
Thanks Simon, that's fantastic!

kevinv1990
31 May 2011, 4:40 AM
Great solution, but I want to change the url dynamicly (when the panel becomes active) is this possible? Let's say the new url link comes from a record in a store. example you got a list with different music bands, and every music band has it's own number, so on the detailpage I want to give each music band his own phone number in the button.

Kevin

SimonFlack
31 May 2011, 4:50 AM
Hey Kevin..

I have added a setUrl() function to set the url dynamically after render.

http://www.sencha.com/forum/showthread.php?129018-Open-External-Links-in-new-browser-from-a-Button&p=606020&viewfull=1#post606020

Hope this helps.

Simon

kevinv1990
31 May 2011, 5:44 AM
You're the best, i found a similar solution myself 5 minutes ago. Than I checked the forum and saw your post. Thanks a lot, it's a great plugin, I wonder why sencha didn't make this before, since it's a mobile platform you would say that calling with your phone should not be that far off ^^.

markwyner
14 Dec 2011, 4:14 PM
Hey, all.

There's a really simple solution to this which I successfully use in my builds. Either of the following will work for mailto links:


handler: function() {
location = "mailto:someone@somewhere.com";
}
handler: function() {
location.href = "mailto:someone@somewhere.com";
}

I haven't tried this for a tel link but I have to assume it will work?

mrVinh
14 Dec 2011, 8:31 PM
Thanks for your help, Simon. I guess that's the only option to implement it at the moment, unless any of the Sencha Touch developers can help?

For a mobile framework, I would have expected this to be more of a common issue than it appears to be, to be honest.

Thanks