Skip to content

Component Library Overview

James Hou edited this page Jan 31, 2021 · 4 revisions

In this library, the naming conventions are as follows:

  • PascalCase for Aura Components
  • camelCase for Lightning Web Components

Below is a high level overview of the top level components in the repo:

Component Name Description Component Type
messageService

Example
Code
Use one API to communicate within or across both Aura and LWC technologies.

Use this component instead of manually publishing / subscribing to Lightning Message Service (LMS).

Provides a psuedo-namespacing property called boundary which can separate subscribers by string, recordId etc.
LWC:
- Service
DialogService

Example
Code
Provide LWCs access to lightning:overlayLibrary to create dialogs (modals) via LMS.

Both Aura and LWCs can be created dynamically and injected as the dialog body.

Both Aura's public attributes and LWC's @api properties can be passed in.
Aura:
- Service
MessageServiceHandler

Example
Code
Provides access to DialogService by handling the opendialog LMS event.

This is a hidden component you need to place on the flexipage or utility bar (hidden, empty label).
Aura:
- Service
- Utility Bar
- Record Flexipage
EventFooter

Code
Dynamic footer for lwc dialogs. Meant to be used by DialogService.

Contains an instance of messageService listening for the closedialog LMS Event.

Unfortunately, component.getReference() does not work on LWCs. Write your own action button in the dialog body.
Aura:
- Service
ModalFooter

Code
Dynamic footer for aura dialogs. Meant to be used by DialogService.

Connects a primary action on the target dialog body to the footer's main action via component.getReference()

Enables writing functions directly on the dialog body and DialogService.modal() will connect it to a primary action.
Aura:
- Service
FlowWrapper

Example
Code
Helps with dynamic flow creation, for example, inside a dialog body created from DialogService.

Can be used with dialogAutoCloser on the final screen to automatically close a Flow.

See flowWizardLauncherExample
Aura:
- Service
dialogAutoCloser

Example
Code
Contains a progress bar and timer message (optional).

Automatically publishes a closedialog LMS event and bubbles the same closedialog Custom Event when timer hits 0.
LWC:
- Service
- Flow Screen
EventPublisher

Example
Local Flow Action Code
Flow Screen Component Code
Publishes messageService keys on renderedCallback().

Useful for the refreshsoqldatatable and closedialog events when used with Custom Flow actions.
Aura:
- Flow Action

LWC:
- Flow Screen
soqlDatatable

Example
Code
A SOQL powered list view.

Meant to replace any related list / list view.

Supports record context, in-line editing, configurable table/row actions, output of selected rows to Flow (or other LWCs) and more.

See example for full features.
LWC:
- Service
- App Flexipage
- Record Flexipage
- Flow Screen
collectionDatatable

Example
Code
Display Record Collections inside Flow Screens.

Meant to mimic a related list / list view.

Can be populated from a Flow's Get Records or soqlDatatable.selectedRows output.
LWC:
- Flow Screen
Clone this wiki locally