Embed SharinPix Aura components in LWC using Screen Flows

This article provides a workaround that will permit developers to use SharinPix Aura components in their custom LWC.

For this implementation, you will need:

  • A Screen Flow that will embed the desired SharinPix component
  • Add the Screen Flow to your LWC using the solution provided by UnofficialSF site

Note:

To embed a SharinPix Aura component in a LWC, follow the steps below:

  • Create a Screen Flow that will embed the desired SharinPix Aura component. For this example, we will be using the SharinPix Upload Button component
  • In the Flow, create a variable of type Text labeled as recordId. Mark the variable as Available for input as demonstrated below:
  • Next, add the SharinPix Upload Button component in a Screen element and use the variable recordId for the Album Id parameter as shown below:

Tip:

You can configure the other parameters as desired for the chosen SharinPix Aura component. For more information about the parameters available for the SharinPix components, please refer to the component's related article using this link: SharinPix Lightning Components

  • Save and activate the Flow when done.
  • Next, configure the ScreenFlow LWC available in the UnofficialSF package so as to call your Flow along with the correct parameters. The code snippet below demonstrates how this can be performed:


customLWC.html

<template>
    <c-screen-flow width='100%' height='300' flow-name='uploadButtonTest' flow-params={flowParams}></c-screen-flow>
</template>

customLWC.js

import { LightningElement, api } from 'lwc';

export default class SharinpixUploadButton extends LightningElement {
    @api flowParam = [{
        name: 'recordId',
        type: 'String',
        value: <Your Record ID>
    }]
    get flowParams() {
        return JSON.stringify(this.flowParam)
    }
}

Note: 

For more information about the ScreenFlow LWC implementation, refer to the following link: https://github.com/alexed1/LightningFlowComponents/tree/master/flow_process_components/ScreenFlow

Tip:

The above implementation can also be used in Salesforce Community. For Community Guest users to access the LWC, you should provide them access to the screenFlow Visualforce page.

0 Comments

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.