June 30, 2019

How to close the quick action popup and refresh the page from custom Salesforce Lightning Component?

Use the below methods to close the quick action popup and refresh the page from custom Salesforce Lightning Component.

                $A.get("e.force:closeQuickAction").fire();

                $A.get('e.force:refreshView').fire();

Sample code:

Component:


  1. <aura:component implements="force:hasRecordId,force:lightningQuickActionWithoutHeader" controller="Sample" >  
  2.       
  3.     <div class="slds-box slds-theme_default">   
  4.         <ui:button aura:id="mybtn" class="slds-button slds-button--brand slds-size--1-of-1" label="Testing" press="{!c.onclick}" />  
  5.     </div>  
  6.       
  7. </aura:component>  

Component Controller:


  1. ({      
  2.       
  3.     onclick : function(component, event, helper) {  
  4.           
  5.         var action = component.get( "c.firstMethod" );  
  6.         action.setCallback(this, function(response){  
  7.             var state = response.getState();  
  8.             if (state === "SUCCESS") {  
  9.                   
  10.                 alert( response.getReturnValue() );  
  11.                 $A.get("e.force:closeQuickAction").fire();  
  12.                 $A.get('e.force:refreshView').fire();  
  13.                   
  14.             }  
  15.         });  
  16.         $A.enqueueAction(action);  
  17.           
  18.     }  
  19.       
  20. })  

Apex Class:


  1. public class Sample {  
  2.   
  3.     @AuraEnabled  
  4.     public static String firstMethod() {  
  5.         return 'Success';  
  6.     }  
  7.   
  8. }  

Output:





June 29, 2019

How to use ternary operator in Visualforce page?

Visualforce page doesn't support ternary operator. But, Apex support.

Visualforce page supports IF function. We can achieve the same using this.

Syntax:

IF ( logical_test, value_if_true, value_if_false )

Example:

{! IF( Account.Size__c == null, '10', Account.Size__c ) }

In the above example, if the Account's Size is null, it will default to 10. Else, it will display the Account's size.

June 28, 2019

@AuraEnabled( cacheable = true )

To improve runtime performance, set @AuraEnabled(cacheable=true) to cache the method results on the client. To set cacheable=true, a method must only get data. It can’t mutate data.

Marking a method as storable improves your component’s performance by quickly showing cached data from client-side storage without waiting for a server trip. If the cached data is stale, the framework retrieves the latest data from the server. Caching is especially beneficial for users on high-latency, slow, or unreliable connections, such as 3G networks.

Prior to Winter ’19, to cache data returned from an Apex method, you had to call setStorable() in JavaScript code on every action that called the Apex method. Now you can mark the Apex method as storable (cacheable) and get rid of any setStorable() calls in JavaScript code.

Example - http://www.infallibletechie.com/2019/03/how-to-invoke-apex-controller-from.html

June 24, 2019

Simple lightning-datatable using Lightning Web Component LWC in Salesforce

Component HTML:


  1. <template>  
  2.       
  3.     <lightning-card title = "Search Accounts" icon-name = "custom:custom63">  
  4.   
  5.         <div class = "slds-m-around_medium">  
  6.   
  7.             <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >  
  8.             </lightning-input>  
  9.   
  10.             <template if:true = {accounts}>  
  11.                   
  12.                 <div style="height: 300px;">  
  13.   
  14.                     <lightning-datatable key-field="id"  
  15.                                          data={accounts}  
  16.                                          columns={columns}  
  17.                                          hide-checkbox-column="true"  
  18.                                          show-row-number-column="true">  
  19.                     </lightning-datatable>  
  20.   
  21.                 </div>                   
  22.       
  23.             </template>  
  24.       
  25.             <template if:true = {error}>  
  26.   
  27.                 {error}>  
  28.                   
  29.             </template>  
  30.   
  31.         </div>  
  32.   
  33.     </lightning-card>  
  34.   
  35. </template>  

Component JAVASCRIPT:


  1. import { LightningElement, track } from 'lwc';  
  2. import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';  
  3.   
  4. const columns = [  
  5.     { label: 'Id', fieldName: 'Id' },  
  6.     { label: 'Name', fieldName: 'Name' },  
  7.     { label: 'Industry', fieldName: 'Industry' },  
  8. ];  
  9.   
  10. export default class accountSearchLWC extends LightningElement {  
  11.   
  12.     @track accounts;  
  13.     @track error;  
  14.     @track columns = columns;  
  15.   
  16.     handleKeyChange( event ) {  
  17.           
  18.         const searchKey = event.target.value;  
  19.   
  20.         if ( searchKey ) {  
  21.   
  22.             fetchAccounts( { searchKey } )    
  23.             .then(result => {  
  24.   
  25.                 this.accounts = result;  
  26.   
  27.             })  
  28.             .catch(error => {  
  29.   
  30.                 this.error = error;  
  31.   
  32.             });  
  33.   
  34.         } else  
  35.         this.accounts = undefined;  
  36.   
  37.     }  
  38.   
  39. }  

Apex Class:


  1. public with sharing class AccountController {  
  2.   
  3.     @AuraEnabled( cacheable = true )  
  4.     public static List< Account > fetchAccounts( String searchKey ) {  
  5.       
  6.         String strKey = '%' + searchKey + '%';  
  7.         return [ SELECT Id, Name, Industry FROM Account WHERE Name LIKE: strKey LIMIT 10 ];  
  8.           
  9.     }  
  10.       
  11. }  

Output:


June 21, 2019

Simple Hide and Show in Lightning Web Component in Salesforce

Sample Code:

Component HTML:

  1. <template>  
  2.       
  3.     <lightning-button variant="brand" label={clickedButtonLabel} title="Show" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>  
  4.   
  5.     <template if:true={boolVisible}>  
  6.   
  7.         <div>Testing Hide and Show</div>  
  8.           
  9.     </template>  
  10.   
  11. </template>  

Component JAVASCRIPT:

  1. import { LightningElement, track } from 'lwc';  
  2.   
  3. export default class HideAndShowLWC extends LightningElement {  
  4.   
  5.     @track clickedButtonLabel = 'Show';  
  6.     @track boolVisible = false;  
  7.   
  8.     handleClick(event) {  
  9.         const label = event.target.label;  
  10.   
  11.         if ( label === 'Show' ) {  
  12.   
  13.             this.clickedButtonLabel = 'Hide';  
  14.             this.boolVisible = true;  
  15.   
  16.         } else if  ( label === 'Hide' ) {  
  17.               
  18.             this.clickedButtonLabel = 'Show';  
  19.             this.boolVisible = false;  
  20.   
  21.         }  
  22.     }  
  23.   
  24. }  

Output: