0

I am using LWC and would like to create a link to record's detail page when using the <lightning-tile> element.

Question:

How can I do this using the href attribute?

I have tried the following, but it fails to print a <a href="/someid"> correctly.

Code:

myApp.html

<template>
   <!-- other code -->
    <template for:each={myAccounts} for:item="account">
            <div key={account.id} class="slds-col">
               <lightning-tile
                      label={account.Name}
                      href="/"+{account.Id}>
                    <p>here i go</p>
               </lightning-tile>
            </div>
        </template>
</template>

myApp.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
    @track
    myAccounts = [
        {
            "Id": "1",
            "Name": "Abc Inc.",
        },
        {
            "Id": "2",
            "Name": "Def Inc.",
        },
        {
            "Id": "3",
            "Name": "XYZ Inc.",
        },
        {
            "Id": "4",
            "Name": "WX Inc.",
        },
    ];
}
2

It looks like you are attempting to do an expression evaluation in the markup, which I don't think is supported in LWC at this time. You will likely need to do something like

myApp.js

import { LightningElement, track } from 'lwc';

export default class App extends LightningElement {
@track
myAccounts = [
    {
        "Id": "1",
        "Name": "Abc Inc.",
    },
    {
        "Id": "2",
        "Name": "Def Inc.",
    },
    {
        "Id": "3",
        "Name": "XYZ Inc.",
    },
    {
        "Id": "4",
        "Name": "WX Inc.",
    },
];

    myAccounts.forEach(function(item){
        item.Url = '/' + item.Id;
    }
    );
}

myApp.html

<template>
    <!-- other code -->
    <template for:each={myAccounts} for:item="account">
        <div key={account.id} class="slds-col">
           <lightning-tile
                  label={account.Name}
                  href={account.Url}>
                <p>here i go</p>
           </lightning-tile>
        </div>
    </template>
</template>

But It would probably be better to use the NavigationMixin from lightning/navigation to build the record url instead of just doing /<accountId>

| improve this answer | |
  • I did end up using NavigationMixin based on your solution – usernameabc Feb 14 at 20:16
0

I ended up using NavigationMixin to resolve this using recommendation from @n30r3b3l. Also removed href={account.Url}

myApp.html

<template>
   <!-- other code -->
    <template for:each={myAccounts} for:item="account">
            <div key={account.id} class="slds-col">
               <lightning-tile
                      label={account.Name}>
                    <p>here i go</p>
                    <lightning-button variant="Base" label="Record View" onclick={viewRecord} value={account.Id}></lightning-button>
               </lightning-tile>
            </div>
        </template>
</template>

myApp.js

viewRecord(event) {
        // Navigate to Account record page
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                "recordId": event.target.value,
                "objectApiName": "Account",
                "actionName": "view"
            },
        });
    }
| 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.