Category: Flow

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