megasmack

LWC Dependent Pick List Example

An example of working with Salesforce Dependant Picklists in LWC using the uiObjectInfoApi. The juicy bit is in the method setDependentPicklist on line 61 of countrySateSelector.js.

megasmack

Remove orphans from text string

Take the last word of text string and replace the space before it with a non-breaking space.

megasmack

LWC Focus-Trapping Modal

Using SLDS classes, build a modal Lightning Web Component that has focus-trapping for accessiblity.

Notes

• The shadowdom presents some challenges with creating focus-trapping within modals. Making creating a reusable component tricky. So instead we can create a modal utility file with all our methods to keep things as DRY as possible.
• This was created before the Lightning Modal component was created. The "out of the box" Lightning Modal contains focus trapping, so I'd recommend using that over this implmentation. However, you can still use code for "modal-like" custom elements that may require focus trapping. For example, a slide out navigation that covers the page content could be considered a modal and should therefore have focus-trapping when open.

megasmack

LWC/Apex User Debug Mode Console Logs

Using the Debug Mode setting in the running User to send debug console logs to the Inspector for Lightning Web Components.

If you need to override the debug behavior, you can change the userDebugMode sessionStorage property to 'true'. You might need to do this to get logs for Guest users that do not have a Debug Mode.

megasmack

const stdTimezoneOffset = (date) => {
    const jan = new Date(date.getFullYear(), 0, 1);
    const jul = new Date(date.getFullYear(), 6, 1);
    return Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset());
};

const isDstObserved = (date) => date.getTimezoneOffset() < stdTimezoneOffset(date);

const offset = start.getTimezoneOffset();
const start = new Date(start.getTime() - (offset*60*1000));

megasmack

import { LightningElement } from 'lwc';

export default class BrowserNotificationsExample extends LightningElement {

    connectedCallback() {
        this.initPushNotifications();
    }

    // Modified from: https://levelup.gitconnected.com/creating-browser-notification-in-javascript-79e91bfb76c8
    initPushNotifications() {

megasmack

Salesforce VSCode LWC Snippets

Some handy VSCode snippets I've found helpful for LWC development in Salesforce.

megasmack

SEO and Social Media Meta Tag Setup for Experience Cloud Sites

About Meta Tags

Meta Tags are HTML tags hidden within the header of a web page. These tags contain information about your page. For example: a title, a brief description, and images.

When a social media channel receives a URL, behind the scenes it goes to this URL to try and gather information about this page. While most channels do their best to figure out what title or image to display from the page itself, we can be more explicit by setting up meta tags. If these meta tags are present, the channel will use them first.

Setting up Meta Tags in Salesforce Communities

megasmack

/**
 * Wraps the startViewTransition to check avialability and reduced motion settings.
 * Usage: await viewTransition(() => {this.showElement = true});
 * @param {Function} callback - callback to function that triggers the animation.
 * @returns {Promise<unknown>} - Finish transition.
 */
export const viewTransition = (callback) => {
  return new Promise((resolve) => {
    const mediaQuery = window.matchMedia('(prefers-reduced-motion)');
    const isReducedMotion = mediaQuery.matches;