function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Hemanth MSNSHemanth MSNS 

LWC Error : Unsupported form factor

I have created an LWC component that can be used for both desktop and mobile, but I'm getting the below error when I'm trying to open the component in mobile.

Error
Below are the code :

cgReletedList.html:
<template>
<lightning-card>
<lightning-layout horizontal-align="space" multiple-rows="true">
<lightning-layout-item padding="around-small">
<div class="slds-scrollable">
<lightning-card variant="Narrow" title="Communication Guest" icon-name="standard:account">
<div slot="actions">
<lightning-button label="Printable View" slot="actions" onclick={printableView}></lightning-button>
</div>
<div class="slds-form slds-p-around_x-small">
<lightning-input type="search" label="Enter Communication Guest" value={sKey} onchange={handleContactName}>
</lightning-input>
</div>
</br>
<lightning-datatable key-field="id"
data={data}
columns={columns}
onrowaction={onRowAction}
hide-checkbox-column default-sort-direction={defaultSortDirection} sorted-direction={sortDirection}
sorted-by={sortedBy}
onsort={onHandleSort}>
</lightning-datatable>
<div class="slds-page-header" role="banner">
<lightning-layout horizontal-align="space">
<lightning-layout-item flexibility="auto">
<lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}>
</lightning-button>
</lightning-layout-item>
<lightning-layout-item flexibility="auto">
Displaying {startingRecord} to {endingRecord} of {totalRecountCount} records.
Page {page} of {totalPage}.
</lightning-layout-item>
<lightning-layout-item flexibility="auto">
<lightning-button label="Next" icon-name="utility:chevronright" icon-position="right"
onclick={nextHandler}>
</lightning-button>
</lightning-layout-item>
</lightning-layout>
</div>
</lightning-card>
</div>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>

cgReletedList.js:
import { LightningElement, track, wire, api } from "lwc";
import { NavigationMixin } from "lightning/navigation";
import cmRelatedLsit from "@salesforce/apex/CGRelatedListCtrl.cmSearch";
import FORM_FACTOR from '@salesforce/client/formFactor';
export default class CgRelatedList extends NavigationMixin(LightningElement) {
@track columns = [
{
label: "Communication Guest Number",
fieldName: "Name",
type: "button",
typeAttributes: {
label: { fieldName: "Name" }
}
},
{
label: "First Name",
fieldName: "First_Name__c",
type: "Text",
sortable: true
},
{
label: "Last Name",
fieldName: "Last_Name__c",
type: "Text",
sortable: true
},
{ label: "Status", fieldName: "Status__c", type: "Text", sortable: true }
];
defaultSortDirection = "asc";
sortDirection = "asc";
sortedBy;
@api prop2;
@api prop1;
@api prop3;
@track searchKey = "";
@api recordId;
@track cgLst;
@track cgLstFiltered;
@track sKey;
@track filteredData;
@track items = [];
@track data = [];
@track page = 1;
@track startingRecord = 1;
@track endingRecord = 0;
@track pageSize = 10;
@track totalRecountCount = 0;
@track totalPage = 0;
@wire(cmRelatedLsit, { searchKey: "$searchKey" , formFactor: FORM_FACTOR})
wiredAccounts({ error, data }) {
if (data) {
this.cgLst = data;
console.log("cgLst : ", this.cgLst);
console.log(JSON.parse(JSON.stringify(this.cgLst)));
this.cgLstFiltered = JSON.parse(JSON.stringify(this.cgLst));
this.paginationFunction(data);
} else if (error) {
this.error = error;
}
}
connectedCallback() {
this.searchKey = this.recordId;
console.log('The device form factor is: ' + FORM_FACTOR);
/*switch(FORM_FACTOR) {
case 'Large':
return this.prop1 = true;
case 'Medium':
return this.prop2 = true;
case 'Small':
return this.prop3 = true;
default : false;
}
if(FORM_FACTOR == 'Small'){
this.prop3 = true;
}else{
this.prop3 = false;
}*/
}
handleContactName(event) {
this.sKey = event.target.value;
console.log("sKey 1 : ", this.sKey);
console.log("sKey 1 : ", typeof this.sKey);
if (this.cgLstFiltered != undefined) {
this.filteredData = this.cgLstFiltered.filter(
(word) =>
!this.sKey ||
word.First_Name__c.toLowerCase().indexOf(this.sKey.toLowerCase()) > -1
);
}
if (this.sKey === "") {
//this.filteredData(this.cgLst);
this.paginationFunction(this.filteredData);
console.log("1. ", this.filteredData);
} else if (this.filteredData != undefined) {
console.log("2. ", this.filteredData);
this.paginationFunction(this.filteredData);
}
}
//clicking on previous button this method will be called
previousHandler() {
if (this.page > 1) {
this.page = this.page - 1;
this.displayRecordPerPage(this.page);
}
}
//clicking on next button this method will be called
nextHandler() {
if (this.page < this.totalPage && this.page !== this.totalPage) {
this.page = this.page + 1;
this.displayRecordPerPage(this.page);
}
}
//this method displays records page by page
displayRecordPerPage(page) {
this.startingRecord = (page - 1) * this.pageSize;
this.endingRecord = this.pageSize * page;
this.endingRecord =
this.endingRecord > this.totalRecountCount
? this.totalRecountCount
: this.endingRecord;
this.data = this.items.slice(this.startingRecord, this.endingRecord);
this.startingRecord = this.startingRecord + 1;
}
// Used to sort the 'Age' column
sortBy(field, reverse, primer) {
const key = primer
? function (x) {
return primer(x[field]);
}
: function (x) {
return x[field];
};
return function (a, b) {
a = key(a);
b = key(b);
return reverse * ((a > b) - (b > a));
};
}
onHandleSort(event) {
const { fieldName: sortedBy, sortDirection } = event.detail;
const cloneData = [...this.cgLst];
cloneData.sort(this.sortBy(sortedBy, sortDirection === "asc" ? 1 : -1));
this.data = cloneData;
this.sortDirection = sortDirection;
this.sortedBy = sortedBy;
this.paginationFunction(cloneData);
}
onRowAction(event) {
this.record = event.detail.row;
this[NavigationMixin.Navigate]({
type: "standard__recordPage",
attributes: {
recordId: this.record.Id,
objectApiName: "Communication_Member__c",
actionName: "view"
}
});
}
printableView()
{
const urlWithParameters = '/apex/PrintableViewForCommGuest?id='+this.searchKey+'';
console.log('urlWithParameters...'+urlWithParameters);
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: urlWithParameters
}
}, false); //if you set true this will opens the new url in same window
}
paginationFunction(lstData){
console.log('Data : ',lstData);
this.items = lstData;
console.log('Data : ',lstData);
this.totalRecountCount = this.items.length;
this.totalPage = Math.ceil(this.totalRecountCount / this.pageSize);
this.data = this.items.slice(0, this.pageSize);
this.endingRecord = this.pageSize;
this.error = undefined;
}
}

cgReletedList.js.meta-xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
<target>lightning__FlowScreen</target>
</targets>
</LightningComponentBundle>

Please help me with this. I really appreciate any help you can provide.
ANUTEJANUTEJ (Salesforce Developers) 
Hi Hemanth,

>> https://developer.salesforce.com/forums/?id=9062I000000gBCHQA2

As mentioned in the above link there is a similar error while accessing and the below is the best answer that was selected can you try checking:

"You can configure a component to display on a Lightning app page when the page is rendered in desktop format (Large), phone format (Small), or both.

In the <targetConfigs> section of the component’s configuration file, use the <supportedFormFactors> tag set to declare which form factors the component supports for a page type.

App pages support the Large and Small form factors. Record and Home pages support only the Large form factor.

Small—Represents the phone form factor. Supported for lightning__AppPage only.

Also, make sure to add your LWC to lightning__AppPage.

Please refer to the below links which might help you further.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_config_form_factors

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_configuration_tags

https://developer.salesforce.com/docs/component-library/documentation/lwc/use "

As mentioned can your try replacing the above XML file with the below and see if it works?
 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Best Component Ever</masterLabel>
    <description>This is a demo component.</description>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
        <target>lightning__FlowScreen</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage">
            <property name="prop2" type="Boolean" />
            <supportedFormFactors>
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning__RecordPage">
            <property name="prop1" type="String" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
        <targetConfig targets="lightning_HomePage">
            <property name="prop3" type="Integer" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
Hemanth MSNSHemanth MSNS
Hi Anutej,

Still, I'm getting the same error.
Hemanth MSNSHemanth MSNS
The below code worked for me.

 
<?xml version="1.0" encoding="UTF-8" ?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>50.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="prop1" type="String" />
            <supportedFormFactors>
                <supportedFormFactor type="Large" />
                <supportedFormFactor type="Small" />
            </supportedFormFactors>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>