1

I am receiving the following error recordId is not defined when simply trying to display the record id on the page (for debugging). What I want to do is append the id of the record page to a string as seen below.

I also tried with {$recordId} but that did not work. Any suggestions?

HTML:

<template>
 <lightning-card  title="App" icon-name="custom:custom59">
    <div class="slds-m-around_medium">
        <iframe width="800" height={hight} src={fullUrl}> </iframe>
    </div>    
 </lightning-card>
</template>

JS:

import { LightningElement, api } from 'lwc';

export default class App extends LightningElement {
  @api recordId;
  @api height;
  url = 'http://example.com/'+{recordId};

  get fullUrl() {
    alert("id is: " + {recordId});
    return this.url;
  }
}

MetaData

<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>App</masterLabel>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage, lightning__HomePage">
        <property name="height" type="Integer" default="50" label="Enter the height of Iframe"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>
2
  1. You can not use expression while defining the property, use connectedCallback to set the default values.
  2. inside the function do not use {property}, use this.property instead.

See the corrected code below.

url;

connectedCallback(){
    this.url = 'http://example.com/' + this.recordId;
}

get fullUrl() {
    alert("id is: " + this.recordId);
    return this.url;
}

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.