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>```
10
  • Could you please elaborate more, where did you keep your LWC ? Commented May 21, 2021 at 11:37
  • Which part do you need help with? To show different data tables or create products under opportunityv Commented 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
    Commented 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
    Commented 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? Commented May 21, 2021 at 17:31

1 Answer 1

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>

You must log in to answer this question.

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