Salesforce Developer Community

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
1

Questions
4

Replies

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.

Hemanth MSNS
January 20, 2021
Like
0

3 replies

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

Hemanth MSNS
January 20, 2021
Like
0

SOLVED

4 replies

I have a method that takes account id as a parameter so it can be used in SOQL query to count the associated contacts of that account record. How do I pass the parameter to SOQL query in the where clause? I tried the below but it didn't work.

Prathyusha Balguri 4
January 20, 2021
Like
0

2 replies

Getting value of lightning input text in aura:iteration

I have a wrapper class that iterate. I want to get the vlaue of just one text field from the iteration. That field is used to create a new record for a different object.
Lightning component

<aura:component controller="billDownCtrl" Implements="flexipage:availableForRecordHome, force:lightningQuickActionWithoutHeader">
	<!-- Attributes and handlers-->
    <aura:attribute name="venList" type='billDownCtrl.wrapper[]'/>
    <aura:handler name="init" action="{!c.doInIt}" value="{!this}" />
    <aura:attribute name="venId" type='string'/>
    <aura:attribute name="amt" type="Decimal"/>
    <aura:attribute name="amtList" type="Decimal[]"/>
    
    <lightning:card title="Download Cycle ">
       
    <section >
          <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer " role="grid">
  
              <!--Display the bill download cycle -->
              			<tbody>
              <aura:iteration items="{!v.venList}" var="ven" indexVar="rowIndex">
    		 <tr>
                    <th scope="row" data-index="{!rowIndex}" >
                        <lightning:formattedNumber value="{!ven.down}" /></th>
                  </tr>
   			 
                            
                           
                           
 			<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer ">
                   		                        
                		<aura:iteration items="{!ven.acc}" var="eng" >           
                            	  <thead>          
           								 <tr class="slds-text-body_small" role="gridcell"> 
             		   <th scope="col" style="width:50px"><span class="slds-truncate" role="gridcell">Portal Link</span></th>
                                  										</tr>
       										 </thead>
                            
        <tbody>
            <lightning:formattedText linkify="true" value="{!eng.Portal_Link__c}" /> <br/>
            
           					
            							<!--Display vendor invoices -->
          <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer ">
                   			            
           						<thead>          
            <tr class="slds-text-heading--small"> 
                <th scope="col"><span class="slds-truncate">Vendor Invoice</span></th>
                <th scope="col"><span class="slds-truncate">Customer</span></th>
                <th scope="col"><span class="slds-truncate">Login</span></th>
                <th scope="col"><span class="slds-truncate">Password</span></th>
                <th scope="col"><span class="slds-truncate">Last Download</span></th>
                <th scope="col"><span class="slds-truncate">Location Name</span></th>
                <th scope="col"><span class="slds-truncate">Location Address</span></th>
                <th scope="col"><span class="slds-truncate">Bill Cycle</span></th>
                <th scope="col"><span class="slds-truncate">Current Amt Due</span></th>
                <th scope="col"><span class="slds-truncate">Completed</span></th>
            </tr>
            
        </thead>
       										 
										<aura:iteration items="{!eng.Vendor_Invoices__r}" var="ac">                                                          
        <tbody>
            
                 <!--Form for the vendor invoices -->    
            
            <tr>
                  
                            <td>
  <th scope="row"><a href="{!'/one/one.app?#/sObject/'+ ac.Id + '/view'}"> <lightning:formattedText value="{!ac.Name}" /></a></th>
                             </td>
                            <td>
                                <lightning:formattedText value="{!ac.Account__r.Name}" />
                            </td>
                        <td>
                            <lightning:formattedText value="{!ac.Login__c}" /> <br/>
                            <lightning:button iconName="utility:copy_to_clipboard"
                          onclick="{!c.copyInputFieldValue}"
                          label="Copy"
                          value="{!ac.Login__c}"/>
                            </td>
                            
                            <td>
                                <lightning:formattedText value="{!ac.Password__c}" /> <br />
                                <lightning:button iconName="utility:copy_to_clipboard"
                          onclick="{!c.copyInputFieldValue}"
                          label="Copy"
                          value="{!ac.Password__c}"/>
                             </td>
                            <td>
                                 <lightning:formattedDateTime value="{!ac.Last_Download__c}" />
                             </td>
                            
                            <td>
                                <lightning:formattedText value="{!ac.Location_Name__c}" />
                            </td>
                            
                		  <td>
                                <lightning:formattedText value="{!ac.Location_Address__c}" />
                            </td>
                			
                  			<td>
                                <lightning:formattedNumber value="{!ac.Bill_Cycle__c}" />
                                
                            </td>
                <td><lightning:input type="number" aur:id="amtList" value="{!ac.Data_Bill_Benchmark__c}" name="{!rowIndex}" onchange="{!c.getAmt}"/></td>
                
        <td><button type="button" onclick="{!c.complete}" name="{!rowIndex}" class="slds-button slds-button--brand" id="{!ac.Id}">Completed</button></td>
            </tr>
                            </tbody>
              </aura:iteration>           
                                    </table>
                                
        </tbody>
         </aura:iteration>    
    </table>
                                    <!-- End of displaying Vendor Invoice-->
                            
                  
                            </aura:iteration>
              						</tbody>
        								</table>
           		 </section>
        
    </lightning:card>
</aura:component>

JS Controller:

getAmt : function(component, event){
         var amtlist = component.find('amtList').get('v.value');
            var getIndex = event.getSource().get("v.name");
		        var form = component.get("v.venList");
      		 var amt = form[getIndex];
        alert(amt.amtlist);
        component.set('v.amt', '');

    },

Any help would be appreciated

SF_Monkey
May 29, 2019
Like
0