Flexible Lightning Web Components for both Lightning Experience and Experience Cloud

In this session I will share a recent use case for a custom LWC based interface which gives users a responsive, attractive and easy to use form entry tool.  This tool needed to work well in both the standard Lightning Experience for staff as well as for volunteers on an Experience Cloud Site, though with changes in functionality and permissions, based on the context.

At the core we have a flexible set of LWCs that display a series of typed inputs. Users are reviewing materials and entering feedback into these LWC based forms. The components are dynamic, displaying inputs and ordering based on changeable underlying data from Salesforce and with slightly different presentations based on the context. Entries are auto-saved as users work.

There is a complex underlying data model, so we have created an Apex domain layer with encapsulation classes that fetch and structure data to make it easily consumable for our LWCs.  There is a core virtual encapsulation class that is extended for use by different contexts.

I will share some interesting patterns on the Apex side for translating complex data models into structures that are more easily consumable in the front end.  On the LWC side I'll show some of the advantages in building encapsulated, reusable components, as well as some really useful patterns for managing data flow between components, validating data entry, creating an auto-save pattern and using async/await for data flow with Apex.