This topic is locked

Clickable Phone Number

9/30/2018 3:32:15 PM
ASPRunner.NET Tips and tricks
jadach authorDevClub member

I just created a click to call button for mobile use. Here is my code that I want to share in case someone else needs to do this.
I assume the field name is called Phone.
1st, make a second instance of the Phone field. One will show for desktop and one will show on mobile and be clickable.
View as Custom for the one you want clickable.

return "<a class="

+ '"'

+ "btn btn-primary btn-xlg"

+ '"'

+ "href="

+ '"'

+ "tel:"

+data["Phone"].ToString()

+ '"'

+ "style="

+ '"'

+ "padding:10px;background-color:rgba(38, 90, 136, 1)"

+ '"'

+ ">"

+ "Click to Call <span class="

+ '"'

+ "glyphicon glyphicon-earphone"

+ '"' + "style="

+ '"'

+ "padding-left:5px; padding-right:5px;"

+ '"'

+ "></span>"

+ data["Phone"].ToString()

+ "</a>"


In the editor - HTML mode, add the following classes to each phone field. This will make the clickable version to show only on mobile devices and the other show on desktop.
Add hidden-lg hidden-sm hidden-md to class for the Phone field you want to show as clickable.
Add hidden-xs to class for the Phone field you want to show as text.
Example as to how it should look.

{BEGIN Phone_tabfieldblock}

<DIV class="container">

<DIV class="form-group in-tab hidden-lg hidden-sm hidden-md {$fielddispclass_Phone}" data-fieldname="Phone">

<LABEL class="col-md-3 text-right">

{$label dbo_ServiceProviders Phone}

</LABEL>

<DIV class="col-md-6 fieldvalue_Phone">

{$Phone_value}

</DIV>

</DIV>

</DIV>

{END Phone_tabfieldblock}

{BEGIN Phone1_tabfieldblock}

<DIV class="container">

<DIV class="form-group in-tab hidden-xs {$fielddispclass_Phone1}" data-fieldname="Phone1">

<LABEL class="col-md-3 text-right">

{$label dbo_ServiceProviders Phone1}

</LABEL>

<DIV class="col-md-6 fieldvalue_Phone1">

{$Phone1_value}

</DIV>

</DIV>

</DIV>

{END Phone1_tabfieldblock}