CODEWITHSUNDEEP
htmlsalesforcehreflwc
Pixel
Pixel

Reputation: 49

Passing a variable to href in HTML

I want the 'id' variable between 'Contact' and 'view', how should i do it to make it accessible dynamically? Any simple solution that works?

var id = 0x323214343;
<a href="https://develop.lightning.force.com/lightning/r/Contact//view">{doctor.Name}</a>

Upvotes: 0

Views: 1657

Answers (2)

RubenDG
RubenDG

Reputation: 1405

In the JS file of your lwc you could expose a getter for that url, which should be relative instead of an absolute one:

get doctorURL() {
    // this is a relative url.
    return `/lightning/r/Contact/${this.doctor.Id}/view`;
}

I assumed the Id is a property of doctor object.
Then in template you should have:

<a href={doctorURL}>{doctor.Name}</a>

Please note that document.getElementById(); won't work in LWC. Documentation:

Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID

Upvotes: 0

Vasko Vasilev
Vasko Vasilev

Reputation: 574

You're gonna need to use some Javascript :)

Simply add an id property to your ancor element:

<a id="anchor" href="https://develop.lightning.force.com/lightning/r/Contact//view">{doctor.Name}</a>

And then set it dynamically.

var a = document.getElementById('anchor');
var id = 0x323214343;
a.href = `https://develop.lightning.force.com/lightning/r/Contact/{{id}}/view`;

Upvotes: 0

Related Questions