# 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.](#id-1.-capturing-the-button-click-event)
* [Refresh the SharinPix Mobile Launcher component effectively.](#id-2.-reloading-the-sharinpix-mobile-launcher-component)

## 1. Capturing the Button Click Event

The event to be captured is <mark style="color:$danger;">`sharinpix-mobile-launcher-clicked`</mark>. 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 <mark style="color:$danger;">`addEventListener`</mark> method. Here’s an example of how to handle this event in LWC.

**Javascript:**

```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 <mark style="color:$danger;">`window.addEventListener`</mark> method listens for the <mark style="color:$danger;">`sharinpix-mobile-launcher-clicked`</mark> event, triggered when the mobile launcher button is clicked.
* **Event Handler:** The <mark style="color:$danger;">`handleCustomEvent`</mark> 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 <mark style="color:$danger;">`sharinpix-mobile-launcher-clicked`</mark> event.

## 2. Reloading the SharinPix Mobile Launcher Component

To reload the SharinPix Mobile Launcher component, you must invoke the <mark style="color:$danger;">`reload()`</mark> 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 <mark style="color:$danger;">`reload()`</mark> method on the SharinPix Mobile Launcher component.

**Template :**

```html
<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 :**

```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 <mark style="color:$danger;">`dynamicTags`</mark>, <mark style="color:$danger;">`roll`</mark>, <mark style="color:$danger;">`showOverlay`</mark>, and <mark style="color:$danger;">`checklist`</mark> 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 <mark style="color:$danger;">`reloadMobileLauncher`</mark> method is invoked. This method updates the component state and then calls the <mark style="color:$danger;">`reload()`</mark> method on the child component (<mark style="color:$danger;">`mobileLauncher`</mark>) to refresh it. You can also automate this reload process, depending on your specific logic, without using a button.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sharinpix.com/documentation/cookbook/refreshing-sharinpix-mobile-launcher-and-handling-onclick-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.