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>
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`;
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
