Refreshing SharinPix Mobile Launcher and Handling OnClick Events

In this article, we will demonstrate how to:

• Capture the OnClick event in the SharinPix Mobile Launcher.

• Refresh the SharinPix Mobile Launcher component effectively.

1. Capturing the Button Click Event

The event to be captured is sharinpix-mobile-launcher-clicked. An example use case may be to show the user a message when returning to the Salesforce mobile app after taking pictures with the SharinPix mobile app.

To capture this event in LWC, you must listen for the custom Javascript event using the addEventListener method. Here’s an example of how to handle this event in LWC.

Javascript:

import { LightningElement } from 'lwc';
export default class MobileLauncherParent extends LightningElement {
    connectedCallback() {
        window.addEventListener('sharinpix-mobile-launcher-clicked', this.handleCustomEvent);
    }
    handleCustomEvent(event) {
        // your own logic
    }
}

Explanation:

• Event Listener: The window.addEventListener method listens for the sharinpix-mobile-launcher-clicked event, triggered when the mobile launcher button is clicked.

• Event Handler: The handleCustomEvent function is executed once the event is triggered. You can add custom logic to this function, such as updating elements or logging event details.

This setup ensures that your LWC component efficiently handles the sharinpix-mobile-launcher-clicked event.

2. Reloading the SharinPix Mobile Launcher Component

To reload the SharinPix Mobile Launcher component, you must invoke the reload() method. The component state (such as tags, roll, or custom parameters) must be updated dynamically before reloading to ensure the changes are applied.

Below is an example illustrating how to call the reload() method on the SharinPix Mobile Launcher component.

Template :

<template>
    <sharinpix-mobile-launcher
        lwc:ref="mobileLauncher"
        tags={dynamicTags}
        button-label="Mobile Launcher Test"
        record-id={recordId}
        roll={roll}
        flash={flash}
        show-overlay={showOverlay}
        checklist={checklist}
        custom-parameters={customParameters}
    ></sharinpix-mobile-launcher>
    <button onclick={reloadMobileLauncher}>Reload URL</button>
</template>

Javascript :

import { LightningElement, api } from 'lwc';

export default class MobileLauncherParent extends LightningElement {
    @api dynamicTags = 'before'
    @api recordId
    @api roll = false
    @api showOverlay = false
    @api checklist = 'Tag1|Tag2|Tag3'
    @api customParameters

    reloadMobileLauncher() {
        this.dynamicTags = 'After'
        this.roll = true
        this.showOverlay = true
        this.checklist = 'Test1|Test2'
        const childComponent = this.refs.mobileLauncher;
        if (childComponent) {
            // this timeout is important for the change to be applied in the LWC lifecyle.
            setTimeout(() => {
                childComponent.reload();
            }, 0)
        }
    }
}

Explanation:

• LWC Component Properties: This component has properties like dynamicTags, roll, showOverlay, and checklist that must be updated dynamically before the component reloads to ensure real-time changes are applied.

• Reload Method: In the example, we use a button to trigger the reload. When the "Reload URL" button is clicked, the reloadMobileLauncher method is invoked. This method updates the component state and then calls the reload() method on the child component (mobileLauncher) to refresh it. You can also automate this reload process, depending on your specific logic, without using a button.