0

Im attempting to get the recordid from my lighting web component into my apex controller for sorting. Writing a component to display related tasks on the lighting page layout.

Would someone mind helping me with this?

Thanks

Apex Controller

public with sharing class dataTableLWC {
    @AuraEnabled(cacheable = true)
public static List<Task> fetchTasks(String taskId){

        return [SELECT Id,Subject,ActivityDate FROM TASK WHERE whatid = :taskId];

    }
}

LWC - JS

import {
    LightningElement,
    wire,
    track,
    api
} from 'lwc';

//import method from the Apex Class
import fetchTasks from '@salesforce/apex/dataTableLWC.fetchTasks';

// Declaring the columns in the datatable
const columns = [{
        label: 'View',
        type: 'button-icon',
        initialWidth: 75,
        typeAttributes: {
            iconName: 'action:preview',
            title: 'Preview',
            variant: 'border-filled',
            alternativeText: 'View'
        }
    },
    {
        label: 'Subject',
        fieldName: 'Subject'
    },
    {
        label: 'Due Date',
        fieldName: 'ActivityDate'
    }
];

// 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;
    @wire(fetchTasks) parameters;
    @api recordId;

    // 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;
    }
}

LWC - HTML

       <!-- 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 slds-truncate" title="Subject">Subject:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.Subject}</dd>
                  <dt class="slds-item_label slds-truncate" title="DueDate">Due Date:</dt>
                  <dd class="slds-item_detail slds-truncate">{record.ActivityDate}</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>
1

You have a line that says

@wire(fetchTasks) parameters;

You need to do more than that. Have a look at the "Wire an Apex Method with a Dynamic Parameter" example in the LWC docs

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.apex

In their example they're using a phrase 'searchKey' that the user types in, whereas you're going to be using the recordId that is automatically injected into your @api recordID property as long as you're on a record detail page.

You need to make sure your configuration file enables you to put the component on a record detail lightning app page by adding the lightning__RecordPage target in your configuration file for the component.

<targets>
    <target>lightning__RecordPage</target>
</targets>

Specifically here's their Apex class example

ContactController.cls

public with sharing class ContactController {
        @AuraEnabled(cacheable=true)
        public static List<Contact> findContacts(String searchKey) {
            String key = '%' + searchKey + '%';
            return [SELECT Id, Name, Title, Phone, Email, Picture__c FROM Contact WHERE Name LIKE :key AND Picture__c != null LIMIT 10];
        }
    }

As well as their JS example

apexWireMethodWithParams.js

import { LightningElement, track, wire } from 'lwc';
import findContacts from '@salesforce/apex/ContactController.findContacts';

/** The delay used when debouncing event handlers before invoking Apex. */
const DELAY = 300;

export default class ApexWireMethodWithParams extends LightningElement {
    @track searchKey = '';

    @wire(findContacts, { searchKey: '$searchKey' })
    contacts;

    handleKeyChange(event) {
        // Debouncing this method: Do not update the reactive property as long as this function is
        // being called within a delay of DELAY. This is to avoid a very large number of Apex method calls.
        window.clearTimeout(this.delayTimeout);
        const searchKey = event.target.value;
        this.delayTimeout = setTimeout(() => {
            this.searchKey = searchKey;
        }, DELAY);
    }
}

And here is their HTML template

apexWireMethodWithParams.html

<template>
    <lightning-card title="ApexWireMethodWithParams" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search" value={searchKey}></lightning-input>
            <template if:true={contacts.data}>
                <template for:each={contacts.data} for:item="contact">
                    <p key={contact.Id}>{contact.Name}</p>
                </template>
            </template>
            <template if:true={contacts.error}>
                <c-error-panel errors={contacts.error}></c-error-panel>
            </template>
        </div>
    </lightning-card>
</template>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.