Lightning Web Components - astromechanic/cheat_sheets GitHub Wiki

Some theory

  • Aura components can contain Lightning web components (but not vice versa!)

How to access data properties:


<lightning-button data-factor='2' onclick={handleFactor}></lightning-button>

handleFactor(event) {
    const factor = event.target.dataset.factor;
}

Send data with new CustomEvent - use object in the second parameter

new CustomEvent('eventname', {detail: {some data object}, bubbles: true})

xml config

<targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__FlowScreen</target>
</targets>

<targetConfigs>
        <targetConfig targets="lightning__FlowScreen">
            <property name="cartId" type="String"  /> 
        </targetConfig>
    
</targetConfigs>

Integrate visualforce page into LWC

Why: for example, integrate 3rd-party script into LWC

LWC:

<template>
    <iframe src={url} width="100%" title="Page title" style="border:none;" onload={adjustContent} class="my-class">
</iframe>
</template>

LWC js

import { LightningElement } from 'lwc';
import basePath from "@salesforce/community/basePath";

export default class MyClass extends LightningElement {
  get url() {
    const sitePrefix = basePath.replace(/\/s$/i, ""); 
    return sitePrefix + "/vfpage";
  } 

  adjustContent() {
    let iframe = this.template.querySelector('.my-class');
    if (iframe !== undefined) {
      iframe.height = iframe.contentDocument.body.scrollHeight + "px";
    }
  }
}

Visualforce page (don't forget to make it available for Experience cloud sites: true): vfpage.page

<apex:page showChat="false" showHeader="false" cache="false" contentType="text/html" label="My Visualforce Page">
    your content here
</apex:page>
⚠️ **GitHub.com Fallback** ⚠️