Ever had the need to make a Flow responsive based on the form factor in which it executes? Today the Flow run-time cannot readily determine the form factor of the client it’s executing within. However, having a Lightning Web Component (though similarly this would be possible with Aura) we do have access to the form factor, using the @salesforce/client/formFactor scoped module.

I created this tiny Lightning Web Component which does two things:

  1. It determines the form factor (e.g. ‘Large’ or ‘Small’, Salesforce has only these two flavors today);
  2. When the form factor is determined it navigates to the next screen element in the Flow.

The latter is optional, using an Input argument. Simply drop the Lwc on a blank screen element (the first?) of your flow. And have the next step branch based on the outputted form factor.

import { LightningElement, api } from 'lwc';
import { FlowAttributeChangeEvent, FlowNavigationNextEvent } from 'lightning/flowSupport';
import FORM_FACTOR from '@salesforce/client/formFactor';

export default class FormfactorFlowHelperLwc extends LightningElement {

    @api availableActions = [];         // Populated by lightning/flowSupport
    @api autoNavigate = false;          // Input. Should the Lwc execute the Flow's navigate event?
    @api formFactor = '';               // Output. Form factor.

    connectedCallback() {
        this.setFormFactor();
        if (this.autoNavigate) {
           this.navigate();
        }
    }

    setFormFactor () {
        const attributeChangeEvent = new FlowAttributeChangeEvent('formFactor', FORM_FACTOR);
        this.dispatchEvent(attributeChangeEvent);
    }

    navigate () {
        if (this.availableActions.find(action => action === 'NEXT')) {
            const navigateNextEvent = new FlowNavigationNextEvent();
            this.dispatchEvent(navigateNextEvent);
        }
    }
}

Grab it here, and deploy it to your org.

https://github.com/JeroenSfdc/sfdx-flow-formfactor-helper-lwc

About the Author Jeroen Burgers

Salesforce Technical Architect | Platform-Addict & Fan | Working & Living in the Netherlands | 's-Hertogenbosch | Kim, Jens & Kris | 4x+ Rowing | No Soliciting - Please

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: