function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Steve Cox 18Steve Cox 18 

parameter not parsing in simple lightning web component

Hi,
I'm trying to write a simple lightning web component to pass an opportunity record Id to the URL of an iframe - but the {recordId} parameter is not parsing to the value.

The js for the component is:
  
import { LightningElement, api } from 'lwc';

export default class OppCNPowerApp extends LightningElement {
	@api recordId;
}

The js-meta.xml is: 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <objects>
              <object>Opportunity</object>
          </objects>
      </targetConfig>
  </targetConfigs>
  </LightningComponentBundle>

and the test html is:
  
<template>
	<lightning-card>
		<p>{recordId}</p>
		<div style="width:100%">
			<iframe height="540px" width="100%" frameborder="0" 
                                 src="https://test.com?OppID={recordId}">
			</iframe>
		</div>
	</lightning-card>
</template>
(I've altered the actual source URL for simplicity) 

When i add the component to a lightning page for an opportunity, the part of the HTML template:
  
<p>{recordId}</p>
renders fine - it displays the correct record ID. However, the iframe code does not parse the id. In the source, it remains: 
<iframe height="540px" width="100%" frameborder="0" src="https://test.com?OppID={recordId}"></iframe>

I've been hacking around to find the solution but with no luck - it's to do with the quotes of the src element - but I've no idea how to have it parse it as expected. Any suggestions?

Thanks 
 
Best Answer chosen by Steve Cox 18
mukesh guptamukesh gupta
Hi Steve,

you need to pass full url parameter from JS file

Like:-

JS:

urlParam;

urlParam = "https://test.com?OppID="+this.recordId;

HTML:-


<iframe height="540px" width="100%" frameborder="0" src="{urlParam}"></iframe>


or can  follow below url:

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

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 

All Answers

mukesh guptamukesh gupta
Hi Steve,

you need to pass full url parameter from JS file

Like:-

JS:

urlParam;

urlParam = "https://test.com?OppID="+this.recordId;

HTML:-


<iframe height="540px" width="100%" frameborder="0" src="{urlParam}"></iframe>


or can  follow below url:

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

if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh 
This was selected as the best answer
Steve Cox 18Steve Cox 18
Thanks, yes, that worked. In the end I went with a 'getter' too (https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.js_props_getter):
  
import { LightningElement, api } from 'lwc';

export default class OppCNPowerApp extends LightningElement {
	@api recordId;
	url = "https://test.com?OppID=";

	get iframeSrc() {
		return`${this.url}${this.recordId}`;
	}
}

So the html was then: 
<iframe height="540px" width="100%" frameborder="0" 
     src={iframeSrc}>
</iframe>
with no quote marks.