2

I'm working on a community solution which is intended to be very low code, so using Vlocity. Like a lot of declarative solutions, they can make some simple things complicated. I'm getting a bit hung up on how to best implement the following:

  1. A record view which shows some lists of child records on the same page. This is to be done using flexcards. Each object should load independently from the rest (separate queries). There will be about 10 child objects in total.

outline of page structure

  1. Each child object flexcard should have actions available on it for new and edit. The actions are going to be conditionally displayed depending on the custom permissions the user has. The actions should launch an omniscript in a modal, either to create a new instance of the record or edit it. There will be a button to save the object to Salesforce, likely using a dataraptor.

  2. When the user is done interacting w/ that object/form they should be able to close the modal. The objects updated would ideally refresh to reflect those updates, so the user can see the most current state of the data.

open modal

I've been trying to work out a way to use events to have the omniscript communicate w/ the flexcard from which it was opened, but this seems to be either not possible or I'm missing some important information about how PubSub events work between omniscripts and flexcards.

Is there a better approach for this kind of use case? I'm very new to Vlocity, so not sure what the preferred methods would be. Most users would be viewing the objects, and only a few are able to edit the records, if that is of any important.

2
  • did you solve it?
    – Cline
    Sep 30, 2022 at 19:53
  • 2
    I did. The solution, ultimately, was to add an event listener to the parent flexcards that would refresh the lists of records. The launched omniscripts emitted events as part of the configuration in an integration procedure. This worked to get the flexcards to refresh without reloading the entire page. There's a lot more documentation in Trailhead around this now than there was a year ago. So some of the solution uses full page refresh, while other parts do an event based asynchronous update. Nov 1, 2022 at 12:43

2 Answers 2

0

Your parent flexcard can refresh the data source based on a pubsub event without reloading the entire page. In order to achieve this you need to make the following changes :

  1. Omniscript Elements are saved as LWCs. Vlocity provides the option to override these elements using custom LWC. In order to override the standard behaviour, you just have to import and extend the Omniscript Element in your custom LWC. We can select any Omniscript element and specify the LWC Component Override in Properties tab in order to use custom LWC instead of the standard element.
  2. You can publish pubsub event from the custom LWC by importing the pubsub component from the Vlocity namespace. The namespace will vary based on your package.
  3. Flexcards have the option to add pubsub event listener. Based on pubsub event we can execute Card Actions such as Reload, Remove, Select Cards, Set Values and Update Datasource

For your usecase, you might want to override the OmniscriptIpAction element. The idea is to send the pubsub event once the Omniscript form is closed, that is when the OmniscriptIpAction element is removed from the page. This is something you can easily achieve using the disconnectedCallback() method in LWC.

import OmniscriptIpAction from 'vlocity_ins/omniscriptIpAction';
import pubsub from 'vlocity_ins/pubsub';//importing pubsub component
export default class BHOmniscriptIPAction extends OmniscriptIpAction {
    disconnectedCallback() { 
        //Publishing reload event to insAccountCard channel
        pubsub.fire("insAccountCard", "reload", {});
    }
}

Following is the syntax for the fire method :

pubsub.fire(“Channel_Name”, “Event_Name”, payload);

Go back to your Omniscript and select the Integration Procedure Action. Move to Properties tab and scroll down to the bottom. Use bHOmniscriptIPAction as LWC Component Override.

In order to subscribe to the events published by components, your Flexcard will need an event listener. In Design View, click on Setup tab and scroll to EVENT LISTENER option. Click on Add New.

enter image description here

Select Event Type as Pubsub and Event Name as reload. Channel Name is the name of your Flexcard(insAccountCard) by default.

enter image description here

Now we need to define the action to be taken once “reload” event is received. Select Action Type as Card, Type as Reload. Click Save.

If you're still hung up and looking for further assistance, then I have recently implemented an example which demonstrates this usecase. Sharing the link to my article here :

https://medium.com/@rawatswapnil911/pubsub-how-to-communicate-with-parent-flexcard-from-omniscript-action-opened-in-a-modal-96da7cad4efd

1
  • This is all true, but you don't need to creation custom LWCs to get it to refresh. You can do it with standard OOTB Omniscripts and Flexcards. Nov 1, 2022 at 12:46
0

I was looking for the same and ended up debugging vlocity source code.

In OmniScript on the last action element, in Messaging Framework section enable PubSub events and type Key/Value pair - values doesn't matter, because FlexCard can't read them anyway.

On FlexCard Modal Action set Channel Name to "omniscript_action" to close the modal. If you want to refresh component, on FlexCard main component setup page set Event Listener as follows: Channel Name :"omniscript_action" Event Name: "data" Action: Card -> Refresh

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .