Blog

Limitations of LWC in VF sites & Alternate Solution

In the VF sites, you can only use the “$Lightning.use” and “$Lightning.createComponent” functions once to make the LWC.

  • The methods “$Lightning.use” and “$Lightning.createComponent” can only be used once in a VF page to create a LWC.
  • Create a new LWC component instead of using “$Lightning.createComponent,” and send the child LWC’s parameters from the parent LWC.

The Lightning Record Edit Form tags that are used on VF sites cannot be used on the LWC.

  • On the VF sites, Record Edit Form and accompanying tags cannot be utilised in LWC.
  • Example: If we need to look for contacts and provide that information to the form. In order to accomplish this, query every contact on page load, present them in a list, and use custom searching capability.
  • For example, if we need to create a new account record, we can design a custom form structure with lightning inputs and then use the Apex controller to insert the information.

The LWC that is utilised on the VF sites does not support standard Toast messages.

  • While using it on the VF sites, standard Toast messages are not supported on the LWC.
  • To display the message’s content, make a unique model box and close it inside the if:true={variable}> section of the template.
  • Create a settime out method in the JS and set the boolean variable’s value to false if the model box is intended to act similarly to the dismissable toast.

Direct insertion of standard records, such as case object records, is not possible on VF sites.

  • Through apex or LWC, we are unable to directly insert the case record. Assign the owner of the group to the case because it is a public class.
  • Don’t pass every value as a parameter to the apex controller when inserting the record. and put that there.
  • Instead, construct an object structure in JS, stringify it, then feed the result to the Apex controller, where it will be deserialized and inserted.

Lightning Schema to Get records cannot be used on the VF Sites.

  • While the LWC is located in the VF sites, Lightning Schema cannot be utilised on the LWC, due to the absence of a record id on the URL of the public site. Get the value from the Apex controller.

It is possible to pass a parameter from the VF page to the LWC, but not the other way around.

  • It is possible to transmit parameters from the VF page to the LWC (parent to child).
  • Once more, parameters cannot be transferred from the LWC to the VF page, thus the solution is appropriately presented in the business case plan.

The iframe cannot be used more than once when testing an external JS component via an iframe (such as a chatbot on VF sites).

  • It is not permitted to preview an external JS component via an iframe more than once, such as a chatbot on VF sites.
  • The first iframe’s session will remain active in the browser tab.
  • which prevents the creation of a session for an iframe record.
  • If the user views the first iframe, then close the iframe using the code: template if:true=variable>.

On the LWC of the VF Sites, external JS code cannot be used directly.

  • The LWC cannot be utilised directly with external JS code.
  • To avoid the Cross Origin issue, load the script on the staticresource and call the script on the renderedcallback function.

Avoid sending data to the LWC component using the Wrapper class

  • Avoid using the @AuraEnabled Wrapper class on the LWC while utilising it on the VFSites
  • As a result of some of the sensitive data utilised on the wrapper class being displayed on the network settings while the browser is being examined.
  • Prevent the LWC controller from using the wrapper class.

Send the record to be created as an Object structure.

  • Always generate the desired Salesforce record in JS as an object, stringify it, then provide it as a parameter to the apex controller where it will be deserialized and inserted.