1

On my Parent Lightning Element I have a data table where on Row Selection I want to open a custom Record Page in a Lightning Modal. I am struggling to extract the Id I am passing in the options array. I have placed the array in the Modal HTML to confirm it is outputting correctly. However when I use the following code to return the first element in the array I receive an Error (at bottom)

werRecordId = this.options[0];

Parent JS

handleRowSelection(event) {
        this.werSelectedRowId = event.detail.selectedRows[0].Id;
        MyModal.open({
        options: [
            this.werSelectedRowId,
        ]
        }).then((result) => {
            console.log(result);
        });
    }

Modal JS

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {
  @api options;
 
  werRecordId = this.options[0];
  //werRecordId = 'a08030000014jjaAAA';

  handleOptionClick(e) {
    const { target } = e;
    const { id } = target.dataset;
    this.close(id);
  }
}

Modal HTML

<template>
 <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
 <lightning-modal-body>
  {options}
  <c-work-experience-record-page 
   record-id={werRecordId} 
   ondisablerowselect={hanldeDisableRowSelect}
   onenablerowselect={hanldeEnableRowSelect}
  ></c-work-experience-record-page>
 </lightning-modal-body>

 <lightning-modal-footer>
  <lightning-button label="OK" onclick={handleOkay}></lightning-button>
 </lightning-modal-footer>
</template>

Error

[NoErrorObjectAvailable] Script error.
a()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:1000:112
{anonymous}()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:1000:305
dispatchEvent()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:13:46387
Na.dispatchEvent()@https://static.lightning.force.com/cs196/auraFW/javascript/nv49ahbZfs85wzJXOZaywA/aura_prod.js:13:13839
Na.fireSelectedRowsChange()@https://falcon-pe--dxtest.sandbox.lightning.force.com/components/lightning/datatable.js:1:95086
Na.zn()@https://falcon-pe--dxtest.sandbox.lightning.force.com/components/lightning/datatable.js:1:49259
Na.handleSelectionCellClick()@https://falcon-pe--dxtest.sandbox.lightning.force.com/components/lightning/datatable.js:1:93785

1 Answer 1

1

You can't use @api properties before the constructor has finished, because those properties haven't been initialized yet. Further, your code would be unresponsive to any changes made to the object later. Arguably, the easiest solution is to use a getter:

get werRecordId() {
  return this.options[0];
}

Getters are called later in the life cycle, and so can access @api properties correctly. You can also use the connectedCallback lifecycle hook:

connectedCallback() {
  this.werRecordId = this.options[0];
}

As @api properties are set before this method is called. However, if the loading of that data is asynchronous, this may fail.

You can also use an @api get/set configuration:

werRecordId;
#options; // private variable
@api set options(value) {
  this.#options = value;
  this.werRecordId = value && value[0];
}
// Note: Decorate get or set, not both
get options() {
  return this.#options;
}
1
  • once again thanks for the info and the education Commented Nov 5, 2022 at 14:13

You must log in to answer this question.

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