Skip to main content
Version: 2

LWC Example


This example demonstrates the implementation of the Plinqx FlowService wrapper in a Lightning Web Component (LWC). The example focuses on a practical application where the LWC component interacts with an external address search service via a Plinqx flow.


The LWC component in this example is designed to perform a dynamic address search. It leverages a Plinqx flow that makes a callout to an external mock address service, retrieves a list of addresses matching the search criteria, and displays the results in the component.

Note: The address service used here is a mock service for demonstration purposes. It returns random results without applying any specific search logic.

LWC Component Functionality

  • The LWC component is triggered by an onchange event.

  • Upon triggering, it calls the Plinqx service flow, which then makes an external callout and returns the service responses.

Code Implementation

import { LightningElement, track } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import callFlowWithResponse from '@salesforce/apex/Plinqx.FlowService.callFlowWithResponse';

const flowApiName = 'FlowService_Example';

export default class LwcServiceWrapperDemo extends LightningElement {
@track results = [];

handleSearchAddress(event) {
this.results = [];
let objParams =
//the flow input paramaters as an object
searchParam: event.detail.value, //set the input parameter of the flow
flowNameSpace: '', //The flow namespace if from package i.e. Plinqx
flowAPIName: flowApiName, //The flow API Name
flowParams: objParams, //The flow input paramaters
flowResponseVariable: 'addressResponse', //The output paratemeter of your flow to retrieve
.then((result) => {
this.results = result;
.catch((error) => {
this.handleNotification('Address Search', error.message, 'error');

handleResultClick(event) {
//implement result click logic here

handleNotification(title, message, variant, mode) {
new ShowToastEvent({
<div class="slds-form-element">
<div class="slds-form-element__control">
label="Search Address"
placeholder="type address to search....."

<ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid">
<template for:each="{results}" for:item="result">
<li key="{result.key}" class="slds-listbox__item" role="presentation">
class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
<div class="slds-media__figure slds-listbox__option-icon">
title="xx-small size"
<div class="slds-media__body">
class="slds-listbox__option-text slds-listbox__option-text_entity"
</div> </template
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">

Other Configuration

Setting Up Named Credential:

This named credential setup is crucial for securely calling the external mock address service from the Plinqx flow.

Package Installation

For practical demonstration, an unmanaged package of this LWC example is available. Use the links below to install it in your Salesforce environment:

Sample Response

Below is an example of the response returned by the demo address service. Note that results will vary with each search, reflecting the mock nature of the service.

"key": 0,
"id": "0b842ba6-4083-48cb-8550-00f89811c4ec",
"address": "045 Johanna Loaf",
"country": "Malta"
"key": 1,
"id": "d1c45c38-2c7d-49c7-8882-6ac12a217fc2",
"address": "26905 Stark Inlet",
"country": "American Samoa"
"key": 2,
"id": "52d7d979-5366-454f-a094-cdd51dacbf1f",
"address": "81561 Yundt Valley",
"country": "Monaco"
"key": 3,
"id": "735b15fc-1bdd-472e-a721-c8f328d732aa",
"address": "3356 Jacinto Locks",
"country": "Bolivia"
"key": 4,
"id": "3c006538-2047-45f3-bc3b-5214f7a561a7",
"address": "2067 Wilderman Groves",
"country": "Sweden"
"key": 5,
"id": "d1551e3f-b369-462e-940f-4a2f18eec029",
"address": "9571 Swift Well",
"country": "Bouvet Island (Bouvetoya)"

End Result


This example serves as a practical illustration of integrating Plinqx FlowService wrapper within an LWC. By following this example, developers can understand how to leverage Plinqx for external service integrations in a Salesforce LWC environment.