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
