Skip to main content
Version: 1

LWC Example

Overview​

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.

Scenario​

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
      };
    callFlowWithResponse({
      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) {
    this.dispatchEvent(
      new ShowToastEvent({
        title,
        message,
        variant,
        mode,
      })
    );
  }
}
<template>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <lightning-input
        autocomplete="disable-autocomplete"
        type="text"
        label="Search Address"
        placeholder="type address to search....."
        onchange="{handleSearchAddress}"
        value="{searchAddress}"
      ></lightning-input>
    </div>

    <div>
      <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">
            <div
              class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta"
            >
              <div class="slds-media__figure slds-listbox__option-icon">
                <lightning-icon
                  icon-name="utility:checkin"
                  alternative-text="checkin"
                  size="xx-small"
                  title="xx-small size"
                ></lightning-icon>
              </div>
              <div class="slds-media__body">
                <div
                  role="option"
                  tabindex="0"
                  class="slds-listbox__option-text slds-listbox__option-text_entity"
                  onmousedown="{handleResultClick}"
                  data-id="{result.key}"
                >
                  {result.address}
                </div>
              </div>
            </div>
          </li>
        </template>
      </ul>
    </div>
  </div> </template
>;
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

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​

Conclusion​

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.