Skip to main content
deleted 124 characters in body
Source Link
sfdcfox
  • 501.6k
  • 21
  • 473
  • 827

Typically, you manipulate the data in the controller via JS, and then use it in your markup. Because the objects are using JSON, you can add properties even though they aren't in the original object definition. Here's a simple POC: //Controller with basic payload:

//Controller with basic payload:

import {LightningElement} from 'lwc';

export default class DcugDynamicLink extends LightningElement {

    payload = [{name: "Peter", id: "123"}, {name: "Gorav", id: "456"}];

    get dynamiclinks() {
        let linkswithrecords = [];
        this.payload.forEach(record => {
            //record is the loop variable
            record.linkurl = 'https://sanctionssearch.ofac.treas.gov/Details.aspx?id='+record.id;
            linkswithrecords.push(record);
        });

        return linkswithrecords;
    }

}
 
HTML

HTML


<template>
    <h1>Dynamic Links</h1>
    <lightning-layout multiple-rows="true" >
    <template for:each={dynamiclinks} for:item="res">
        <lightning-layout-item size="2" key={res.id} class="slds-hint-parent">
                <div class="slds-cell-wrap" title={res.name}>{res.name}</div>
        </lightning-layout-item>

        <lightning-layout-item size="10"  key={res.id} class="slds-hint-parent">
                <div class="slds-truncate">
                    <p><lightning-formatted-url value={res.linkurl} label={res.Name} target="_blank"></lightning-formatted-url></p>
                </div>
        </lightning-layout-item>

    </template>
    </lightning-layout>

</template>

Typically, you manipulate the data in the controller via JS, and then use it in your markup. Because the objects are using JSON, you can add properties even though they aren't in the original object definition. Here's a simple POC: //Controller with basic payload:

import {LightningElement} from 'lwc';

export default class DcugDynamicLink extends LightningElement {

    payload = [{name: "Peter", id: "123"}, {name: "Gorav", id: "456"}];

    get dynamiclinks() {
        let linkswithrecords = [];
        this.payload.forEach(record => {
            //record is the loop variable
            record.linkurl = 'https://sanctionssearch.ofac.treas.gov/Details.aspx?id='+record.id;
            linkswithrecords.push(record);
        });

        return linkswithrecords;
    }

}
 
HTML
<template>
    <h1>Dynamic Links</h1>
    <lightning-layout multiple-rows="true" >
    <template for:each={dynamiclinks} for:item="res">
        <lightning-layout-item size="2" key={res.id} class="slds-hint-parent">
                <div class="slds-cell-wrap" title={res.name}>{res.name}</div>
        </lightning-layout-item>

        <lightning-layout-item size="10"  key={res.id} class="slds-hint-parent">
                <div class="slds-truncate">
                    <p><lightning-formatted-url value={res.linkurl} label={res.Name} target="_blank"></lightning-formatted-url></p>
                </div>
        </lightning-layout-item>

    </template>
    </lightning-layout>

</template>

Typically, you manipulate the data in the controller via JS, and then use it in your markup. Because the objects are using JSON, you can add properties even though they aren't in the original object definition. Here's a simple POC:

//Controller with basic payload:

import {LightningElement} from 'lwc';

export default class DcugDynamicLink extends LightningElement {

    payload = [{name: "Peter", id: "123"}, {name: "Gorav", id: "456"}];

    get dynamiclinks() {
        let linkswithrecords = [];
        this.payload.forEach(record => {
            //record is the loop variable
            record.linkurl = 'https://sanctionssearch.ofac.treas.gov/Details.aspx?id='+record.id;
            linkswithrecords.push(record);
        });

        return linkswithrecords;
    }

}

HTML


<template>
    <h1>Dynamic Links</h1>
    <lightning-layout multiple-rows="true" >
    <template for:each={dynamiclinks} for:item="res">
        <lightning-layout-item size="2" key={res.id} class="slds-hint-parent">
                <div class="slds-cell-wrap" title={res.name}>{res.name}</div>
        </lightning-layout-item>

        <lightning-layout-item size="10"  key={res.id} class="slds-hint-parent">
                <div class="slds-truncate">
                    <p><lightning-formatted-url value={res.linkurl} label={res.Name} target="_blank"></lightning-formatted-url></p>
                </div>
        </lightning-layout-item>

    </template>
    </lightning-layout>

</template>
Source Link
BritishBoyinDC
  • 14.3k
  • 3
  • 44
  • 85

Typically, you manipulate the data in the controller via JS, and then use it in your markup. Because the objects are using JSON, you can add properties even though they aren't in the original object definition. Here's a simple POC: //Controller with basic payload:

import {LightningElement} from 'lwc';

export default class DcugDynamicLink extends LightningElement {

    payload = [{name: "Peter", id: "123"}, {name: "Gorav", id: "456"}];

    get dynamiclinks() {
        let linkswithrecords = [];
        this.payload.forEach(record => {
            //record is the loop variable
            record.linkurl = 'https://sanctionssearch.ofac.treas.gov/Details.aspx?id='+record.id;
            linkswithrecords.push(record);
        });

        return linkswithrecords;
    }

}

HTML
<template>
    <h1>Dynamic Links</h1>
    <lightning-layout multiple-rows="true" >
    <template for:each={dynamiclinks} for:item="res">
        <lightning-layout-item size="2" key={res.id} class="slds-hint-parent">
                <div class="slds-cell-wrap" title={res.name}>{res.name}</div>
        </lightning-layout-item>

        <lightning-layout-item size="10"  key={res.id} class="slds-hint-parent">
                <div class="slds-truncate">
                    <p><lightning-formatted-url value={res.linkurl} label={res.Name} target="_blank"></lightning-formatted-url></p>
                </div>
        </lightning-layout-item>

    </template>
    </lightning-layout>

</template>