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:
- It determines the form factor (e.g. ‘Large’ or ‘Small’, Salesforce has only these two flavors today);
- 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
