Lightning Web Components Interview Questions- Part 4

 

31. How can we get Current Experience Builder Site

We can Import information about the current Experience Builder site from the @salesforce/community scoped module.

import propertyName from '@salesforce/community/property';

• property—The supported properties are:
  • Id—The ID of the current site.
  • basePath—The base path is the section of the site’s URL that comes after the domain. So if your site domain name is newstechnologystuff.force.com and lwcdemo was the URL value added when you created the site, the community’s URL is newstechnologystuff.force.com/lwcdemo/s. In this case, lwcdemo/s is the base path.
• propertyName—A name that refers to the imported Experience Builder property.

// demoSite.js
import { LightningElement } from 'lwc';
import Id from '@salesforce/community/Id';

export default class CommunityPage extends LightningElement {
   
}

32. How we can access LWC in Lightning App Builder

We need to use Targets to define where we want to use LWC components. Below sample support for the Record page and the Home and App Page. Also set isExposed to true. We can also provide different properties on a different screens.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>51.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Demo Component</masterLabel>
  <description>This is a demo component from NewsTechnologyStuff.</description>
  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <property name="prop1" type="String" />
          <objects>
              <object>Account</object>
              <object>Contact</object>
              <object>CustomObject__c</object>
          </objects>
      </targetConfig>
      <targetConfig targets="lightning__AppPage, lightning__HomePage">
          <property name="prop2" type="Boolean" />
      </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

33. Share all the supported Target for LWC

Experience Builder

• To make your component usable in Experience Builder, set isExposed to true. Then, in targets, add one of these values as a target:
  • lightningCommunity__Page  Create a drag-and-drop component that appears in the Components panel
  • lightningCommunity__Page_Layout to create a page layout component for LWR sites that appears in the Content Layout window
  • lightningCommunity__Theme_Layout This will create a theme layout component for LWR sites that appears in Settings in the Theme area
• To include properties that are editable when the component is selected in Experience Builder, define lightningCommunity__Default in targets and define the properties in targetConfigs. Only properties defined for the lightningCommunity__Page or lightningCommunity__Page_Layout targets are editable in Experience Builder.

Utility Bar:

<target>lightning__UtilityBar</target>

Outlook and Gmail

<target>lightning__Inbox</target>

How to use LWC in Flow

<target>lightning__FlowScreen</target>

Lightning web Components Document link