lwr-outlet

An outlet dynamically renders view components, which display when an application navigates to a location.

Properties

Property	Type	Required/Optional	Description
`view-name`	String	Optional	The key of the `ViewSet` entry to display. The default value is `default`.
`refocus-off`	Boolean	Optional	Refocusing is on by default for accessibility. If `refocus-off` is present, the outlet doesn’t put the browser focus on the view component when it loads.

Events

An outlet component fires these events:

onviewchange
- A handler for the viewchange event that is dispatched whenever the view component changes. event.detail is the view component class.

1type Constructor<T = object> = new (...args: any[]) => T;
2interface Constructable<T = object> {
3    constructor: Constructor<T>
4}
5interface ViewChangePayload {
6    detail: Constructable;
7}

onviewerror
- A handler for the viewerror event that is dispatched whenever the view component cannot be rendered. event.detail is the error and stack.

1interface ViewErrorPayload {
2  detail: {
3    error: Error,
4    stack: string,
5  };
6}

Usage

An outlet dynamically renders view components. The lwr-outlet Lightning web component displays the current view component in the DOM.

This process is naturally lazy. The view isn’t imported until the outlet consumes it, so any unused views aren’t fetched. When the router’s view state changes, the outlet is flagged to display the vivew. At that point, if the view module hasn’t been fetched already, there may be an async process to retrieve it.

1<template>
2    <lwr-router-container>
3        <lwr-outlet refocus-off onviewchange={onViewChange} onviewerror={onViewError}>
4            <div slot="error">View component cannot display</div>
5        </lwr-outlet>
6    </lwr-router-container>
7</template>

It’s possible for a route definition handler to return multiple views, like this:

1import type { Module, RouteHandlerCallback } from "lwr/router";
2
3export default class HomeHandler {
4  callback: RouteHandlerCallback;
5
6  constructor(callback: RouteHandlerCallback) {
7    this.callback = callback;
8  }
9
10  dispose(): void {}
11
12  update(): void {
13    this.callback({
14      viewset: {
15        // return multiple views
16        default: (): Promise<Module> => import("my/home"),
17        nav: (): Promise<Module> => import("my/homeNav"),
18        footer: (): Promise<Module> => import("my/homeInfo"),
19      },
20    });
21  }
22}

You can use multiple outlets to display all the current view components by setting different view-name values.

1<template>
2    <lwr-router-container>
3        <lwr-outlet view-name="nav"></lwr-outlet>
4        <lwr-outlet><!-- default view --></lwr-outlet>
5        <lwr-outlet view-name="footer"></lwr-outlet>
6    </lwr-router-container>
7</template>

Developer Preview Feature

Feature is available as a developer preview. Feature is not generally available unless or until Salesforce announces its general availability in documentation or in press releases or public statements. All commands, parameters, and other features are subject to change or deprecation at any time, with or without notice. Do not implement functionality developed with these commands or tools.

DID THIS ARTICLE SOLVE YOUR ISSUE?
Let us know so we can improve!