Skip to content

soqlDatatable: Dynamic Creation

James Hou edited this page Jan 24, 2021 · 1 revision

Dynamically create a soqlDatatable when clicking the Launch a SOQL Datatable in a Dialog button from the recipes.

This is the psuedo-code of what happens:

button.js calls messageService.dialogService(payload)
    => button.js composed instance of messageService uses LMS to...
        => Another composed instance of messageService in MessageServiceHandler.cmp (label-less in utility bar)
            =>  CustomEvent opendialog is bubbled and handled in...
                => MessageServiceHandler.cmp component.finds()...
                    => DialogService.cmp
                        => DialogServiceController.js
                            => $A.createComponent('c:soqlDatatable')
                                => lightning:overlayLibrary

Here's the actual payload used in the above code flow:

handleOpenDialog() {
    const query = convertToSingleLineString`
        SELECT Title, Name, Email, Account.Name, Account.Type
        FROM Contact
        LIMIT 5
    `;
    const dialogServicePayload = {
        method: 'bodyModalLarge',
        config: {
            auraId: 'soql-datatable-example',
            headerLabel: 'Dynamically Created SOQL Datatable',
            component: 'c:soqlDatatable',
            componentParams: {
                isRecordBind: false,
                recordId: this.recordId,
                queryString: query
            }
        }
    };
    this._messageService.dialogService(dialogServicePayload);
}

As you can see, it's possible to parameterize a payload back to Aura's $A.createComponent API to instantiate a public properties against an LWC.

Clone this wiki locally