0

here I have one product data table without checkbox,this is the default one,but when I navigate from opportunity page to product page to add products to opportunity,to add product I need to render another same data table with checkbox each row, When I add them, they should reflect in opportunity page from which I navigated. How can I achive this? .html

    <div class="size">
    <lightning-card title="List of Products" class="size" style="width: 1850px;">
       <div >
            <table >
                <tr >
                    <th class="thClass">
                        <p>
                        <c-multiselectdropdown 
                            label-name="Short serial"
                            object-api-name= "Product2"
                            field-api-names="Id,ProductCode"
                            filter-field-api-name="ProductCode"
                            icon-name="standard:Product2"
                            onretrieve={selectItemEventHandler} 
                            onremove={deleteItemEventHandler}>
                        </c-multiselectdropdown>
                    </p>   </th>
                    <!-- <th class="thClass"> 
                        <p class="slds-p-horizontal_small">
                            <c-multiselectdropdown 
                                label-name="VIN"
                                object-api-name= "Product2"
                                field-api-names="Id,VIN__c"
                                filter-field-api-name="VIN__C"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerVIN} 
                                onremove={deleteItemEventHandlerVIN}>
                            </c-multiselectdropdown>
                        </p>   
                    </th> -->
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Customer"
                                object-api-name= "Product2"
                                field-api-names="Id,Customer__c"
                                filter-field-api-name="Customer__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerCustomer} 
                                onremove={deleteItemEventHandlerCustomer}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Retail Hold"
                                object-api-name= "Product2"
                                field-api-names="Id,Retail_Floor__c"
                                filter-field-api-name="Retail_Floor__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerRetailHold} 
                                onremove={deleteItemEventHandlerRetailHold}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="DOH"
                                object-api-name= "Product2"
                                field-api-names="Id,DOH__c"
                                filter-field-api-name="DOH__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerDOH} 
                                onremove={deleteItemEventHandlerDOH}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Year"
                                object-api-name= "Product2"
                                field-api-names="Id,Year__c"
                                filter-field-api-name="Year__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerYear} 
                                onremove={deleteItemEventHandlerYear}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Model"
                                object-api-name= "Product2"
                                field-api-names="Id,Model__c"
                                filter-field-api-name="Model__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerModel} 
                                onremove={deleteItemEventHandlerModel}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p>
                            <c-multiselectdropdown 
                                label-name="Mileage"
                                object-api-name= "Product2"
                                field-api-names="Id,Mileage__c"
                                filter-field-api-name="Mileage__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerMileage} 
                                onremove={deleteItemEventHandlerMileage}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass"> 
                        <p >
                            <c-multiselectdropdown 
                                label-name="Engine Model"
                                object-api-name= "Product2"
                                field-api-names="Id,Engine__c"
                                filter-field-api-name="Engine__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerEngine} 
                                onremove={deleteItemEventHandlerEngine}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Sleeper"
                                object-api-name= "Product2"
                                field-api-names="Id,Sleeper__c"
                                filter-field-api-name="Sleeper__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerSleeper} 
                                onremove={deleteItemEventHandlerSleeper}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Sleeper Size"
                                object-api-name= "Product2"
                                field-api-names="Id,Sleeper_Size__c"
                                filter-field-api-name="Sleeper_Size__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerSleeperSize} 
                                onremove={deleteItemEventHandlerSleeperSize}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Transmission Model"
                                object-api-name= "Product2"
                                field-api-names="Id,Transmission_Model__c"
                                filter-field-api-name="Transmission_Model__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerTransmissionModel} 
                                onremove={deleteItemEventHandlerTransmissionModel}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Trans Type"
                                object-api-name= "Product2"
                                field-api-names="Id,Trans_Type__c"
                                filter-field-api-name="Trans_Type__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerTransType} 
                                onremove={deleteItemEventHandlerTransType}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Horse Power"
                                object-api-name= "Product2"
                                field-api-names="Id,Horse_Power__c"
                                filter-field-api-name="Horse_Power__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerHorsePower} 
                                onremove={deleteItemEventHandlerHorsePower}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Color"
                                object-api-name= "Product2"
                                field-api-names="Id,Color__c"
                                filter-field-api-name="Color__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerColor} 
                                onremove={deleteItemEventHandlerColor}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Rear Axle Capacity"
                                object-api-name= "Product2"
                                field-api-names="Id,Rear_Axle_Capacity__c"
                                filter-field-api-name="Rear_Axle_Capacity__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerRearAxleCapacity} 
                                onremove={deleteItemEventHandlerRearAxleCapacity}>
                            </c-multiselectdropdown>
                        </p>  
                    </th> 
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Wheel Base"
                                object-api-name= "Product2"
                                field-api-names="Id,Wheelbase__c"
                                filter-field-api-name="Wheelbase__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerWheelBase} 
                                onremove={deleteItemEventHandlerWheelBase}>
                            </c-multiselectdropdown>
                        </p>  
                    </th> 
                    
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Location"
                                object-api-name= "Product2"
                                field-api-names="Id,Location__c"
                                filter-field-api-name="Location__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerLocation} 
                                onremove={deleteItemEventHandlerLocation}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>

                    <th class="thClass">
                        <p>
                            <c-multiselectdropdown 
                                label-name="City"
                                object-api-name= "Product2"
                                field-api-names="Id,City__c"
                                filter-field-api-name="City__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerCity} 
                                onremove={deleteItemEventHandlerCity}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>

                    <th class="thClass">
                        <p>
                            <c-multiselectdropdown 
                                label-name="State"
                                object-api-name= "Product2"
                                field-api-names="Id,State__c"
                                filter-field-api-name="State__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerState} 
                                onremove={deleteItemEventHandlerState}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>

                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Move Order Date"
                                object-api-name= "Product2"
                                field-api-names="Id,Move_Order_Date__c"
                                filter-field-api-name="Move_Order_Date__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerMoveOrderDate} 
                                onremove={deleteItemEventHandlerMoveOrderDate}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>

                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Destination"
                                object-api-name= "Product2"
                                field-api-names="Id,Destination__c"
                                filter-field-api-name="Destination__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerDestination} 
                                onremove={deleteItemEventHandlerDestination}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Destination City"
                                object-api-name= "Product2"
                                field-api-names="Id,Destination_City__c"
                                filter-field-api-name="Destination_City__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerDestinationCity} 
                                onremove={deleteItemEventHandlerDestinationCity}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                    <th class="thClass">
                        <p >
                            <c-multiselectdropdown 
                                label-name="Destination State"
                                object-api-name= "Product2"
                                field-api-names="Id,Destination_State__c"
                                filter-field-api-name="Destination_State__c"
                                icon-name="standard:Product2"
                                onretrieve={selectItemEventHandlerDestinationState} 
                                onremove={deleteItemEventHandlerDestinationState}>
                            </c-multiselectdropdown>
                        </p>   
                    </th>
                </tr>
                
            <!--<lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search Short Serial"
                value={searchKey}></lightning-input>-->
  
            </table>    
                           
            <lightning-datatable key-field="Id" data={prodData} columns={columns} sorted-by={sortedBy}
                sorted-direction={sortedDirection} onsort={sortColumns} hide-checkbox-column="true">
            </lightning-datatable>


            <!--<template if:true={render}>
                <lightning-datatable key-field="Id" data={prodData} columns={columns} sorted-by={sortedBy}
                sorted-direction={sortedDirection} onsort={sortColumns} >
            </lightning-datatable>
            </template> -->


            </br>
            <lightning-layout horizontal-align="space">
                <lightning-layout-item flexibility="auto">
                    <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}>
                    </lightning-button>
                </lightning-layout-item>
                <lightning-layout-item flexibility="auto">
                    Page {page} of {totalPage}
                </lightning-layout-item>
                <lightning-layout-item flexibility="auto">
                    <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right"
                        onclick={nextHandler}></lightning-button>
                </lightning-layout-item>
            </lightning-layout>
        </div>
    </lightning-card>
    </div>
  </template>```
Improve this question
10
  • Could you please elaborate more, where did you keep your LWC ?
    – Shagun Sharma
    May 21, 2021 at 11:37
  • Which part do you need help with? To show different data tables or create products under opportunityv
    – anxiousAvocado
    May 21, 2021 at 13:13
  • @ShagunSharma in The above html code commented data table has to display when we navigate from opportunity page so that user can add products to opportunity related list
    – user97539
    May 21, 2021 at 17:26
  • @anxiousAvocado I have to display the data table with checkbox for each row when navigate from opportunity page, and that I need check the checkbox to add the products to opportunity related product list
    – user97539
    May 21, 2021 at 17:29
  • @user97539 is this component placed on Opportunity page? what do you mean when you say navigate from Opportunity page? When should this component be visilble? on which object?
    – anxiousAvocado
    May 21, 2021 at 17:31

1 Answer 1

Reset to default
0

Basically what you need here is to use @objectApiName

Add this to your component’s javascript

@api objectApiName;

This will give you the NAME of object your component is rendering in (object context)

You can also add @api recordId which will add the parent record Id of the LWC component.

Then in your JS use object name to change a boolean value which renders appropriate LWC table on UI

inProductObject = false; //initialize boolean with false always
If(this.objectApiName == ‘Product’){
    this.inProductObject = true;
} else {

    this.inProductObject = false;
}

HTML:

  <template if:true={inProductObject}>
        //anything you want to display when     LWC is in your product object
        <lightning-datatable>

        </lightning-datatable>
    </template>
    
    <template if:false={inProductObject}>

    //LWC is not in Product object, render anything for opportunity.
    </template>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .