Vlocity/Omnistudio

Call Remote Action from LWC

In the world of Salesforce development, one common challenge is the need to communicate seamlessly between the user interface, built using Lightning Web Components, and the server-side logic, often written in Apex.

This is where remote actions from Vlocity come into play, acting as a bridge between the front-end and back-end of your Salesforce application.

Call Remote Action from LWC

Create the Remote Action

Begin by creating the remote action and ensure it carries the global annotation. Avoid using with sharing, and make sure to implement vlocity_ins.VlocityOpenInterface in your class declaration. Next, establish an invokeMethod where you define the methods to be utilized within the remote action. There are some required parameters that needs to be included even if you're not going to use them. Below, you'll find an illustrative example of the remote action's structure, ready for you to copy and adapt to your specific requirements:


global without sharing class RemoteActionExample implements vlocity_ins.VlocityOpenInterface{
    public Boolean invokeMethod(String methodName, Map<String,Object> inputMap, Map<String,Object> outputMap, Map<String,Object> options){
        if (methodName == 'getAccounts'){
            getAccounts(inputMap, outputMap, options);
        }
        return true;
    }

    public static void getAccounts(Map<String,Object> inputMap, Map<String,Object> outputMap, Map<String, Object> options){
        // IMPLEMENT YOUR LOGIC HERE

        Id accountId = Id.valueOf((String)inputMap.get('recordId'));
        Account acc = [SELECT Id, Name, Industry FROM Account WHERE Id =: accountId];
        outputMap.put('account', acc);
    }
}

In this section, all you have to do is customize the class name RemoteActionExample and the method name getAccounts to match your project's conventions and tailor the logic to suit your specific needs. In the provided example, we receive an Account ID from the Lightning Web Component, which is used to execute a query for retrieving the Name and Industry fields. It's important to note that the incoming data is accessed through the inputMap parameter, and when sending data back to the LWC, there's no need for a response; instead, you should include the data within the outputMap.

Create the Lightning Web Component

Before diving into LWC coding, it's essential to address a few prerequisites. To begin, you'll need to modify the XML configuration of your LWC, specifically by including the runtimeNamespace associated with your Vlocity edition. To ensure accuracy, please verify and implement the correct namespace relevant to your Vlocity edition. You can conveniently find this information under Setup > Installed Packages.

Vlocity namespace on Installed Packages
file_type_xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
	<runtimeNamespace>vlocity_ins</runtimeNamespace>
</LightningComponentBundle>

Next, within your LWC, it's necessary to extend the OmniscriptBaseMixin to enable component usage. It's important to note that, due to the XML namespace configuration, you should avoid using @salesforce import statements within the LWC, such as for Apex classes or static resources etc. otherwise you will get an error.

import { LightningElement } from 'lwc';
import { OmniscriptBaseMixin } from "vlocity_ins/omniscriptBaseMixin";

export default class CustomVlocityComponent extends OmniscriptBaseMixin(LightningElement){

}

Finally, at this stage, you can invoke your Vlocity remote method within a function. To do this, you'll need to tailor the parameters according to your specific requirements, utilizing your custom Apex class and input. IMPORTANT: On params, the input must be on a JSON.stringify()

Here is an illustrative example:

import { LightningElement, api } from 'lwc';
import { OmniscriptBaseMixin } from "vlocity_ins/omniscriptBaseMixin";

export default class CustomVlocityComponent extends OmniscriptBaseMixin(LightningElement){
    @api recordId;

    getData(){
        const params = {
            input: JSON.stringify({recordId: this.recordId}),
            sClassName: 'RemoteActionExample',
            sMethodName: 'getAccounts',
            options: '{}',
        };
		this.omniRemoteCall(params, true)
		.then(res => {
			console.log(res);
			// IMPLEMENT YOUR LOGIC HERE
		})
		.catch(err => {
			console.error(err)
		})
	}
}