+ Start a Discussion
Aishwarya Bhat 1Aishwarya Bhat 1 

load data for default tab uisng lightning tabset

Hello All,

I have used lightining tabset in which it contains 3 tabs :Leads , Contacts ,Custom Email .I want to display the list of records of leads and contacts But my issue is that initially for default tab I am not able to see the list of records. I am attching the code of the same.
########### COMPONENT########################

<aura:component controller="ContactPagination" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <ltng:require styles="/resource/slds/assets/styles/salesforce-lightning-design-system.css" />
     <aura:attribute name="listOFrecipients" type="SurveyBuilder__SurveyRecipient__c[]"/>
      <aura:attribute name="surveyId" type="String" />
    <aura:attribute name="name" type="string" />
    <aura:attribute type="Contact[]" name="paginationList" />
    <aura:attribute type="Lead[]" name="paginationListLeads" />
    <aura:attribute type="Integer" name="pageNumber" default="1" />
    <aura:attribute type="Integer" name="maxPage" default="1" />
    <aura:attribute type="String" name="CustomEmails"/>
    
     <aura:attribute name="selTabId" type="string"  />
    
    <aura:handler name="change" value="{!v.pageNumber}" action="{!c.renderPageLeads}" />
    
    <aura:handler name="change" value="{!v.pageNumber}" action="{!c.renderPage}" />
    
    <aura:attribute name="myLeadData" type="Object"/>
    
    <aura:attribute name="mydata" type="Object"/>
    
    <aura:attribute name="myLeadColumns" type="List"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <c:surveyHeader/>
    <div class="body">
        <div class="bodyContainer">
            <div class="black"></div>
            <div class="slds-size_8-of-8 dashbrdblock">
                
                <div class="sectionTitle">
                    Add Recipients to Survey
                </div>
                <div class="Outer-Box">
                    <div id="warn"  >
                        <ui:message title="Warning" severity="warning" >
                            Please select the recipient!
                        </ui:message>
                    </div>
                    <lightning:tabset selectedTabId="{!v.selTabId}" >
                        
                        <lightning:tab label="Lead" onactive="{!c.renderPageLeads}" id="1">
                            <div class="slds-list_horizontal"  style="padding:1%;">
                                <div class="slds-list_horizontal"  >
                                    <ui:inputText label="Name : " value="{!v.name}"/>
                                </div>
                                <div class="slds-list_horizontal"  >
                                    <ui:inputText label="   Email Address : "  value="{!v.name}" />
                                </div>
                                <button type="button" class="slds-button-neutral">Search</button> 
                                
                            </div>
                          
                            <lightning:datatable data="{! v.myLeadData }"
                                                 columns="{! v.myLeadColumns }"
                                                 keyField="id"
                                                 onrowselection="{! c.getSelectedNameOfLeads }"/>
                            <div class="pagination-box" style="float:right;">
                                <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}" />
                            </div>    
                            
                        </lightning:tab>
                        <lightning:tab label="Contact" onactive="{!c.renderPage}" id="2">
                            
                            <lightning:datatable data="{! v.mydata }"
                                                 columns="{! v.mycolumns }"
                                                 keyField="id"
                                                 onrowselection="{! c.getSelectedNameOfContacts }"/>
                            <div class="pagination-box" style="float:right;">
                                <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}" />
                            </div>
                        </lightning:tab>    
                        <lightning:tab label="Custom Email" id="3">
                          
                              <lightning:input class="input" name="Email" label="Enter Email" aura:id="listOfEmails" placeholder="Type emails separated by ','"/>
                        <lightning:button variant="brand" label="Save" title="Next" onclick="{! c.saveEmails }"/>

                        </lightning:tab>
                    </lightning:tabset>
                </div>
                 <div class="feild">
                <button type="button" onclick="{!c.sendSurvey}"  class="slds-button-neutral green-btn addnew-btn">Next</button> 
                <!--  <lightning:button onclick="{!c.createSurveyQuestion}" id="{!newSurvey.Id}" class="slds-button-neutral green-btn addnew-btn" label="Next" />-->
                <!--<lightning:button onclick="{!c.navigateToMQuestions}" class="green-btn default-btn" label="Next" />  -->
            </div>
            </div>
             
        </div>
    </div>
</aura:component>


####################### CONTROLLER ##############################

({init: function (cmp, event, helper) {
  
  
    cmp.set('v.myLeadColumns', [
        { label: 'Name', fieldName: 'Name', type: 'text'},
        { label: 'Phone', fieldName: 'Phone', type: 'phone'},
        { label: 'Email', fieldName: 'Email', type: 'email'}
    ]);

    helper.getData(cmp,event,helper);
    this.renderPageLeads(cmp,event,helper);
    
    cmp.set('v.mycolumns', [
        { label: 'Name', fieldName: 'Name', type: 'text'},
        { label: 'Phone', fieldName: 'Phone', type: 'phone'},
        { label: 'Email', fieldName: 'Email', type: 'email'}
    ]);
   
    helper.getData1(cmp,event,helper);

},
  renderPageLeads: function(cmp, event, helper) {
    
      //document.getElementById('warn').style.display = 'none';
 
      var records = cmp.get("v.paginationListLeads"),
         
          pageNumber = cmp.get("v.pageNumber"),
          pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
      cmp.set("v.myLeadData", pageRecords);
      alert("===>renderPageLeads" +records);
  },
  renderPage: function(cmp, event, helper) {
       document.getElementById('warn').style.display = 'none';
      var records = cmp.get("v.paginationList"),
          
          pageNumber = cmp.get("v.pageNumber"),
          pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
      cmp.set("v.mydata", pageRecords);
  },
  getSelectedNameOfLeads : function (cmp, event) {
        document.getElementById('warn').style.display = 'none';
      var selectedRows = event.getParam('selectedRows');
      var idx =cmp.get("v.surveyId");
      var action = cmp.get("c.addRecipentsLead");
      action.setParams({ "resObj" : selectedRows,
                        "surveyId":idx});
      action.setCallback(this, function(a) {
          
          var state = a.getState();
          if (state === "SUCCESS") {
              alert("Success Lead");
          }
          else
          {
              alert("Error Lead");
          }

      });
      $A.enqueueAction(action);
      // Display that fieldName of the selected rows
      
  },
  getSelectedNameOfContacts : function (cmp, event) {
            document.getElementById('warn').style.display = 'none';
      var selectedRows = event.getParam('selectedRows');
      var idx =cmp.get("v.surveyId");
      var action = cmp.get("c.addRecipentsContact");
      action.setParams({ "resObj" : selectedRows,
                        "surveyId":idx});
      action.setCallback(this, function(a) {
          
          var state = a.getState();
          if (state === "SUCCESS") {
              alert("Success Contact");
          }
          else
          {
              alert("Error Contact");
          }
          
          
          
      });
      $A.enqueueAction(action);
      // Display that fieldName of the selected rows
      
  },
  getSelectedName: function (cmp, event) {
       document.getElementById('warn').style.display = 'none';
      var selectedRows = event.getParam('selectedRows');
      var idx =cmp.get("v.surveyId");
      var action = cmp.get("c.addRecipentsCustom");
      action.setParams({ "resObj" : selectedRows,
                        "surveyId":idx});
      action.setCallback(this, function(a) {
          
          var state = a.getState();
          if (state === "SUCCESS") {
              alert("Success Contact");
          }
          else
          {
              alert("Error Contact");
          }
          
          
          
      });
      $A.enqueueAction(action);
      
      // Display that fieldName of the selected rows
      //  for (var i = 0; i < selectedRows.length; i++){
      //  alert(JSON.stringify(selectedRows[i]));
      //}
  },
  saveEmails:function(cmp,event){
      document.getElementById('warn').style.display = 'none';
      var listOfEmail=cmp.find("listOfEmails").get("v.value");
      
      // alert(listOfEmail);
      // var selectedRows = event.getParam('selectedRows');
      var idx =cmp.get("v.surveyId");
      var action = cmp.get("c.addRecipentsCustom");
      action.setParams({ "resObj" : listOfEmail,
                        "surveyId":idx});
      action.setCallback(this, function(a) {
          
          var state = a.getState();
          if (state === "SUCCESS") {
              alert("Success ");
          }
          else
          {
              alert("Error ");
          }
          
          
          
      });
      $A.enqueueAction(action);
      
      
  },
  sendSurvey: function(component, event, helper) {
      var idx1 =component.get("v.surveyId");
      var action = component.get("c.getRecipients");
      action.setParams({ 
          "surveyId":idx1});
      action.setCallback(this, function(a) {
          var response=a.getReturnValue();
          alert('So ja varna hastar aa jayega:::::::::'+JSON.stringify(response));
          var state = a.getState();
          if (state === "SUCCESS") {
              alert("Success ");
              if(response.length>0)
              {
                   document.getElementById('warn').style.display = 'none';
                  var evt = $A.get("e.force:navigateToComponent");
                  // var rec=  component.get("v.surveyId");
                  var idx =component.get("v.surveyId");
                  alert("Inside if" +idx);
                  alert("Survey id in create Survey :"+idx);
                  evt.setParams({ componentDef :"SurveyBuilder:sendSurvey" ,
                                 componentAttributes: {
                                     "surveyId": idx
                                 },});
                  evt.fire();
                
              }
              else
              {
                  
                   document.getElementById('warn').style.display = 'block';
              }
          }
          else
          {
              alert("Error ");
          }
          
          
          
      });
      $A.enqueueAction(action);
      
  }
 })



#############################Helper##############################

({
    getData1 : function(cmp,event,helper) {
        var action = cmp.get('c.getLds');
                
        
        action.setCallback(this, $A.getCallback(function (response) {
            
            var state = response.getState();
           
            var records = response.getReturnValue();
			
            cmp.set("v.paginationListLeads", records);

            cmp.set("v.maxPage", Math.floor((records.length+9)/10));
            
           
            
        }));
        $A.enqueueAction(action);
        
    },
    
    renderLeads: function(cmp,event,helper) {
    
      //document.getElementById('warn').style.display = 'none';
 
      var records = cmp.get("v.paginationListLeads"),
         
          pageNumber = cmp.get("v.pageNumber"),
          pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
      cmp.set("v.myLeadData", pageRecords);
  },
   
    getData : function(cmp) {
        var action = cmp.get('c.getCntcts');
		
        
              var records = cmp.get("v.paginationListLeads"),
         
          pageNumber = cmp.get("v.pageNumber"),
          pageRecords = records.slice((pageNumber-1)*10, pageNumber*10);
      cmp.set("v.myLeadData", pageRecords);
        
        action.setCallback(this, $A.getCallback(function (response) {
            
            var state = response.getState();
           
            var records = response.getReturnValue();
			
            cmp.set("v.paginationList", records);

            cmp.set("v.maxPage", Math.floor((records.length+9)/10));
            
             
           
        }));
        $A.enqueueAction(action);
    },
     
})

############################ Apex ################################

public with sharing class ContactPagination 
{

      @AuraEnabled
    public static List<Contact> getCntcts() {
        List<Contact> contacts =
                [SELECT Id, Name, Phone, Email FROM Contact limit 100];
        //Add isAccessible() check
        return contacts;
    }
    
          @AuraEnabled
    public static List<Lead> getLds() {
        List<Lead> leads =
                [SELECT Id, Name, Phone, Email FROM Lead limit 100];
        //Add isAccessible() check
        return leads;
    }
    @AuraEnabled
    public static void addRecipentsLead(List<Lead> resObj,String surveyId) {
       // SELECT Id, , SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c, , SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c
       for(Lead l :resObj )
       {
           List<SurveyBuilder__SurveyRecipient__c> existingRecipient =[SELECT Id, SurveyBuilder__SurveyId__c, SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c,  SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c where SurveyBuilder__email__c=:l.Email AND SurveyBuilder__SurveyId__c=:surveyId ];
           if(existingRecipient.size()==0){
           SurveyBuilder__SurveyRecipient__c sr = new SurveyBuilder__SurveyRecipient__c();
           sr.Name='xx';
           sr.SurveyBuilder__SurveyId__c=surveyId;
           sr.SurveyBuilder__email__c=l.Email;
           sr.SurveyBuilder__objectId__c=l.Id;
           sr.SurveyBuilder__typeOfRecipient__c='lead';
           sr.SurveyBuilder__Recipient_Name__c=l.Name;
               insert sr;
                 sr.Name=sr.Id;
                update sr;
           }

       }
    }
    
    @AuraEnabled
    public static void addRecipentsContact(List<Contact> resObj,String surveyId) {
        // SELECT Id, , SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c, , SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c
        for(Contact c :resObj )
        {
            List<SurveyBuilder__SurveyRecipient__c> existingRecipient =[SELECT Id, SurveyBuilder__SurveyId__c, SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c,  SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c where SurveyBuilder__email__c=:c.Email AND SurveyBuilder__SurveyId__c=:surveyId ];
            if(existingRecipient.size()==0){
                SurveyBuilder__SurveyRecipient__c sr = new SurveyBuilder__SurveyRecipient__c();
                sr.Name='xx';
                sr.SurveyBuilder__SurveyId__c=surveyId;
                sr.SurveyBuilder__email__c=c.Email;
                sr.SurveyBuilder__objectId__c=c.Id;
                sr.SurveyBuilder__typeOfRecipient__c='contact';
                sr.SurveyBuilder__Recipient_Name__c=c.Name;
                insert sr;
                sr.Name=sr.Id;
                update sr;
            }
            
        }
    }
    
         
    @AuraEnabled
    public static void addRecipentsCustom(List<String> resObj,String surveyId) {
        // SELECT Id, , SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c, , SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c
        for(String s :resObj )
        {
            List<SurveyBuilder__SurveyRecipient__c> existingRecipient =[SELECT Id, SurveyBuilder__SurveyId__c, SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c,  SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c where SurveyBuilder__email__c=:s AND SurveyBuilder__SurveyId__c=:surveyId ];
            if(existingRecipient.size()==0){
                SurveyBuilder__SurveyRecipient__c sr = new SurveyBuilder__SurveyRecipient__c();
                sr.Name='xx';
                sr.SurveyBuilder__SurveyId__c=surveyId;
                sr.SurveyBuilder__email__c=s;
              
                sr.SurveyBuilder__typeOfRecipient__c='custom';
               sr.SurveyBuilder__Recipient_Name__c='Custom Email';
                insert sr;
                  sr.Name=sr.Id;
                update sr;
            }
            
        }
    }
    @AuraEnabled
    public static   List<SurveyBuilder__SurveyRecipient__c> getRecipients(String surveyId) {
        // SELECT Id, , SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c, , SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c
        List<SurveyBuilder__SurveyRecipient__c> existingRecipient =[SELECT Id, SurveyBuilder__SurveyId__c, SurveyBuilder__email__c, SurveyBuilder__objectId__c, SurveyBuilder__typeOfRecipient__c,  SurveyBuilder__Recipient_Name__c, Name FROM SurveyBuilder__SurveyRecipient__c where  SurveyBuilder__SurveyId__c=:surveyId ];
        
        return  existingRecipient;           
    }
    
}

Thank you in advance.!
Raj VakatiRaj Vakati
You need to set the value to attribute 
 
<aura:attribute name="selTabId" type="string" value="Lead"  />


The complete code is here
 
<aura:component controller="ContactPagination" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
    <ltng:require styles="/resource/slds/assets/styles/salesforce-lightning-design-system.css" />
     <aura:attribute name="listOFrecipients" type="SurveyBuilder__SurveyRecipient__c[]"/>
      <aura:attribute name="surveyId" type="String" />
    <aura:attribute name="name" type="string" />
    <aura:attribute type="Contact[]" name="paginationList" />
    <aura:attribute type="Lead[]" name="paginationListLeads" />
    <aura:attribute type="Integer" name="pageNumber" default="1" />
    <aura:attribute type="Integer" name="maxPage" default="1" />
    <aura:attribute type="String" name="CustomEmails"/>
    
     <aura:attribute name="selTabId" type="string" value="Lead"  />
    
    <aura:handler name="change" value="{!v.pageNumber}" action="{!c.renderPageLeads}" />
    
    <aura:handler name="change" value="{!v.pageNumber}" action="{!c.renderPage}" />
    
    <aura:attribute name="myLeadData" type="Object"/>
    
    <aura:attribute name="mydata" type="Object"/>
    
    <aura:attribute name="myLeadColumns" type="List"/>
    <aura:attribute name="mycolumns" type="List"/>
    
    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
    
    <c:surveyHeader/>
    <div class="body">
        <div class="bodyContainer">
            <div class="black"></div>
            <div class="slds-size_8-of-8 dashbrdblock">
                
                <div class="sectionTitle">
                    Add Recipients to Survey
                </div>
                <div class="Outer-Box">
                    <div id="warn"  >
                        <ui:message title="Warning" severity="warning" >
                            Please select the recipient!
                        </ui:message>
                    </div>
                    <lightning:tabset selectedTabId="{!v.selTabId}" >
                        
                        <lightning:tab label="Lead" onactive="{!c.renderPageLeads}" id="1">
                            <div class="slds-list_horizontal"  style="padding:1%;">
                                <div class="slds-list_horizontal"  >
                                    <ui:inputText label="Name : " value="{!v.name}"/>
                                </div>
                                <div class="slds-list_horizontal"  >
                                    <ui:inputText label="   Email Address : "  value="{!v.name}" />
                                </div>
                                <button type="button" class="slds-button-neutral">Search</button> 
                                
                            </div>
                          
                            <lightning:datatable data="{! v.myLeadData }"
                                                 columns="{! v.myLeadColumns }"
                                                 keyField="id"
                                                 onrowselection="{! c.getSelectedNameOfLeads }"/>
                            <div class="pagination-box" style="float:right;">
                                <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}" />
                            </div>    
                            
                        </lightning:tab>
                        <lightning:tab label="Contact" onactive="{!c.renderPage}" id="2">
                            
                            <lightning:datatable data="{! v.mydata }"
                                                 columns="{! v.mycolumns }"
                                                 keyField="id"
                                                 onrowselection="{! c.getSelectedNameOfContacts }"/>
                            <div class="pagination-box" style="float:right;">
                                <c:Pagination currentPageNumber="{!v.pageNumber}" maxPageNumber="{!v.maxPage}" />
                            </div>
                        </lightning:tab>    
                        <lightning:tab label="Custom Email" id="3">
                          
                              <lightning:input class="input" name="Email" label="Enter Email" aura:id="listOfEmails" placeholder="Type emails separated by ','"/>
                        <lightning:button variant="brand" label="Save" title="Next" onclick="{! c.saveEmails }"/>

                        </lightning:tab>
                    </lightning:tabset>
                </div>
                 <div class="feild">
                <button type="button" onclick="{!c.sendSurvey}"  class="slds-button-neutral green-btn addnew-btn">Next</button> 
                <!--  <lightning:button onclick="{!c.createSurveyQuestion}" id="{!newSurvey.Id}" class="slds-button-neutral green-btn addnew-btn" label="Next" />-->
                <!--<lightning:button onclick="{!c.navigateToMQuestions}" class="green-btn default-btn" label="Next" />  -->
            </div>
            </div>
             
        </div>
    </div>
</aura:component>

 
Aishwarya Bhat 1Aishwarya Bhat 1
It is giving me this error while saving
Failed to save ContactPagination.cmp: SurveyBuilder:ContactPagination:12,67: Invalid attribute "value": Source