Dynamic Interactions on Lightning App Page

-

Salesforce provides multiple ways to communicate between components which are not related to each other. E.g. pubsub module or Lightning Message Service. For the components which are related to each other, one can use public properties of component in addition pubsub module or Lightning Message Service. However, it was not possible to use the public properties with unelated components on lightning app page.

Recently, Salesforce has introduced dynamic interactions which lets you use public properties of components with unrelated components with some manual configurations. Lets understand how dynamic interactions can be used in lightning app page.

NOTE: Dynamic Interactions are supported only on lightning app pages with limited activity between components

What it takes to use dynamic interactions?

A components which defines the event schema and publish the event, a component with public properties and few configurations on lightning app page. Lets understand each and see how we can use dynamic interactions.

Defining event schema:

Event schema is defined in js-meta file of lwc. Under targetConfig with targets attribute set as lightning__AppPage, event tag can be added with schema in json object format. 

<targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <event name="infoAdded" label="Info Added" description="This event fires when an info is added and publish button is clicked.">
                <schema>
                    {
                        "type": "object",
                        "properties": {
                            "firstName": {
                                "type": "string",
                                "title": "First Name",
                                "description": "Please enter your first name."
                            },
                            "lastName": {
                                "type": "string",
                                "title": "Last Name",
                                "description": "Please enter your last name."
                            }
                        }
                    }
                </schema>
            </event>
        </targetConfig>
    </targetConfigs>

Publishing event:

Identify the interaction which needs to be handled and add the respective event listeners. CustomEvent object instance and dispatchEvent method are required to publish the event like any other event publishing.  

handlePublishClick() {
    const firstName = this.firstName;
    const lastName = this.lastName;
    this.dispatchEvent(
      new CustomEvent("infoAdded", { detail: { lastName, firstName } })
    );
  }

Important things to remember when publishing dynamic interaction event

  • It is mandatory that the events properties names match the names provided in event schema
  • Sequence of properties does not matter 
  • Event detail should be set in above format only. Interaction won't work if json object format is used e.g. "lastName": this.lastName
  • It s not required that the properties in publisher components are public
Component with public properties:

Public properties means, the configurations exposed by component which are expected to be set by admin. To create such properties @api decorator and properties in targetConfig are used.

Configurations on lightning app page:

When component with event declaration in targetConfig is added on lightning app page, Salesforce adds interactions tab along with properties tab. 
Add new interaction using interactions tab. When component i.e. target component is selected public properties of the component becomes available and these can be set either by hardcoding or using expressions like {!Event.<property of event>}

You can have multiple interactions created but, there can be single interaction for one target component


That's all! you are all set to use dynamic interactions.

Thanks for your time to go through the post, hope it helps!

Popular posts from this blog

Create File versions from Apex

-
Image
In Lightning Experience, Salesforce Files unifies your files, documents, and libraries into a single place for easier management. Files can be created from different places like Lightning Components, LWC and integrations i.e. via apex. In majority scenarios, the requirement is around creating a file and associating it with some sObject record.  Below script can be to create a file in Salesforce. HttpRequest req = new HttpRequest () ; req.setEndpoint ( 'https://images.pexels.com/photos/2052217/pexels-photo-2052217.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' ) ; req.setMethod ( 'GET' ) ; HttpResponse res = new Http () .send ( req ) ; if ( res ! = null ) { Blob imageBlob = res.getBodyAsBlob () ; String fileName = 'Ssshhh' ; // Creates the contentversion and implicitly creates content document ContentVersion cv = new ContentVersion () ; cv.Title = fileName; cv.PathOnClient = fileName
Read more

Run as different user in Apex

-
Yes, you read it right; running apex as different user who has higher access levels than logged in user is now possible in Salesforce using Platform Events . Platform events are executed as  Automated Process user . Processing records in system mode or async apex like  batch jobs are the commonly used workarounds for this. However there are few use cases where these workarounds can not help. We are going to see one of such use case. Use Case: If event is created with attendees then, only organizer can edit the event. This is standard Salesforce behavior. And there is business requirement that, attendees should be able to update few fields on event. Solution: Lets first analyze what is event with attendees means. Whenever a event is created with attendees, Salesforce creates separate events for organizer and attendees. These events are linked to each other, any update to organizer event is propogated to all attendee events automatically.  For organizer event IsChild is set to false an
Read more

Creating JKS certificate for JWT Bearer flow in Salesforce

-
JWT stands for Json Web Token. Salesforce supports JWT for authentication however, JWT should be signed using RSA SHA256 algorithm. This algorithm needs private and public key for signature. OpenSSL can be used to create private and public key and the same can be converted to specific certificate format. You can get OpenSSL here . Creating self-signed certificate: Below is the consolidated list of OpenSSL commands to create a self signed certificate. Generate a private key openssl genrsa -des3 -passout pass:<Password> -out server.pass.key 2048 openssl rsa -passin pass:<Password> -in server.pass.key -out server.key Generate a certificate signing request using the server.key file. A challenge password would asked with other information. Keep the passwords same to avoid certificate corruption. openssl req -new -key server.key -out server.csr Generate a self-signed digital certificate from the server.key and server.csr files openssl x509 -req -sha256 -days 365 -in server.csr -
Read more