Build Dynamic Sites with Lightning Web Runtime
Learning Objectives
After completing this unit, you’ll be able to:
- Describe Lightning web component capabilities.
- Describe how to use data binding in components.
- Style sites with LWR technology.
Work Smarter with Data Binding
LWR sites include specialized data binding functionality that allows you to dynamically pull content from your CMS or CRM apps into your site. Use any data binding Lightning web component–such as Banner, Text Block, or Video–to connect to content that exists in either Salesforce CMS or a Salesforce record. When you make the connection to that specific piece of content, you can then connect to specific fields.
Data Binding in Action
We want your content to be accessible, reusable, and intuitive to manage. Want to add an image from Salesforce CMS to your site page? No problem. Add the Image component to your page and select content directly from your CMS channel. The video below shows how to use data binding to connect CMS content to your components.
Want to link to a Salesforce object from your site? After creating an Object page, you can drag a component with data binding to your canvas and access all the fields on that object directly from the selector on your component. That functionality includes custom objects and custom fields. The video below shows how to use data binding to connect CRM data to your components
Understand Styling in Your Site
Theme layouts, page layouts, and styling options are more flexible than ever in LWR sites. Built using slots, theme and page layouts can be structured and defined in the way that best suits your use case. And by using --dxp styling hooks and declarative branding you can create detailed themes that can easily extend to components and pages across your site.
Build Your Site with Slots
Slots allow you to define sections on your custom pages where you can drag and drop components. By defining slots in your markup, you can create a section of the page that can be referenced by an F6 region, which is easier to navigate with a screen reader. With a simple @slot tag in your JavaScript, you can create a new section of the page and get to work filling it with components and style. LWR also provides flexible page styling options declaratively, so you can work with or without code.
Brand Your Site with --dxp Styling Hooks
From the Theme panel, create color palettes, text styles, button styles, and images with point-and-click tools. Once you’ve created the site of your dreams, map those properties to your components with --dxp styling hooks.
Unlike other styling hooks, such as Salesforce Lightning Design System (SLDS), --dxp styling hooks are reusable across your components. SLDS styling hooks provide granular control over styling by using CSS custom properties, which are variables within your CSS that cascade to all descendents within the scope of a selector. This system can be cumbersome to update if you have hundreds of unique hooks across your sites. --dxp solves this problem by providing a reduced set of custom properties that map to the lower-level component styling hooks. So you can set a single hook that affects many individual components and brand an entire site with less effort.
For example, let’s say you want to add a background color to your site and reuse it over a few pages. The --dxp-g-root styling hook maps to the background color selector in the Theme panel.
You can choose a color using the Background Color selector, or enter the rgb color code. Want to add that color to your custom component? Reference the --dxp-g-root in your markup and you’re off to the races. Want to change that color later after you’ve already created several components? No problem. Change it in the Theme panel and the color updates wherever you’ve referenced the styling hook.
LWR makes it possible to create whatever site you need. With ultimate flexibility, efficiency, and configurability, LWR is the way of the future that brings in all the best parts of the past.