You need to sign in to do that
Don't have an account?
Shilpa Goyal 9
display associated contact on button click in LWC
Hello ,
I have multiple contacts and their selected vehicle which they have to schedule for pickup and i have multiple buttons each associated with 1 contact but i want to show Vehicle name when schedule pickup button clicks, and i am showing that UI page by iteration. Can somebody help me how can i acheive this in LWC.
<template for:each={records} for:item ='record'>
<div key = {record.Id} >
<lightning-layout multiple-rows="true">
<lightning-layout-item class="slds-p-around_xx-small" size="12">
<lightning-layout>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%" class="slds-m-around_small">
<div style="font-size: 15px;"><b>{record.Model__c}</b></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div></div>
</div>
</lightning-layout-item>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;">{record.Miles__c} Miles</div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;">${record.Retail_Price__c}</div>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-layout-item>
</lightning-layout>
<lightning-layout multiple-rows="true">
<lightning-layout-item class="slds-p-around_xx-small" size="12">
<lightning-layout>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%" class="slds-m-around_small">
<div style="font-size: 14px;"><b>Unit #{record.Name}</b></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;">{record.PICK_UP_LOCATION__c}</div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;"><b>Earliest Pickup Date</b></div>
</div>
</lightning-layout-item>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;"><br><br>{dateValue}</div>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-layout-item>
</lightning-layout>
<!-- <div class="slds-cell-wrap">{record.Model__c}
{record.Miles__c} Miles
</div>
<div>{record.Retail_Price__c}</div>
<div>Unit #{record.Name}</div>
<div>{record.PICK_UP_LOCATION__c}</div>
<div>Earliest Pickup date {dateValue}
<lightning-formatted-date-time
value={dateValue}
year="numeric"
month="numeric"
day="numeric">
</lightning-formatted-date-time>
</div>-->
<lightning-button class="button1" label="Schedule Pickup" title="Schedule Pickup" onclick={handelButton1} disabled={slot1}></lightning-button>
</div>
</template>
I have multiple contacts and their selected vehicle which they have to schedule for pickup and i have multiple buttons each associated with 1 contact but i want to show Vehicle name when schedule pickup button clicks, and i am showing that UI page by iteration. Can somebody help me how can i acheive this in LWC.
<template for:each={records} for:item ='record'>
<div key = {record.Id} >
<lightning-layout multiple-rows="true">
<lightning-layout-item class="slds-p-around_xx-small" size="12">
<lightning-layout>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%" class="slds-m-around_small">
<div style="font-size: 15px;"><b>{record.Model__c}</b></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div></div>
</div>
</lightning-layout-item>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;">{record.Miles__c} Miles</div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;">${record.Retail_Price__c}</div>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-layout-item>
</lightning-layout>
<lightning-layout multiple-rows="true">
<lightning-layout-item class="slds-p-around_xx-small" size="12">
<lightning-layout>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%" class="slds-m-around_small">
<div style="font-size: 14px;"><b>Unit #{record.Name}</b></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;">{record.PICK_UP_LOCATION__c}</div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;"><b>Earliest Pickup Date</b></div>
</div>
</lightning-layout-item>
<lightning-layout-item class="slds-p-around_xx-small" size=6>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div></div>
</div>
<div style="display: inline-flex; width: 51%;" class="slds-m-around_small">
<div style="font-size: 14px;"><br><br>{dateValue}</div>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-layout-item>
</lightning-layout>
<!-- <div class="slds-cell-wrap">{record.Model__c}
{record.Miles__c} Miles
</div>
<div>{record.Retail_Price__c}</div>
<div>Unit #{record.Name}</div>
<div>{record.PICK_UP_LOCATION__c}</div>
<div>Earliest Pickup date {dateValue}
<lightning-formatted-date-time
value={dateValue}
year="numeric"
month="numeric"
day="numeric">
</lightning-formatted-date-time>
</div>-->
<lightning-button class="button1" label="Schedule Pickup" title="Schedule Pickup" onclick={handelButton1} disabled={slot1}></lightning-button>
</div>
</template>