• Kartik Bhalla
  • NEWBIE
  • 10 Points
  • Member since 2021

  • Chatter
    Feed
  • 0
    Best Answers
  • 1
    Likes Received
  • 0
    Likes Given
  • 9
    Questions
  • 6
    Replies
I need to generate pdf from a button in my aura component and also want the data in table format in pdf. plz help me. I have searchd alot on google & got one solution but facing error in that solution also. please help me..
I am not able to understand from any of the articles on the internet. plz can any one explain the syntax and with example like I am getting confused why and when do we use contructor in wrapper class and can we write wrapper class without constructor, what exactly the wrapper class returns.. an object? or list of objects?  Please any can explain me with an easy practical example covering everything.. it will be really helpful. I have to use it in my aura component

 
I am not able to figure out anything. I used splice method to remove the item from array but it is not removing that item of the checkbox which I am unchecking. Please help If there is any other solution.
Please helpppppp what I am missing

component code:- 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global"
                controller="fetchAllContacts">
    
    <!-- Attribute Declration For Pagination -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="page" type="integer" description="using for store page Number"/>
    <aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
    <aura:attribute name="total" type="integer" description="total records count store "/>
    <aura:attribute name="range" type="integer" description="range "/>
    <aura:attribute name="recordEnd" type="Integer"/>
    <aura:attribute name="isSelectAll" type="boolean" default="false"/>
    <aura:attribute name="selectedCount" type="integer" default="0"/>
    <aura:attribute name="pageSize" type="Integer"/>

 <!--TABLE HEADER-->
    
    <lightning:card>
        <thead>    
            <tr class="slds-text-title_caps">
                
                
                
                
                &nbsp;   <th>
                
                <label class="slds-checkbox">
                    <ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContact}" aura:id="selectAll"/>
                    <span class="slds-checkbox--faux" />
                    <span class="slds-form-element__label"></span>
                </label>
             
                </th>
              
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th scope="col">
                <div style="font-size: 15px;">
                    
                    <div class="slds-truncate" title="Name">Contacts</div>
                    
                </div>
                </th>
           
            </tr>

        </thead>  
    </lightning:card>

<!--TABLE-->
    
    <div style="height:575px;">
        <div class="slds-scrollable_y " style="height:100%; width:100%;">
            <table aura:id="table" selectedRows="{!v.selection}" class="slds-table slds-table_fixed-layout">
                
                
                
                <tbody>
                    
                    <aura:iteration items="{!v.contacts}" var="item"> 
                        <tr>
                            <lightning:card variant="Narrow"> 
                                <th>
                                    <label class="slds-checkbox">
                                        <ui:inputCheckbox aura:id="singleCB"  value="{!item.isChecked}" text="{!item.objContact.Id}" change="{!c.checkboxSelect}"  />
                                        <span class="slds-checkbox--faux" />
                                        <span class="slds-form-element__label"></span>
                                    </label>
                                </th>
                                
                                
                                
                                <td>
                                    
                                    <a target="_blank" href="{!'/'+item.objContact.Id}"><div style="height:180px; width:180px;"><aura:unescapedHtml value="{!item.objContact.Profile_Pic__c}" /></div></a>
                                    
                                </td>
                                
                                
                                <th>
                                    <div style="font-size: 17px;">
                                        <div class="slds-truncate" title="{!item.objContact.Name}">
                                            Name: <a href="{!'/'+item.objContact.Id}">{!item.objContact.Name}</a>
                                        </div>
                                        <div class="slds-truncate" title="{!item.objContact.Account.Name}">
                                            Account Name: <a href="{!'/'+item.objContact.AccountId}">{!item.objContact.Account.Name}</a>
                                        </div>
                                        <div class="slds-truncate" title="{!item.objContact.Title}">Title: {!item.objContact.Title}</div>
                                    </div>
                                </th>
                            </lightning:card>    
                        </tr>
                        
                        <!--  <ui:outputRichText value="{!item.Profile_Pic__c}"/>-->
                    </aura:iteration>
                    
                    
                </tbody>
            </table>
        </div>
    </div>
    
    <!--FOOTER-->

<lightning:card>
        
        <aura:set attribute="footer">
            <lightning:layout horizontalAlign="spread"> 
                
                <lightning:layoutItem  >
                    <span class="slds-badge slds-badge_lightest">
                        <p class="slds-truncate">{!v.range}-{!v.recordEnd} of {!v.total} Contacts &nbsp; </p>
                    </span>
                </lightning:layoutItem>
                <lightning:layoutItem  >
                    
                    <div class="slds-p-left_xx-small">
                        
                        <ui:inputSelect aura:id="recordSize" label="Show Records " change="{!c.onSelectChange}">
                            <ui:inputSelectOption text="5" label="5" value="true"/>
                            <ui:inputSelectOption text="10" label="10"/>
                            <ui:inputSelectOption text="20" label="20"/>
                            <ui:inputSelectOption text="50" label="50"/>
                        </ui:inputSelect>
                    </div>
                </lightning:layoutItem>
                
                
                <lightning:layoutItem>
                    <div class="slds-p-right_xx-small">
                        <lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />            
                        <lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
                    </div>
                </lightning:layoutItem>
                
                
                <lightning:layoutItem  >
                    <span class="slds-badge slds-badge_lightest">
                        <p>Page {!v.page} of {!v.pages}</p></span>
                </lightning:layoutItem>                    
  
                
            </lightning:layout>
        </aura:set>

    </lightning:card> 
        
    <br/>
    
    
     display total record and selected record count    
            <p class="slds-m-around_small">
                <span class="slds-badge slds-badge_lightest" style="display:inline-block">
                    Total Records : {!v.selectedCount > 0 ? v.selectedCount + '/' : ''} {!v.total} 
                </span>
            </p>
    
</aura:component>

js code:-

({
    doInit: function(component, event, helper) {
        // this function call on the component load first time     
        // get the page Number if it's not define, take 1 as default
        //console.log('error'+page);
        
        var page = component.get("v.page") || 1;
                console.log('error'+page);

        // get the select option (drop-down) values.   
        var recordToDisply = component.find("recordSize").get("v.value");
                console.log('error'+recordToDisply);

        // call the helper function   
        helper.getContacts(component, page, recordToDisply);
        
    },
    
    //Select all contacts
    handleSelectAllContact: function(component, event, helper) {
        var checkAllList = [];
        var listOfContacts = component.get("v.contacts");
        //var checkvalue = component.find("selectAll").get("v.value"); 
        var selectedHeaderCheck = event.getSource().get("v.value");       
       // var checkContact = component.find("checkContact"); 
        //if(checkvalue == true){
            for(var i=0; i<listOfContacts.length; i++){
                if(selectedHeaderCheck == true){
                    listOfContacts[i].isChecked = true;
                //checkContact[i].set("v.value",true);    
                component.set("v.selectedCount", listOfContacts.length);
            }
            
        else{ 
                listOfContacts[i].isChecked = false;
                //checkContact[i].set("v.value",false);
                component.set("v.selectedCount", 0);  
            }
                checkAllList.push(listOfContacts[i]);
        }
        
        
        component.set("v.contacts", checkAllList);
    },
     
    checkboxSelect: function(component, event, helper) {
       // var selectedCheckList = [];
        //console.log('l'+selectedCheckList);
        //var checkLength = component.find("checkContact");
        var selectedRec = event.getSource().get("v.value");
       // var checkContact = event.getSource().get("v.value");
        //console.log('checkContactlelo'+checkContact);
        var getSelectedNumber = component.get("v.selectedCount");
        console.log('n'+getSelectedNumber);
       
        if(selectedRec == true){
                getSelectedNumber++;
           // selectedCheckList.push(checkContact);
          //  console.log('checkContact'+checkContact.get("v.value"));
        } else {
            getSelectedNumber--;
           // selectedCheckList.pop(checkContact);
            component.find("selectAll").set("v.value", false);
            
        }
     
  
        component.set("v.selectedCount", getSelectedNumber);
        // if all checkboxes are checked then set header checkbox with true   
        if (getSelectedNumber == component.get("v.pageSize")) {
            component.find("selectAll").set("v.value", true);
        }
        
    },

    
    
    navigate: function(component, event, helper) {
        // this function call on click on the previous page button 
         
        var page = component.get("v.page") || 1;
        // get the previous button label  
        var direction = event.getSource().get("v.label");
        // get the select option (drop-down) values.  
        var recordToDisply = component.find("recordSize").get("v.value");
        // set the current page,(using ternary operator.)  
        page = direction === "Previous Page" ? (page - 1) : (page + 1);
        // call the helper function
        
        helper.getContacts(component, page, recordToDisply);
        
    },
    
    onSelectChange: function(component, event, helper) {
        // this function call on the select opetion change,     
        var page = 1
        var recordToDisply = component.find("recordSize").get("v.value");
        helper.getContacts(component, page, recordToDisply);
    },
    
})

helper js:

({
   getContacts: function(component, page, recordToDisply) {
      // create a server side action. 
      
      var action = component.get("c.fetchContact");
      // set the parameters to method 
      action.setParams({
         "pageNumber": page,
         "recordToDisply": recordToDisply
      });
      // set a call back   
      action.setCallback(this, function(a) {
         // store the response return value (wrapper class insatance)  
         var result = a.getReturnValue();
         console.log('result ---->' + JSON.stringify(result));
         // set the component attributes value with wrapper class properties.   
         
         component.set("v.contacts", result.contacts);
         component.set("v.page", result.page);
         component.set("v.total", result.total);
         component.set("v.pages", Math.ceil(result.total / recordToDisply));
          component.set("v.range", result.range);
          component.set("v.recordEnd", result.recordEnd);
           component.set("v.selectedCount" , 0);
          component.set("v.pageSize", result.pageSize);
         //  component.set("v.isChecked", result.isChecked);
            //component.set("v.isSelectAll", false); 
      });
      // enqueue the action 
      $A.enqueueAction(action);
   }
})

apex class controller:

public with sharing class fetchAllContacts {
    
    @AuraEnabled    
    public static ContactPagerWrapper fetchContact(Decimal pageNumber ,Integer recordToDisply) {
        List<ContactPagerWrapper> modifiedList = new List<ContactPagerWrapper>();
        Integer pageSize = recordToDisply;
        Integer offset = ((Integer)pageNumber - 1) * pageSize;
       // boolean isChecked = true; 
        Integer page = (Integer) pageNumber;
        Integer recordEnd = pageSize * page;
        Integer total = [SELECT count() FROM Contact];
        // create a instance of wrapper class.
        ContactPagerWrapper obj =  new ContactPagerWrapper();
        // set the pageSize,Page(Number), total records and accounts List(using OFFSET)   
        obj.pageSize = pageSize;
        obj.page = page;
        obj.total = total;
        for(Contact c:[SELECT Name,Display_Pic__c,Profile_Pic__c, Account.Name, Title FROM Contact ORDER BY Name LIMIT :recordToDisply OFFSET :offset]){
            modifiedList.add(new ContactPagerWrapper(false,c));
        }
        
        obj.contacts = modifiedList;
        obj.range = offset+1;
        obj.recordEnd = total >= recordEnd ? recordEnd : total;
        //obj.isChecked = isChecked;
        // return the wrapper class instance .
        return obj;
    }
    
    // create a wrapper class with @AuraEnabled Properties    
    public class ContactPagerWrapper {
        //@AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Integer pageSize {get;set;}
        @AuraEnabled public Integer page {get;set;}
        @AuraEnabled public Integer total {get;set;}
        @AuraEnabled public Integer range {get;set;}
        @AuraEnabled public Integer recordEnd {get;set;}
        @AuraEnabled public List<ContactPagerWrapper> contacts {get;set;}
        @AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Contact objContact{get;set;}
        public ContactPagerWrapper(boolean isChecked, Contact objContact){
            this.isChecked = isChecked;
            this.objContact = objContact;
        }
        public ContactPagerWrapper(){
            
        }
        
    }
}


I know the code is very long. but Plzz help me..
I am making an after undelete trigger for restoring the records on the same position as it was on before deleting & for that I need the  old value of a sequence number field(custom field). I have a custom number field which I am incrementing sequentially using insert trigger. Suppose I have 5 records who're having sequence num 1,2,3,4,5 and now if I delete one record(say 3) I rearranged the list to 1,2,3,4 using the delete trigger but now if i want to restore it back to the same position after undelete what should I do plz help...
I hope u understand my question. Please help as I am very very new to Lightning web component. Is there any way to insert both these using uiRecordApi ???? if yes plz explain how.
I need to generate pdf from a button in my aura component and also want the data in table format in pdf. plz help me. I have searchd alot on google & got one solution but facing error in that solution also. please help me..
I am not able to figure out anything. I used splice method to remove the item from array but it is not removing that item of the checkbox which I am unchecking. Please help If there is any other solution.
Please helpppppp what I am missing

component code:- 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:hasRecordId" access="global"
                controller="fetchAllContacts">
    
    <!-- Attribute Declration For Pagination -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
    
    <aura:attribute name="contacts" type="Contact[]"/>
    <aura:attribute name="page" type="integer" description="using for store page Number"/>
    <aura:attribute name="pages" type="integer" description="using for store All Pages page Number"/>
    <aura:attribute name="total" type="integer" description="total records count store "/>
    <aura:attribute name="range" type="integer" description="range "/>
    <aura:attribute name="recordEnd" type="Integer"/>
    <aura:attribute name="isSelectAll" type="boolean" default="false"/>
    <aura:attribute name="selectedCount" type="integer" default="0"/>
    <aura:attribute name="pageSize" type="Integer"/>

 <!--TABLE HEADER-->
    
    <lightning:card>
        <thead>    
            <tr class="slds-text-title_caps">
                
                
                
                
                &nbsp;   <th>
                
                <label class="slds-checkbox">
                    <ui:inputCheckbox value="{!v.isSelectAll}" change="{!c.handleSelectAllContact}" aura:id="selectAll"/>
                    <span class="slds-checkbox--faux" />
                    <span class="slds-form-element__label"></span>
                </label>
             
                </th>
              
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<th scope="col">
                <div style="font-size: 15px;">
                    
                    <div class="slds-truncate" title="Name">Contacts</div>
                    
                </div>
                </th>
           
            </tr>

        </thead>  
    </lightning:card>

<!--TABLE-->
    
    <div style="height:575px;">
        <div class="slds-scrollable_y " style="height:100%; width:100%;">
            <table aura:id="table" selectedRows="{!v.selection}" class="slds-table slds-table_fixed-layout">
                
                
                
                <tbody>
                    
                    <aura:iteration items="{!v.contacts}" var="item"> 
                        <tr>
                            <lightning:card variant="Narrow"> 
                                <th>
                                    <label class="slds-checkbox">
                                        <ui:inputCheckbox aura:id="singleCB"  value="{!item.isChecked}" text="{!item.objContact.Id}" change="{!c.checkboxSelect}"  />
                                        <span class="slds-checkbox--faux" />
                                        <span class="slds-form-element__label"></span>
                                    </label>
                                </th>
                                
                                
                                
                                <td>
                                    
                                    <a target="_blank" href="{!'/'+item.objContact.Id}"><div style="height:180px; width:180px;"><aura:unescapedHtml value="{!item.objContact.Profile_Pic__c}" /></div></a>
                                    
                                </td>
                                
                                
                                <th>
                                    <div style="font-size: 17px;">
                                        <div class="slds-truncate" title="{!item.objContact.Name}">
                                            Name: <a href="{!'/'+item.objContact.Id}">{!item.objContact.Name}</a>
                                        </div>
                                        <div class="slds-truncate" title="{!item.objContact.Account.Name}">
                                            Account Name: <a href="{!'/'+item.objContact.AccountId}">{!item.objContact.Account.Name}</a>
                                        </div>
                                        <div class="slds-truncate" title="{!item.objContact.Title}">Title: {!item.objContact.Title}</div>
                                    </div>
                                </th>
                            </lightning:card>    
                        </tr>
                        
                        <!--  <ui:outputRichText value="{!item.Profile_Pic__c}"/>-->
                    </aura:iteration>
                    
                    
                </tbody>
            </table>
        </div>
    </div>
    
    <!--FOOTER-->

<lightning:card>
        
        <aura:set attribute="footer">
            <lightning:layout horizontalAlign="spread"> 
                
                <lightning:layoutItem  >
                    <span class="slds-badge slds-badge_lightest">
                        <p class="slds-truncate">{!v.range}-{!v.recordEnd} of {!v.total} Contacts &nbsp; </p>
                    </span>
                </lightning:layoutItem>
                <lightning:layoutItem  >
                    
                    <div class="slds-p-left_xx-small">
                        
                        <ui:inputSelect aura:id="recordSize" label="Show Records " change="{!c.onSelectChange}">
                            <ui:inputSelectOption text="5" label="5" value="true"/>
                            <ui:inputSelectOption text="10" label="10"/>
                            <ui:inputSelectOption text="20" label="20"/>
                            <ui:inputSelectOption text="50" label="50"/>
                        </ui:inputSelect>
                    </div>
                </lightning:layoutItem>
                
                
                <lightning:layoutItem>
                    <div class="slds-p-right_xx-small">
                        <lightning:button disabled="{!v.page == 1}" variant="brand" label="Previous Page" onclick="{! c.navigate }" />            
                        <lightning:button disabled="{!v.page == v.pages}" aura:id="previousPage" variant="brand" label="Next Page" onclick="{! c.navigate }" />
                    </div>
                </lightning:layoutItem>
                
                
                <lightning:layoutItem  >
                    <span class="slds-badge slds-badge_lightest">
                        <p>Page {!v.page} of {!v.pages}</p></span>
                </lightning:layoutItem>                    
  
                
            </lightning:layout>
        </aura:set>

    </lightning:card> 
        
    <br/>
    
    
     display total record and selected record count    
            <p class="slds-m-around_small">
                <span class="slds-badge slds-badge_lightest" style="display:inline-block">
                    Total Records : {!v.selectedCount > 0 ? v.selectedCount + '/' : ''} {!v.total} 
                </span>
            </p>
    
</aura:component>

js code:-

({
    doInit: function(component, event, helper) {
        // this function call on the component load first time     
        // get the page Number if it's not define, take 1 as default
        //console.log('error'+page);
        
        var page = component.get("v.page") || 1;
                console.log('error'+page);

        // get the select option (drop-down) values.   
        var recordToDisply = component.find("recordSize").get("v.value");
                console.log('error'+recordToDisply);

        // call the helper function   
        helper.getContacts(component, page, recordToDisply);
        
    },
    
    //Select all contacts
    handleSelectAllContact: function(component, event, helper) {
        var checkAllList = [];
        var listOfContacts = component.get("v.contacts");
        //var checkvalue = component.find("selectAll").get("v.value"); 
        var selectedHeaderCheck = event.getSource().get("v.value");       
       // var checkContact = component.find("checkContact"); 
        //if(checkvalue == true){
            for(var i=0; i<listOfContacts.length; i++){
                if(selectedHeaderCheck == true){
                    listOfContacts[i].isChecked = true;
                //checkContact[i].set("v.value",true);    
                component.set("v.selectedCount", listOfContacts.length);
            }
            
        else{ 
                listOfContacts[i].isChecked = false;
                //checkContact[i].set("v.value",false);
                component.set("v.selectedCount", 0);  
            }
                checkAllList.push(listOfContacts[i]);
        }
        
        
        component.set("v.contacts", checkAllList);
    },
     
    checkboxSelect: function(component, event, helper) {
       // var selectedCheckList = [];
        //console.log('l'+selectedCheckList);
        //var checkLength = component.find("checkContact");
        var selectedRec = event.getSource().get("v.value");
       // var checkContact = event.getSource().get("v.value");
        //console.log('checkContactlelo'+checkContact);
        var getSelectedNumber = component.get("v.selectedCount");
        console.log('n'+getSelectedNumber);
       
        if(selectedRec == true){
                getSelectedNumber++;
           // selectedCheckList.push(checkContact);
          //  console.log('checkContact'+checkContact.get("v.value"));
        } else {
            getSelectedNumber--;
           // selectedCheckList.pop(checkContact);
            component.find("selectAll").set("v.value", false);
            
        }
     
  
        component.set("v.selectedCount", getSelectedNumber);
        // if all checkboxes are checked then set header checkbox with true   
        if (getSelectedNumber == component.get("v.pageSize")) {
            component.find("selectAll").set("v.value", true);
        }
        
    },

    
    
    navigate: function(component, event, helper) {
        // this function call on click on the previous page button 
         
        var page = component.get("v.page") || 1;
        // get the previous button label  
        var direction = event.getSource().get("v.label");
        // get the select option (drop-down) values.  
        var recordToDisply = component.find("recordSize").get("v.value");
        // set the current page,(using ternary operator.)  
        page = direction === "Previous Page" ? (page - 1) : (page + 1);
        // call the helper function
        
        helper.getContacts(component, page, recordToDisply);
        
    },
    
    onSelectChange: function(component, event, helper) {
        // this function call on the select opetion change,     
        var page = 1
        var recordToDisply = component.find("recordSize").get("v.value");
        helper.getContacts(component, page, recordToDisply);
    },
    
})

helper js:

({
   getContacts: function(component, page, recordToDisply) {
      // create a server side action. 
      
      var action = component.get("c.fetchContact");
      // set the parameters to method 
      action.setParams({
         "pageNumber": page,
         "recordToDisply": recordToDisply
      });
      // set a call back   
      action.setCallback(this, function(a) {
         // store the response return value (wrapper class insatance)  
         var result = a.getReturnValue();
         console.log('result ---->' + JSON.stringify(result));
         // set the component attributes value with wrapper class properties.   
         
         component.set("v.contacts", result.contacts);
         component.set("v.page", result.page);
         component.set("v.total", result.total);
         component.set("v.pages", Math.ceil(result.total / recordToDisply));
          component.set("v.range", result.range);
          component.set("v.recordEnd", result.recordEnd);
           component.set("v.selectedCount" , 0);
          component.set("v.pageSize", result.pageSize);
         //  component.set("v.isChecked", result.isChecked);
            //component.set("v.isSelectAll", false); 
      });
      // enqueue the action 
      $A.enqueueAction(action);
   }
})

apex class controller:

public with sharing class fetchAllContacts {
    
    @AuraEnabled    
    public static ContactPagerWrapper fetchContact(Decimal pageNumber ,Integer recordToDisply) {
        List<ContactPagerWrapper> modifiedList = new List<ContactPagerWrapper>();
        Integer pageSize = recordToDisply;
        Integer offset = ((Integer)pageNumber - 1) * pageSize;
       // boolean isChecked = true; 
        Integer page = (Integer) pageNumber;
        Integer recordEnd = pageSize * page;
        Integer total = [SELECT count() FROM Contact];
        // create a instance of wrapper class.
        ContactPagerWrapper obj =  new ContactPagerWrapper();
        // set the pageSize,Page(Number), total records and accounts List(using OFFSET)   
        obj.pageSize = pageSize;
        obj.page = page;
        obj.total = total;
        for(Contact c:[SELECT Name,Display_Pic__c,Profile_Pic__c, Account.Name, Title FROM Contact ORDER BY Name LIMIT :recordToDisply OFFSET :offset]){
            modifiedList.add(new ContactPagerWrapper(false,c));
        }
        
        obj.contacts = modifiedList;
        obj.range = offset+1;
        obj.recordEnd = total >= recordEnd ? recordEnd : total;
        //obj.isChecked = isChecked;
        // return the wrapper class instance .
        return obj;
    }
    
    // create a wrapper class with @AuraEnabled Properties    
    public class ContactPagerWrapper {
        //@AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Integer pageSize {get;set;}
        @AuraEnabled public Integer page {get;set;}
        @AuraEnabled public Integer total {get;set;}
        @AuraEnabled public Integer range {get;set;}
        @AuraEnabled public Integer recordEnd {get;set;}
        @AuraEnabled public List<ContactPagerWrapper> contacts {get;set;}
        @AuraEnabled public boolean isChecked {get;set;}
        @AuraEnabled public Contact objContact{get;set;}
        public ContactPagerWrapper(boolean isChecked, Contact objContact){
            this.isChecked = isChecked;
            this.objContact = objContact;
        }
        public ContactPagerWrapper(){
            
        }
        
    }
}


I know the code is very long. but Plzz help me..
I hope u understand my question. Please help as I am very very new to Lightning web component. Is there any way to insert both these using uiRecordApi ???? if yes plz explain how.