LWC Component APIs

Created by Tom Ansley, Modified on Sat, Mar 15 at 3:50 PM by Tom Ansley

Code Examples

All event interactions with the <simpli_lv-simpli-u-i-list-views> component are performed through an API. Events are fired when the user interacts with the component. Events can also be sent to the component for processing. All event requests and notifications occur in a very similar pattern. The general HTML component looks like the following:

LWC HTML Page

<div>
    <simpli_lv-simpli-u-i-list-views mode="App Page"
                                     page-name="My Component"
                                     oneventresponse={handleEventResponse}
                                     use-message-channel=true>
    </simpli_lv-simpli-u-i-list-views>
</div>

Events are only available in Simpli List Views Enterprise.
The page name is required and used as an id if using events and multiple SLV components are on one page. Think of the page name as a component name. (see examples)
oneventresponse is the handle to any events fired by the component. In this example handleEventResponse() is the function which handles the response
It is important to set the use-message-channel property so that events are processed by the SLV component

LWC Controller

import { LightningElement, wire, track } from 'lwc';
export default class TestController extends LightningElement {

//--------------------------------------------------------------------
//USE THIS - use this method if there is a single SLV component on the
//           page to handle OUTGOING requests to the component
//--------------------------------------------------------------------
handleEventRequest() {
    const slv = this.template.querySelector('simpli_lv-simpli-u-i-list-views');
    let evt = { type: 'refreshData' };
    slv.eventRequest(evt);
}

//--------------------------------------------------------------------
//OR THIS - use this method if there are multiple SLV components on the page to
//          handle OUTGOING requests to the component
//--------------------------------------------------------------------
handleEventRequestWithMultipleComponents() {
    const slvs = this.template.querySelectorAll('simpli_lv-simpli-u-i-list-views');
    let slv = null;

    slvs.forEach(tmpslv => {
        if (tmpslv.uniqueComponentId.includes("My Component")) {
            slv = tmpslv;
        }
    });
    let evt = { type: 'refreshData' };
    slv.eventRequest(evt);
}

//-------------------------------------------------------
//used to handle INCOMING events fired from the component
//-------------------------------------------------------
handleEventResponse(event) {
    console.log('Event Response - ' + JSON.stringify(event.detail));
}

}

The handleEventRequest() method gets the component using a querySelector() assuming only one SLV component exists on the page.
The handleEventRequestWithMultipleComponents() method gets the component using a querySelectorAll() assuming multiple SLV components exist on the page.
The event request is then created. In this example we are setting the event type to "refreshData".
Any response to an event is handled by the handleEventResponse(event) method. All data for the event being fired is stored in the event.detail property.

Incoming Events

The following incoming events are fired on user interactions. In some cases data is returned in the response. This is noted in those cases.

rendering - fired when the component finishes rendering
standAloneRendering - fired when the component is in Stand Alone mode and the data finishes rendering
objectSelected - fired when an object is selected
listViewSelected - fired when a list view is selected
urlClicked - fired when a url is clicked. The URL is returned in the event response
processSingleListView - fired when a single list view is reprocessed
processObjectListViews - fired when an objects list views are reprocessed
processAllListViews - fired when all list views are reprocessed
dataSaved - fired when the user saves data

The following events are based on user interactions as well as event requests made to the component via code. The event response details for these events can be found in the corresponding event request API docs below.

refreshData
refreshActions
refreshObjects
refreshListViews
refreshOnce
autoRefreshOn
autoRefreshOff
downloadData
downloadSelectedData
pinListView
unpinListView
spinnerOn
spinnerOff
showAdmin
runAction

Incoming Event Handler Example Code

handleEventResponse(event) {
    let resp = event.detail;
    console.log('All Event Response Details - ' + JSON.stringify(resp));
    console.log('Event Response Status - ' + resp.status);
    console.log('Event Response Type - ' + resp.type);
    console.log('Event Response Count - ' + resp.count); //if the event deals with 
                       //a list. i.e. refreshData, downloadData, refreshObjects 
    console.log('Event Response Object - ' + resp.object);
    console.log('Event Response ListView - ' + resp.listView);
    console.log('Event Response URL - ' + resp.url); //if a URL was clicked
    console.log('Event Response Data - ' + resp.data); //if data was downloaded
}

Outgoing Event Requests

refreshData
refreshActions
refreshObjects
refreshListViews
refreshOnce
autoRefreshOn
autoRefreshOff
downloadData
downloadSelectedData
pinListView
unpinListView
spinnerOn
spinnerOff
showAdmin
runAction
updateSetting

refreshData

Request { type: 'refreshData' }

Response {type: "refreshData", status: "started"} - on starting refresh
{type: "refreshData", status: "finished", count: rowCount} - on finishing refresh

Event to refresh the data currently being displayed in the list view.
This request is fairly unique in that two events are fired by the component. Both a start and finish message

Examples

let evt = { type: 'refreshData' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

refreshActions

Request { type: 'refreshActions' }

Response {type: "refreshActions", status: "finished"}

Event to update the actions available in the action drop down.
Typically the actions are refreshed after a data refresh.

Examples

let evt = { type: 'refreshActions' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

refreshObjects

Request { type: 'refreshObjects' }

Response {type: "refreshObjects", status: "finished", count: objectCount }

Event to update the objects available in the objects drop down

Examples

let evt = { type: 'refreshObjects' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

refreshListViews

Request { type: 'refreshListViews' }

Response {type: "refreshListViews", status: "finished", count: listViewCount, object:

objectName}

Event to update the list views in the list view drop down
The event request uses the selected object to determine the retrieved list views.

Examples

let evt = { type: 'refreshListViews' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

refreshOnce

Request { type: 'refreshOnce' }

Response {type: "refreshOnce", status: "finished"}

Event to refresh the data. This is similar to using the refreshData event.

Examples

let evt = { type: 'refreshOnce' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

autoRefreshOn

Request { type: 'autoRefreshOn' }

Response {type: "autoRefreshOn", status: "finished"}

Event to turn auto refreshing on for the component.
The rate of refresh used is whatever is provided in the list view config.

Examples

let evt = { type: 'autoRefreshOn' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

autoRefreshOff

Request { type: 'autoRefreshOff' }

Response {type: "autoRefreshOff", status: "finished"}

Event to turn auto refresh off for the component.

Examples

let evt = { type: 'autoRefreshOff' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

downloadData

Request { type: 'downloadData' }

Response {type: "downloadData", status: "finished", data: csvData}

Event which is similar to clicking the download data hyperlink on the list view.
The event response contains the CSV data string.

Examples

let evt = { type: 'downloadData' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

downloadSelectedData

Request { type: 'downloadSelectedData' }

Response {type: "downloadSelectedData", status: "finished", data: csvData}

Event which is similar to clicking the selected data download hyperlink
The event response contains the CSV data string.

Examples

let evt = { type: 'downloadSelectedData' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

pinListView

Request { type: 'pinListView' }

Response {type: 'pinListView', status: 'finished', object: selectedObject, listView:

selectedListView}

Event to pin the currently viewed list view

Examples

let evt = { type: 'pinListView' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

unpinListView

Request { type: 'unpinListView' }

Response {type: 'unpinListView', status: 'finished', object: selectedObject, listView:

selectedListView}

Event to unpin the currently viewed list view.

Examples

let evt = { type: 'unpinListView' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

spinnerOn

Request { type: 'spinnerOn' }

Response None

Event to turn the components spinner on.
The spinner will continue to be displayed until it is turned off and will not allow access to the list view during this time.

Examples

let evt = { type: 'spinnerOn' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

spinnerOff

Request { type: 'spinnerOff' }

Response None

Event to turn the components spinner off.

Examples

let evt = { type: 'spinnerOff' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

showAdmin

Request { type: 'showAdmin' }

Response None

Event similar to clicking the cog icon. The list views config admin modal dialog is displayed.

Examples

let evt = { type: 'showAdmin' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

runAction

Request { type: 'runAction', name: 'actionAPIName' }

Response {type: "runAction", status: "finished"}

Event to run an action which is specified in the request data.
No data can currently be passed in to the request other than the action name.
If rows are selected on the list view those rows will be passed into the action.

Examples

let evt = { type: 'runAction' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);

updateSetting

Request { type: 'updateSetting', name: 'settingAPIName', value: 'settingValue' }

Response None

The setting API names are specified in the HQ -> Documentation ->

Examples

let evt = { type: 'updateSetting' };
this.template.querySelector('simpli_lv-simpli-u-i-list-views').eventRequest(evt);