Hi All!

The LWC I've created lives on the Opportunity record page - and I want the LWC to pull all of the related records from an object titled, 'Junction - Opportunity/Competitor'. Right now, I am only able to hard code the recordid that the component pulls from. 

I am trying to get my LWC (a lightning-datatable) to pull in the recordid automatically so that the component shows information relevant to the record you're viewing.



relatedlist_competitor.cls

public with sharing class relatedlist_competitor {
    @AuraEnabled(cacheable = true)
public static List<Junction_Competitor_Opportunity__c> fetchCompetitor (String Opportunityid){
       return [SELECT Id,Competitor_Name_for_Flow__c,Bullet_1__c,Bullet_2__c,Opportunity__c FROM Junction_Competitor_Opportunity__c WHERE Opportunity__c = :Opportunityid];
    }
}

relatedlist_competitor.html

<template>

        <!--lightning datatable-->
         <lightning-datatable 
               key-field="id"
               data={parameters.data}
               onrowaction={handleRowAction}
               row-number-offset={rowOffset}
               hide-checkbox-column="true"
               columns={columns}></lightning-datatable>
                  
           <!-- Detail view modal start -->
         <template if:true={bShowModal}>
          <section role="dialog" tabindex="-1"
                   aria-labelledby="modal-heading-01"
                   aria-modal="true"
                   aria-describedby="modal-content-id-1"
                  class="slds-modal slds-fade-in-open">
             <div class="slds-modal__container">
                <!-- modal header start -->
                <header class="slds-modal__header">
                   <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                      <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                   </button>
                   <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
                </header>
                <!-- modal body start -->
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                  <dl class="slds-list_horizontal slds-wrap">
                      <dt class="slds-item_label" title="Name">Competitor Name</dt>
                      <dd class="slds-item_detail">{record.Competitor_Name_for_Flow__c}</dd>
                  </dl>
                </div>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
                     <dl class="slds-list_horizontal slds-wrap">
                         <dt class="slds-item_label" title="Name">Bullet 1</dt>
                         <dd class="slds-item_detail">{record.Bullet_1__c}</dd>
                     </dl>
                   </div>
                   <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-3">
                        <dl class="slds-list_horizontal slds-wrap">
                            <dt class="slds-item_label" title="Name">Bullet 2</dt>
                            <dd class="slds-item_detail">{record.Bullet_2__c}</dd>
                        </dl>
                      </div>
                <!-- modal footer start-->
                <footer class="slds-modal__footer">
                     <lightning-button variant="brand"
                     label="Close"
                     title="Close"
                     onclick={closeModal}
                     ></lightning-button>
                </footer>
             </div>
          </section>
          <div class="slds-backdrop slds-backdrop_open"></div>
       </template>
       <!-- Detail view modal end -->
  
      </template>

relatedlist_competitor.js

import {
    LightningElement,
    wire,
    api,
    track,
} from 'lwc';
 
//import method from the Apex Class
import fetchCompetitor from '@salesforce/apex/relatedlist_competitor.fetchCompetitor';
 
// Declaring the columns in the datatable
const columns = [{
        label: '',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'utility:picklist_type',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        label: 'Competitor',
        fieldName: 'Competitor_Name_for_Flow__c'
    },
];
 
// declare class to expose the component
export default class DataTableComponent extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track bShowModal = false;
    @api recordid;
    @wire(fetchCompetitor, {Opportunityid:"00629000008UIbbAAG"}) parameters;
 
    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }
 
    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }
}

relatedlist_competitor.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="dataTableComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <!-- With following targets make component available for lightning app page, record page and home page in salesforce --><targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

Hi All!

The LWC I've created lives on the Opportunity record page - and I want the LWC to pull all of the related records from an object titled, 'Junction - Opportunity/Competitor'. Right now, I am only able to hard code the recordid that the component pulls from. 

I am trying to get my LWC (a lightning-datatable) to pull in the recordid automatically so that the component shows information relevant to the record you're viewing.



relatedlist_competitor.cls

public with sharing class relatedlist_competitor {
    @AuraEnabled(cacheable = true)
public static List<Junction_Competitor_Opportunity__c> fetchCompetitor (String Opportunityid){
       return [SELECT Id,Competitor_Name_for_Flow__c,Bullet_1__c,Bullet_2__c,Opportunity__c FROM Junction_Competitor_Opportunity__c WHERE Opportunity__c = :Opportunityid];
    }
}

relatedlist_competitor.html

<template>

        <!--lightning datatable-->
         <lightning-datatable 
               key-field="id"
               data={parameters.data}
               onrowaction={handleRowAction}
               row-number-offset={rowOffset}
               hide-checkbox-column="true"
               columns={columns}></lightning-datatable>
                  
           <!-- Detail view modal start -->
         <template if:true={bShowModal}>
          <section role="dialog" tabindex="-1"
                   aria-labelledby="modal-heading-01"
                   aria-modal="true"
                   aria-describedby="modal-content-id-1"
                  class="slds-modal slds-fade-in-open">
             <div class="slds-modal__container">
                <!-- modal header start -->
                <header class="slds-modal__header">
                   <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
                      <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small" ></lightning-icon>
                   </button>
                   <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Record Detail</h2>
                </header>
                <!-- modal body start -->
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                  <dl class="slds-list_horizontal slds-wrap">
                      <dt class="slds-item_label" title="Name">Competitor Name</dt>
                      <dd class="slds-item_detail">{record.Competitor_Name_for_Flow__c}</dd>
                  </dl>
                </div>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-2">
                     <dl class="slds-list_horizontal slds-wrap">
                         <dt class="slds-item_label" title="Name">Bullet 1</dt>
                         <dd class="slds-item_detail">{record.Bullet_1__c}</dd>
                     </dl>
                   </div>
                   <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-3">
                        <dl class="slds-list_horizontal slds-wrap">
                            <dt class="slds-item_label" title="Name">Bullet 2</dt>
                            <dd class="slds-item_detail">{record.Bullet_2__c}</dd>
                        </dl>
                      </div>
                <!-- modal footer start-->
                <footer class="slds-modal__footer">
                     <lightning-button variant="brand"
                     label="Close"
                     title="Close"
                     onclick={closeModal}
                     ></lightning-button>
                </footer>
             </div>
          </section>
          <div class="slds-backdrop slds-backdrop_open"></div>
       </template>
       <!-- Detail view modal end -->
  
      </template>

relatedlist_competitor.js

import {
    LightningElement,
    wire,
    api,
    track,
} from 'lwc';
 
//import method from the Apex Class
import fetchCompetitor from '@salesforce/apex/relatedlist_competitor.fetchCompetitor';
 
// Declaring the columns in the datatable
const columns = [{
        label: '',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'utility:picklist_type',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        label: 'Competitor',
        fieldName: 'Competitor_Name_for_Flow__c'
    },
];
 
// declare class to expose the component
export default class DataTableComponent extends LightningElement {
    @track columns = columns;
    @track record = {};
    @track rowOffset = 0;
    @track data = {};
    @track bShowModal = false;
    @api recordid;
    @wire(fetchCompetitor, {Opportunityid:"00629000008UIbbAAG"}) parameters;
 
    // Row Action event to show the details of the record
    handleRowAction(event) {
        const row = event.detail.row;
        this.record = row;
        this.bShowModal = true; // display modal window
    }
 
    // to close modal window set 'bShowModal' tarck value as false
    closeModal() {
        this.bShowModal = false;
    }
}

relatedlist_competitor.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="dataTableComponent">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <!-- With following targets make component available for lightning app page, record page and home page in salesforce --><targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

 

https://trailhead.salesforce.com/en/content/learn/projects/develop-account-geolocation-app-with-aura-components/develop-account-geo-app-create-account-map-component

I'm just working on this, and it all looks good until you start typing in the search box.


Code for AccountMapController.js
({
    onAccountsLoaded: function( component, event, helper ) {
        var mapMarkers = [];
        var accounts = event.getParam( 'accounts' );
        for ( var i = 0; i < accounts.length; i++ ) {
            var account = accounts[i];
            var marker = {
                'location': {
                    'Street': account.BillingStreet,
                    'City': account.BillingCity,
                    'PostalCode': account.BillingPostalCode
                },
                'title': account.Name,
                'description': (
                    'Phone: ' + account.Phone +
                    '<br/>' +
                    'Website: ' + account.Website
                ),
                'icon': 'standard:location'
            };
            mapMarkers.push( marker );
        }
        component.set( 'v.mapMarkers', mapMarkers );
    }
})