0

In an error message I'm writing with Lightning components, I have a phone number for customer support:

Component:

<div id="sldsErrorPanel" class="slds-has-error slds-hide" role="alert">
  <div id="sldsValidationMessage" class="slds-text-body_small slds-error-text"></div>
</div>

Controller:

validateInput : function(component, event, helper) {   
  helper.authenticateCredentials(component, helper);
},

validateInput : function (component, event, helper) {

  ...

  if (allValid) {
    $A.enqueueAction(component.get("c.validateInput"));
    return;
  }
}

Helper:

authenticateCredentials: function(component, helper) {      

  var accountLocked = "Your account has been locked. Please call us at 800-MY-NUMBER to unlock your account.";

  ...

}

I want to be able to make the phone number a link, an a href="tel:" element in the output so VoIP and mobile users can click the link and call, e.g.,

var accountLocked = "Your account has been locked. Please call us at <a href="tel:800-123-4567">800-MY-NUMBER</a> to unlock your account.";

I don't see anything in Lightning that allows me to do that. Is that possible?

  • Have you tried splitting your string and using lighting:formattedPhone here? – Jayant Das Sep 4 '18 at 14:29
  • You can also try lighnting:clickToDial . developer.salesforce.com/docs/component-library/bundle/… – Pranay Jaiswal Sep 4 '18 at 14:30
  • Thank you. It looks like :formattedPhone and :clickToDial aren't added to an outputted string. – Matt Smith Sep 4 '18 at 14:39
  • @MattSmith can you provide your component code, as how you are trying to render this value? The values need to be in their specific tags, so I would imagine that having it on the component something as [Your account has been locked ... <lightning:formattedPhone> ... rest of the text] should work. – Jayant Das Sep 4 '18 at 14:42
  • @JayantDas, I added a snippet of the code. I may need to just add it with static text in the component if I can't dynamically add it in the controller/helper. – Matt Smith Sep 4 '18 at 14:51
1

While there can be different ways to achieve this, but with what you are trying to achieve, I would have broken the string in different variables, and utilized the lightning:formattedPhone as below.

1. Declare 3 different attributes on my component, something as below

<aura:attribute name="myText1" type="String" default="Your account has been locked. Please call us at "></aura:attribute>
<aura:attribute name="myText2" type="String" default="800-MY-NUMBER"></aura:attribute>
<aura:attribute name="myText3" type="String" default=" to unlock your account."></aura:attribute>

2. Populate these fields in my JS controller/helper with any dynamic text

component.set("v.myText1", <first part of the text goes here>);
component.set("v.myText2", <phone number goes here>);
component.set("v.myText3", <last part of the text goes here>);

3. So that it finally, renders as below on my component:

{!v.myText1} <lightning:formattedPhone value="{!v.myText2}"></lightning:formattedPhone> {!v.myText3}

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.