A blog about Salesforce CRM Configuration and development

Wednesday, 16 January 2019

Super fast records searching in the lightning component.

Lightning component client-side searching/filter.
Hello Everyone,

We generally make the server call to search the records in the table on the lighting component/VF page. As we know that the concept of Lightning Component development is based on reducing the server calls, so I have demonstrated client-side record filter/search in this lightning component. 


Component
 <aura:component controller="ListComponentCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>  
   <aura:attribute name="data" type="Contact[]" />  
   <aura:attribute name="UnfilteredData" type="Contact[]" />  
   <aura:attribute name="filter" type="String" />  
   <aura:handler name="change" value="{!v.filter}" action="{!c.doFilter}" />  
   <div class="slds-page-header">My Contacts</div>  
   <lightning:input name="x" value="{!v.filter}" label="Filter" placeholder="Search Contact by "/>  
   <table class="slds-table slds-table--bordered">  
     <thead>  
       <tr>  
         <th>Id</th>  
         <th>Name</th>  
         <th>Email</th>  
       </tr>  
     </thead>  
     <tbody>  
       <aura:iteration items="{!v.data}" var="row" indexVar="rowIndex">  
         <tr>  
           <td>{!row.Id}</td>  
           <td>{!row.Name}</td>  
           <td>{!row.Email}</td>  
         </tr>  
       </aura:iteration>  
     </tbody>  
   </table>   
 </aura:component>  
JS Controller
 ({  
   doInit :function(component,event,helper){  
     // Apex method definition  
     var action = component.get("c.loadData");  
     // callbak function  
     action.setCallback(this,function(response){  
       //get state  
       var state = response.getState();  
       // check if state is 'SUCCESS'  
       if(state == 'SUCCESS'){  
         var result = response.getReturnValue();  
         //set value to "UnfilteredData" attaribute   
         component.set("v.UnfilteredData",result);  
         console.log(result);  
         // set value to "data" attaribute  
         component.set("v.data",result);  
       }else{  
         console.log('something bad happend! ');  
       }  
     });  
     // put the action into queue for server call.  
     $A.enqueueAction(action);  
   },  
   doFilter: function(component, event, helper) {  
     //calling helper  
     helper.FilterRecords(component);  
   }  
 })  
JS Controller Helper
 ({  
   FilterRecords: function(component) {  
     //data showing in table  
     var data = component.get("v.data");  
     // all data featched from apex when component loaded  
     var allData = component.get("v.UnfilteredData");  
     //Search tems  
     var searchKey = component.get("v.filter");  
     // check is data is not undefined and its lenght is greater than 0  
     if(data!=undefined || data.length>0){  
       // filter method create a new array tha pass the test (provided as function)  
       var filtereddata = allData.filter(word => (!searchKey) || word.Name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1);  
       console.log('** '+filtereddata);  
     }  
     // set new filtered array value to data showing in the table.  
     component.set("v.data", filtereddata);  
     // check if searchKey is blank  
     if(searchKey==''){  
       // set unfiltered data to data in the table.  
       component.set("v.data",component.get("v.UnfilteredData"));  
     }  
   }  
 })  
Apex Controller
 public class ListComponentCntrl {  
   @AuraEnabled  
   public static List<Contact> loadData(){  
     List<Contact> conList = [select Id,Name,Email from Contact order by Name asc];  
     return conList;  
   }  
 }  


Reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Hope this blog post helps many.

Happy Coding... :)
Share:

Friday, 11 January 2019

Make beautiful,dynamic report chart using Chart JS in Salesforce.

Make beautiful,dynamic report chart using Chart JS in Salesforce.
What is Chart JS? - It is an open source javascript library that can be used to draw different types of chart with the help of the HTML 5 canvas element. 

We can use this javascript library in the Visualforce page to draw the chart on the page. We have to include the script in the <head> tag.


Visualforce Page:
 <apex:page sidebar="false" showHeader="false" controller="ChartCntrl">  
   <html>  
     <head>  
       <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />  
       <apex:slds />  
       <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"/>  
       <style>  
         .chart1{ width:450px; height:300px; border:1px solid rgb(216, 221, 230); border-radius:5px; }  
         .chart2{position:absolute; width:470px; height:500px; border:1px solid rgb(216, 221, 230); border-radius:5px; }  
       </style>  
     </head>  
     <body>  
       <div class="slds">  
         <div class="slds-page-header"><div class="slds-text-heading--large">Reporting Chart</div></div>  
         <div class="slds-grid">  
           <div class="slds-col slds-size--6-of-12" style="border:1px solid rgb(216, 221, 230); border-radius:5px; ">  
             <canvas id="myChart" width="300" height="300"></canvas>  
           </div>  
           <div class="slds-col slds-size--6-of-12" style="border:1px solid rgb(216, 221, 230); border-radius:5px; ">  
             <canvas id="myChart1" width="300" height="300"></canvas>  
           </div>  
         </div>  
         <script>  
         var ctx = document.getElementById("myChart");  
         var array1=new Array();  
         var array2=new Array();  
         var LeadLabel=new Array();  
         var LeadData=new Array();  
         var AccountLabel=new Array();  
         var AccountData=new Array();  
         <apex:repeat value="{!Lead_Label}" var="ld">  
           LeadLabel.push("{!ld}");  
         </apex:repeat>  
         <apex:repeat value="{!Lead_Data}" var="dt">  
           LeadData.push("{!dt}");  
         </apex:repeat>  
         //('lead '+LeadData);  
         <apex:repeat value="{!Account_Label}" var="al">  
           AccountLabel.push("{!al}");  
         </apex:repeat>  
         <apex:repeat value="{!Account_Data}" var="ad">  
           AccountData.push("{!ad}");  
         </apex:repeat>  
         <apex:repeat value="{!data}" var="d">  
           array1.push("{!d}");  
         </apex:repeat>  
         <apex:repeat value="{!label}" var="l">  
           array2.push("{!l}");  
         </apex:repeat>  
         var background_color=new Array();  
         var border_color=new Array();  
         for(var i=0 ; i<array1.length ; i++)  // Random colors
         {  
           var w,x,y,z;  
           w = parseInt(Math.random()*255);  
           x = parseInt(Math.random()*255);  
           y = parseInt(Math.random()*255);  
           z = Math.random();  
           background_color.push('rgba('+w+','+x+','+y+','+z+')');  
           border_color.push('rgba(0,0,0,1)');  
         }  
         var myChart = new Chart(ctx, {  
           type: 'pie',  
           data: {  
             labels: array2,  
             datasets: [{  
               label: '# of Votes',  
               data: array1,  
               backgroundColor: background_color,  
               borderColor: border_color,  
               borderWidth: 1  
             }]  
           }  
         });  
         </script>  
         <!--2nd Canvas--------------------->  
         <script>  
         var ctx = document.getElementById("myChart1");  
         var myChart = new Chart(ctx, {  
           type: 'bar',  
           data: {  
             labels: AccountLabel,  
             datasets: [{  
               label: '# of Account',  
               data: AccountData,  
               backgroundColor: background_color,  
               borderColor: border_color,  
               borderWidth: 1  
             }]  
           },  
           options: {  
             scales: {  
               yAxes: [{  
                 ticks: {  
                   beginAtZero:true  
                 }  
               }]  
             }  
           }  
         });  
         </script>  
       </div>  
     </body>  
   </html>  
 </apex:page>  
The HTML 5 <canvas> tag is used to drag graphis/chats on the web page.
 <canvas id="myChart" width="300" height="300"></canvas>  
Below script will draw the chart on the canvas and here SFDC data fetched from Apex controller and passed as an array in the script below.
 var ctx = document.getElementById("myChart"); // canvas element  
         var myChart = new Chart(ctx, {  
           type: 'pie', //chart type  
           data: {  
             labels: array2, // label from array2  
             datasets: [{  
               label: '# of Votes',  
               data: array1, // data from array2  
               backgroundColor: background_color, // background color  
               borderColor: border_color, // border color  
               borderWidth: 1 // border width  
             }]  
           }  
         });  
Apex Controller:
 public with sharing class ChartCntrl {  
   public list<string> label{get;set;}  
   public list<integer> data{get;set;}  
   public list<string> Lead_Label{get;set;}  
   public list<Integer> Lead_Data{get;set;}  
   public list<string> Account_Label{get;set;}  
   public list<Integer> Account_Data{get;set;}  
   public list<opportunity> oppList{get;set;}  
   public ChartCntrl (){  
     label=new list<string>();  
     data=new list<integer>();  
     Lead_Label=new List<string>();  
     Lead_Data=new List<integer>();  
     Account_Label=new List<string>();  
     Account_Data=new List<integer>();  
     generateData();  
     GenerateLeadData();  
     GenerateAccountData();  
   }  
    public void generateData(){  
   AggregateResult[] groupedResults = [SELECT StageName, Count(Id) cnt FROM Opportunity group by StageName];  
     for (AggregateResult ar : groupedResults)   
     {  
        label.add((string)ar.get('StageName'));  
        data.add((integer)ar.get('cnt'));  
     }  
   }  
   public void GenerateLeadData(){  
     AggregateResult[] groupedResults = [SELECT Status, Count(Id) cnt FROM Lead group by Status limit 5];  
     system.debug(groupedResults);  
     for (AggregateResult ar : groupedResults)   
     {  
        Lead_Label.add((string)ar.get('Status'));  
        Lead_Data.add((integer)ar.get('cnt'));  
     }  
     system.debug(Lead_Label);  
     system.debug(Lead_Data);  
   }  
   public void GenerateAccountData(){  
     AggregateResult[] groupedResults = [SELECT AccountSource, Count(Id) cnt FROM Account group by AccountSource ];  
     system.debug(groupedResults);  
     for (AggregateResult ar : groupedResults)   
     {  
        Account_Label.add((string)ar.get('AccountSource'));  
        Account_Data.add((integer)ar.get('cnt'));  
     }  
   }  
 }  


Output:



Reference Link:

https://www.chartjs.org/docs/latest/
Share:

How to attach visualforce component as an attachment ( pdf ) in Visualforce email template.

Hello Guys,

In this blog post, I am going to demonstrate a use case of Visualforce email template.

Why Visualforce template? - The Visulforce template is useful when need to do the advanced operation on data that is sent via email to the recipient. The Visualforce email template uses standard visualforce component. We can also include our custom Visualforce component in the Visualforce email template that makes this template more advanced and dynamic.

The Visualforce email template contained in the <messaging:emailTemplate> tag. The <messaging:emailTemplate> tag must contains either a single <messaging:htmlEmailBody> tag or a single <messaging:plainTextEmailBody> tag.

Many standard visualforce components cannot be used in the <messaging:emailTemplate> like <apex:detail>,<apex:pageBlock>, all input component, etc.

Scenario: Send an email to the client with attachment (pdf) as related list record detail. 

Here we can use <messaging:attachment> tag to attach the contents inside this tag, renderAs attribute responsible for rendering the content as pdf and filename is an attribute used to set attached file name in the email message.  
<c:ContractAttachment ContractId="{!relatedTo.Contracts[0].Id}"/>  
The above line is the custom visualforce component which is used here to show related list data which is going to be sent as an attachment in the visualforce email template. 

Visualforce Email Template:
 <messaging:emailTemplate subject="Testing VF template" recipientType="User" relatedToType="Account">  
   <messaging:attachment renderAs="pdf" filename="Contract" >     
     <c:ContractAttachment ContractId="{!relatedTo.Contracts[0].Id}"/>  
   </messaging:attachment>  
    <messaging:htmlEmailBody >  
       <html>  
         <body>  
           <p style="color:red;">Dear {!recipient.name},</p>  
           <p>Please find attached doc.</p>  
         </body>  
       </html>  
     </messaging:htmlEmailBody>  
 </messaging:emailTemplate>  
ContractAttachment visualforce component.
 <apex:component controller="ContractAttachmentCntrl" access="global">  
   <apex:attribute name="ContractId" description="This is the value for the component." type="String" assignTo="{!contId}" />  
   <html>  
     <head>  
     </head>  
     <body>  
       <table style="border-collapse: collapse; ">  
         <apex:repeat value="{!wrapperList}" var="row">  
           <tr style="border: 1px solid rgb(221, 219, 218); width:700px;">   
             <apex:repeat value="{!row.values}" var="value">  
               <td style="border: 1px solid rgb(221, 219, 218); padding: 15px; ">{!value}</td>  
               <td style="border: 1px solid rgb(221, 219, 218); padding: 15px;">  
                 {!row.values[value]}  
               </td>  
             </apex:repeat>  
           </tr>  
         </apex:repeat>  
       </table>  
     </body>  
   </html>  
 </apex:component>  
Apex Controller: ContractAttachmentCntrl
 public class ContractAttachmentCntrl {  
   //WrapperList  
   public List<Wrapper> wrapperList{get;set;}  
   public string contId{get;set{  
     contId = value;  
     wrapperList = new List<Wrapper>();  
     // getting Contract record Id from page URL  
     if(contId !=null){  
       Contract cont = [select id,Name,BillingAddress,Account.Name,CompanySignedId,CompanySignedDate,EndDate,ContractNumber,StartDate,  
                ContractTerm,CustomerSignedDate, CustomerSignedTitle,Description,ShippingAddress,SpecialTerms,  
                Status from Contract where id=:contId] ;  
       for (Integer idx=0; idx<15; idx++)  
       {  
         wrapperList.add(new Wrapper());  
       }  
       if(cont.Name!=null){  
         wrapperList[0].addValue('Name',cont.Name);  
       }  
       else{  
         wrapperList[0].addValue('Name','N/A');  
       }  
       if(cont.BillingAddress!=null){  
         Address addr = cont.BillingAddress;  
         wrapperList[1].addValue('Billing Street',addr.getStreet());  
       }else{  
         wrapperList[1].addValue('Billing Street','N/A');  
       }  
       if(Account.Name!=null ){  
         wrapperList[2].addValue('Name',cont.Account.Name);  
       }else{  
         wrapperList[2].addValue('Name','N/A');  
       }  
       if(cont.CompanySignedId !=null){  
         wrapperList[3].addValue('Company Signed Id',cont.CompanySignedId);  
       }else{  
         wrapperList[3].addValue('Company Signed Id','N/A');  
       }  
       if(cont.CompanySignedDate !=null){  
         wrapperList[4].addValue('Company SignedDate',String.valueOf(cont.CompanySignedDate));  
       }else{  
         wrapperList[4].addValue('Company SignedDate','N/A');  
       }  
       if(cont.EndDate !=null){  
         wrapperList[5].addValue('EndDate',String.valueOf(cont.EndDate));  
       }else{  
         wrapperList[5].addValue('EndDate','N/A');  
       }  
       if(cont.ContractNumber !=null){  
         wrapperList[6].addValue('Contract Number',String.valueOf(cont.ContractNumber));  
       }else{  
         wrapperList[6].addValue('Contract Number','N/A');  
       }  
       if(cont.StartDate !=null){  
         wrapperList[7].addValue('StartDate',String.valueOf(cont.StartDate));  
       }else{  
         wrapperList[7].addValue('StartDate','N/A');  
       }  
       if(cont.ContractTerm !=null){  
         wrapperList[8].addValue('ContractTerm',String.valueOf(cont.ContractTerm));  
       }else{  
         wrapperList[8].addValue('ContractTerm','N/A');  
       }  
       if(cont.CustomerSignedDate !=null){  
         wrapperList[9].addValue('CustomerSignedDate',String.valueOf(cont.CustomerSignedDate));  
       }else{  
         wrapperList[9].addValue('CustomerSignedDate','N/A');  
       }  
       if(cont.CustomerSignedTitle !=null){  
         wrapperList[10].addValue('CustomerSignedTitle',String.valueOf(cont.CustomerSignedTitle));  
       }else{  
         wrapperList[10].addValue('CustomerSignedTitle','N/A');  
       }  
       if(cont.Description !=null){  
         wrapperList[11].addValue('Description',String.valueOf(cont.Description));  
       }else{  
         wrapperList[11].addValue('Description','N/A');  
       }  
       if(cont.ShippingAddress !=null){  
         Address addr = cont.ShippingAddress;  
         wrapperList[12].addValue('ShippingAddress',String.valueOf(addr.getStreet()));  
       }else{  
         wrapperList[12].addValue('ShippingAddress','N/A');  
       }  
       if(cont.SpecialTerms !=null){  
         wrapperList[13].addValue('SpecialTerms',String.valueOf(cont.SpecialTerms));  
       }else{  
         wrapperList[13].addValue('SpecialTerms','N/A');  
       }  
       if(cont.Status !=null){  
         wrapperList[14].addValue('Status',String.valueOf(cont.Status));  
       }else{  
         wrapperList[14].addValue('Status','N/A');  
       }  
     }  
   }}  
   public void setcontId(string value){  
     system.debug('value: ' +value);  
     contId = value;  
   }  
   //Constructor  
   public ContractAttachmentCntrl(){  
   }  
   //Wrapper class  
   public class Wrapper{  
     public Map<String,string> values {get; set;}  
     // constructor  
     public Wrapper()  
     {  
       values = new Map<String,String>();  
     }  
     //Wrapper method  
     public void addValue(String Name, String Value)  
     { //put data in values map.  
       values.put(Name,Value);  
     }  
   }  
 }  
Share:
Trailhead Profile


Follow by Email

Total Pageviews

Followers

Popular Posts

Powered by Blogger.

Contact form

Name

Email *

Message *