Using LWR to Build Custom Pages in Salesforce

Lightning Web Runtime (LWR) is a special feature of the Salesforce Lightning platform that allows developers to create custom pages using web technologies such as HTML, CSS, and JavaScript. This allows developers to create highly-customizable pages that can be embedded directly within the Salesforce interface, providing a seamless experience for users.

Basic Concepts

Before diving into the details of Salesforce LWR, let’s go over some basic concepts that will be used throughout this post.

Lightning Web Components

The Lightning Web Components (LWC) framework is a modern JavaScript framework for building web components on the Salesforce platform. LWC provides a set of web components that can be used to build custom pages in Salesforce.

Lightning Web Runtime

The Lightning Web Runtime (LWR) is a special feature of the Salesforce Lightning platform that allows developers to create custom pages using web technologies such as HTML, CSS, and JavaScript. LWR provides a secure and performant way to embed web pages directly within the Salesforce interface, providing a seamless experience for users.

Creating a Custom Page using LWR

To create a custom page using LWR, you need to first create a new Lightning Web Component (LWC). Once you have created your LWC, you can use the lightning-container component to embed your web page within the Salesforce interface.

Step 1: Create a new LWC

To create a new LWC, you can use the Salesforce CLI to generate a new LWC project. Once you have created your project, you can add your custom code to the lwc folder.

sfdx force:lightning:component:create –type lwc –componentname mypage

Step 2: Add your Web Page to the LWC

Once you have created your LWC, you can add your web page to the lwc folder. Your web page should be a standard HTML file with a .html extension.

Step 3: Embed your Web Page using the `lightning-container` component

To embed your web page within the Salesforce interface, you can use the lightning-container component. This component allows you to specify the URL of your web page, as well as any additional options such as the size of the container.

<template>
  <lightning-container src="{url}"></lightning-container>
</template>

In the above example, the src attribute of the lightning-container component should be set to the URL of your web page.

An example of how you can use the lightning-container component to display a custom web page within a Salesforce record page:

<template>
    <lightning-card title="My Custom Page">
        <lightning-container src={customPageUrl}>
        </lightning-container>
    </lightning-card>
</template>

In this example, we have a lightning-card component that serves as a container for our custom page. Inside the card, we have the lightning-container component which is where we specify the URL of our custom page using the src attribute.

You can also pass parameters to your custom page by using the iframe attributes such as allow and sandbox, these attributes are used to control the behavior of the iframe. For example, you can use the allow attribute to specify which features your custom page is allowed to use, such as microphone or camera access.

<template>
    <lightning-card title="My Custom Page">
        <lightning-container src={customPageUrl} 
                            allow="microphone; camera">
        </lightning-container>
    </lightning-card>
</template>

Additionally, you can also use JavaScript to interact with your custom page. To do this, you can use the contentWindow property of the lightning-container component to access the window object of the embedded page.

<template>
    <lightning-card title="My Custom Page">
        <lightning-container src={customPageUrl}
                            onload={handleLoad}>
        </lightning-container>
    </lightning-card>
</template>

<script>
    export default class MyPage extends LightningElement {
        handleLoad(event) {
            const iframe = event.target;
            const iframeWindow = iframe.contentWindow;
            iframeWindow.postMessage('Hello World!', '*');
        }
    }
</script>

In this example, we have a handleLoad function that is called when the lightning-container has finished loading. In this function, we use the contentWindow property to access the window object of the embedded page, and then use the postMessage method to send a message to the page.

Keep in mind that you’ll need to make sure that the webpage you want to embed is hosted on a server that has a valid SSL certificate, and that the webpage also accepts and processes the message sent by the postMessage method.

Conclusion

In this blog post, we’ve gone over the basics of Salesforce LWR, and how you can use it to create custom pages within the Salesforce interface. LWR provides a powerful and flexible way to build custom pages using web technologies such as HTML, CSS, and JavaScript. With LWR, you can create highly-customizable pages that provide a seamless experience for your users.