Visualforce – Get All Accounts Related to Name Written in Input field

To Achieve this Functionality, one needs to use Jquery.

In order to use Jquery , Upload Jquery Script as a Static resource in your Salesforce Organization and Use this Script in Visualforce Page.

In order to take understanding as how it works please refer to the following URL.

Here is the Controller and Visualforce Page.

<apex:page sidebar="false" controller="FindAccountRelated_To_Search_Ext" >
<apex:includeScript value="{!$Resource.JqueryScript}"/>

<apex:form >
<apex:pageBlock >
<apex:pageBlockSection >
Account Name : <input type="text" name="fname" id="SearchVal" />


<apex:pageBlock title="All Accounts" id="acc">

<apex:pageblockTable value="{!AllAccounts}" var="accs">

<apex:column value="{!accs.Id}" headervalue="Account Id"/>
<apex:column value="{!accs.Name}" headerValue="Account Name"/>


<apex:actionFunction action="{!RelatedAccounts}" name="searchrecords" reRender="acc" >
<apex:param name="serchval" value="serchval" assignTo="{!AccName}"/>

<script type = "text/javascript"> 
 var serchval = $(this).val();


public with sharing class FindAccountRelated_To_Search_Ext {

public String AccName {get;set;}
public List<Account> AccountList {get;set;}

public PageReference RelatedAccounts(){

return null;

public List<Account> getAllAccounts(){

AccountList = [Select ID,Name From Account Where Name LIKE : ('%'+AccName+'%') ];
return AccountList;


Some points which you should know for this Visualforce Page.

1 – Use Input Field for Name of Account.

2 – Use Pageblock Table or DataTable For Display Records.

3 – Use Keypress  Jquery Event to Get the Input.

4 – Use Action function to Send the Input Value to Controller.

5 – Use SOQL Query In controller to Get All Related Records as Written in Input Field.


Please Follow if you like my Blog and share your valuable inputs.




Apex Trigger – What is Recursion and Solutions to Avoid Recursion in Apex Trigger

Before moving on to Recursion in Apex, one needs to understand what is Apex Trigger.

Apex Trigger – Apex Trigger is a piece of code that executes Before and After a record is Inserted, Updated, Deleted in a Database.

Triggers are majorly used to Modify Same Records and Create or Updates Related Records, and configure Follow up Emails on Record Creation.

In order to take understanding as how “Apex Triggers” work and what other things we can do using “Apex Triggers” please refer to the following URL.

Once we have understanding as how Apex Triggers work we need to avoid “Recursion” in it.

What is“Recursion” in Apex Trigger?

Recursion is when same code is executing again and again & it exceeds the “Governor Limit”.

When Trigger is called Over and Over and It Exceed the Maximum Trigger Depth that is Called Recursive Trigger.

If we Try to Insert Account After Insertion of Account Using Trigger Then it Call again & again and Exceed the Governor Limit (Maximum Trigger Depth) and gives Exception

trigger RecursionExample on Account (After Insert) {


Account acc = new Account(Name = 'Recursive Account');

Insert acc;




This is common mistake that most of the Developers do, let us move to a Solution for the same.

How to Avoid Recursion or How can we Write Recursion Free Apex Trigger?

Write Apex Handler Class with Static Boolean Variable and Method and return true if Boolean Variable is true otherwise False .

Check in Apex Trigger if Handler class Method Return True Then Execute your Logic

public Class HandlerClass{

public static booleanRecursionHandler = True;

public static booleanHandlerMethod(){


RecursionHandler = False;

return true;



return RecursionHandler;




Apex Trigger in Which Handler Class Called.

trigger RecursionExample on Account (After Insert) {



Account acc = new Account(Name = 'Recursive Account');

Insert acc;





If you do not want to use Handler Class Method thenWrite Apex Handler Class with Static Boolean Variable and Check Handler Class Variable in Apex Trigger IF it is True then Execute Your Logic and Make it false So that Trigger Can not execute Again.

public Class HandlerClass{

public static booleanRecursionHandler = True;



trigger RecursionExample on Account (After Insert) {



HandlerClass.RecursionHandler = False;

Account acc = new Account(Name = 'Recursive Account');

Insert acc;







Salesforce Lightning – Design a Visualforce Page(Standard Account Creation Page) using Lightning design System

Before we move on to Visualforce Page in Lightning Design System users should know what is Lightning Design System?

Lightning Design System is a Pure CSS framework or it is a collection of design patterns, components and guidelines for creating unified UI in Salesforce ecosystem.

Lightning Design System along with Visualforce Build a Page in the Lightning UI Look and feel.

For more details, please check out the Lightning Design System

Using the Lightning Design System in Visualforce you Must have to Use Below 2 Tags

  1. <apex:slds /> tag : This tag Import the Design system Styles and assets in your Visualforce Page.
  2.  <div class = “slds-scope” > wrapper : wrap All your Code in this Wrapper because Lightning Design System Styles can only applied to elements within this wrapper.

Use SVG icons, add the xmlns attributes to the element Like


So Start Making a Visualforce Page Step by Step

Step 1 – Add the <apex:slds /> and <div class = “slds-scope” > wrapper in Visualforce Page.

<apex:page showHeader="false" standardController="Account" standardStylesheets="false" sidebar="false" docType="html-5.0">

<html xmlns="" xmlns:xlink="" lang="en">

<!-- Import the Lightning Design System style sheet -->
<apex:slds />



<div class="slds-scope">
<p class="slds-text-heading--label slds-m-bottom--small"> Hi ! This is Your Visualforce Page with Lightning Design System</p>


Preview of Step 1

1st Image

Step 2 – Add a Modal in <div class = “slds-scope” > tag.

<!-- Modal -->
<div role="dialog" tabindex="-1" aria-labelledby="header43" class="slds-modal slds-fade-in-open slds-modal--medium">
<div class="modal-container slds-modal__container">
<!-- Modal Header -->
<div class="slds-modal__header">
<button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
<svg class="slds-button__icon slds-button__icon--large" aria-hidden="true">
<use xmlns:xlink="" xlink:href="{!URLFOR($Asset.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
<span class="slds-assistive-text">Close</span>
<h2 id="header43" class="slds-text-heading--medium">Create Account</h2>
<!-- / Modal Header -->
<!-- Modal Content -->
<div class="slds-modal__content slds-p-around--medium"></div>
<!-- / Modal Content -->
<!-- Modal Footer -->
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral">Cancel</button>
<button class="slds-button slds-button--brand">Save</button></div>
<!-- / Modal Footer --></div>
<!-- / Modal -->
<div class="slds-backdrop slds-backdrop--open"></div>

Code Highlights

  1. ‘aria-labelledby’ attribute in Modal whose Value is the Id of Modal Heading.
  2. <use> tag under the <svg> Tag Must Bound with

Preview of Step 2

2nd Image

Step 3 – Insert Compound Form for Account Input Fields in Modal Content<div class=”slds-modal__content slds-p-around–medium”> tag.

Compound Form consists of form groups that are by . It requires the .slds-form–compound class .

<h3 class="slds-section-title--divider">Account Information</h3>
<fieldset class="slds-form--compound">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<span class="slds-form-element__label">Account Owner</span>
<div class="slds-form-element__control ">
<span class="slds-form-element__static">Sagar Sindhi</span></div>
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="select-01">Rating</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select id="select-01" class="slds-select">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="input-03">
<abbr class="slds-required" title="required">*</abbr> Account Name</label>
<input type="text" required="" id="input-03" class="slds-input" /></div>
<div class="slds-form-element slds-size--1-of-2">
<label class="slds-form-element__label" for="input-04">Phone</label>
<input type="text" id="input-04" class="slds-input" /></div>

Preview of Step 3

3rd image

For More Details of Html Tags  for Lightning Design you can go to Lightning Design System .  Here you can Everything for Lightning Design System .

Please Like if you like my Blog and share your valuable inputs.

Salesforce Lightning – Brief Introduction to Lightning

Build Beautiful apps fast for the new Salesforce Lightning Experience with new developer tools and design resources

What is Salesforce Lightning Experience ?

Lightning Experience is the name for the all new Salesforce desktop app, with over 25 new features, built with a modern user interface and optimized for speed.

Use the Lightning App Builder to customize theLightning Experience and Salesforce1 Mobile app.

What is the need to switch to Salesforce Lightning?

New Selling features – Lightning offers more than 55 new Sales Cloud pages and well over 150 new Features. Each one is designed to make sales reps more productive and drive business forward.

Here are the five highlighted features: Opportunity Kanban, Quality Performance chart,Assistant, Opportunity Workspace, Custom Dashboards.

Lightning Voice – Lightning Voice, it enables Salespeople to connect with their customers and prospects faster by enabling voice calls directly within Sales cloud.

Lightning is mobile First – Lightning provides the facility to sales reps so that they can access each and everything from mobile using Salesforce1 mobile app. Any customization that is done is accessibleimmediately on any mobile device using Salesforce1.

Lightning builder – You do not need to be a hardcore developer to build apps. Using Lightning Builder anyone can drag and drop Lightning Components to build mobile &desktop apps, and customize pages in Lightning Experience.

AppExchange Apps – There are now more than 157 Lightning ready third party apps available on App Exchange .

Lightning Snap -Ins – It is the newest feature in Service Cloud Lightning. Snap – Ins allow Companies to quickly integrate customer support directly into their apps and webpages.

To Learn more about Snap-Ins from this Videos .

How Sales reps can find Lightning Experience right for his organization or not?

Salesforce provide Evaluate option so that user can Evaluate Is Lightning Experience Right for your Organization or not.

Here are the steps:

Setup | Lightning Experience | Evaluate

This Will send a Lightning Experience Readiness Report to Registered Email Id From which you can identify features which are supported in Lightning Experience or not Supported.


Here is the Lightning Experience Readiness Report.

report final

How to Enable Lightning Experience for your Organization?

Steps to Enable Lightning Experience :

Setup |Lightning Experience |Enable the New Salesforce Experience Section | Enable.


After Enabling Lightning Experience you will find option Switch to Lightning Experience using which you can Switch to Your Organization to Lightning Experience


IF Sales Reps want to Give Permissions of Lightning Enabled Organization to Paticular users who are ready for Lightning Experience Instead of giving Permission to all the users in the Organization Even they are ready or not for Lightning Experience So how can he achieve this?

Permission Sets /Profiles – Permission Set or Profile are the only solutions by which sales reps can give Lightning Enable User Permission to an Individual User.

Here are the Steps

Setup |Permission sets |New Permission set| System Permissions | Enable Lightning Experience User



Assign this Permission set to particular user who is Ready for Lightning Experience.

Is Every App made in Classic Available in Lightning Experience if not How can user make it available in Lightning Experience?

Setup | App Manager | Click on small button in Last column | Click Upgrade or Edit

If user Clicks Edit, Then Enables Show in Lightning Experience Checkbox Otherwise Do Custom Branding and Click Save.

Now Lightning Experience Provides Two options

Edit – Edit Make Classic App Visible in Lightning Experience however using Edit user cannot do Custom Branding.

Upgrade – Upgrade Make Classic App Visible in Lightning Experience,using upgrade user can do custom Branding Like SetImage , colour of your App According to own choice.



app branding

What is the Console App?

Console apps to give your users a productivity boost, allowing them to edit and reference multiple records at once. When a user chooses a record from a related list, it opens as a tab in the console. When a user opens a related record, it opens as a subtab. Console apps remember tabs, so that when a user navigates away from the page, they don’t lose any time when they come back.

Console apps in Lightning Experience have much of the same console functionality that you’re used to with Salesforce Classic, such as the three-column layout and pinned tabs, but updated with the styling of Lightning Experience. You can also customize Lightning console apps with Lightning pages and components.

To Create a New Custom Lightning Console App in Lightning Experience

Setup | App Manager | New Lightning App

console app - 1

console app - 2

Here is the screenshot of Console apps in Lightning Experience.

console app - 4

Please Follow if you like my Blog and share your valuable inputs