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

xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink&#8221;

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="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>

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

</html>

<body>

<!-- REQUIRED SLDS WRAPPER -->
<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>


</div>
</body>
</apex:page>

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="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS,'/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="header43" class="slds-text-heading--medium">Create Account</h2>
</div>
<!-- / 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>
</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
    xmlns:xlink=”http://www.w3.org/1999/xlink&#8221;

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>
<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">
<option>--None--</option>
<option>Hot</option>
<option>Warm</option>
<option>Cold</option>
</select>
</div>
</div>
</div>
</div>
<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>
</div>
</div></fieldset>

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.

Advertisements

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.

1st

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.

1st

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

1st-2

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

2nd

3rd

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.

4th

5th

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

How to Tackle View State Issue During Upload file as a Attachment through Visualforce Page

In Previous Post, We Saw How to Upload File in Salesforce Through Visualforce .

So This Post is just to Handle the View State Error Occurred During Uploading File through Visualforce.

1st

For Complete Detail of View State Refer Link .

If you look into the Previous Post there were many Variables in Apex Controller which were use for getting file Body, Name, Description .

2nd

3rd

So If User Upload Large File Then file Body, Name and Description Come in these variables and It would Easily Increase the Heap Size Limit and View State Issue would arise.

4thSo For Avoiding this Issue Directly Make a Attachment Object Instance in Apex Controller and Get Body, Name of File From Visualforce Using that Instance .

5th

6th

Instead of Storing file body, Name, Description in these variables in apex controller it would Store directly in SObject Attachment So Heap Size Limit will not exceed.

Please Refer the Visualforce Page and Apex Controller for More Details.

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" controller="AttachmentUploadController">

<html>
<body>
<c:UploadFile_Component />
<!-- Main Section -->
<main class="main-section">

<!-- Header Section -->
<header class="header-section">
<div class="headersection-tagline">
<div class="container">
<div class="tagline-left">Upload File as Attachment</div>
</div>
</div>
</header>
<!-- /Header Section -->

<!-- Form Section -->
<section class="inner-section">
<div class="container">
<div class="formbg-section">
<apex:form styleclass="form-horizontal" id="frm" enctype="multipart/form-data">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">File Name :</label>
<div class="col-md-8">
<apex:inputText value="{!attachment.name}" styleClass="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label col-md-2">File: </label>
<label class="btn btn-primary" > Browse File
<apex:inputFile value="{!attachment.body}" filename="{!attachment.name}" styleclass="form-control" style="display:none" onchange="filechange(event)"/>
</label>
<span class="uploaded-file" style="overflow: hidden; display: -moz-grid;" ></span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">Description :</label>
<div class="col-md-10">
<apex:inputTextarea styleClass="form-control" value="{!attachment.Description}"/>
</div>
</div>
</div>
<div class="col-md-12">
<apex:messages />
<div class="form-group form-action-toolbar">
<div class="col-md-8 text-left">
<apex:commandButton id="btnsave" action="{!Upload}" styleClass="btn btn-primary" value="Save File as Attachment" />
</div>
</div>
</div>
</div>
</apex:form>
</div>
</div>
</section>
<!-- /.Form Section -->

</main>
<!-- /.Main Section-->
<script>
 
 function filechange(e)
 {
 var fileName = e.target.files[0].name;
 $('.uploaded-file').html(fileName);
 } 
 
</script>
</body>
</html>
</apex:page>

public with sharing class AttachmentUploadController {
public Id PageId ;
public Attachment attachment {
get {
if (attachment == null)
attachment = new Attachment();
return attachment;
}
set;
}

public AttachmentUploadController(){
PageId = ApexPages.currentPage().getParameters().get('id');
}

public PageReference upload() {
attachment.ParentId = PageId ;
attachment.IsPrivate = true;
try {
insert attachment;
} catch (DMLException e) {
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,'Error uploading attachment'));
return null;
} finally {
attachment = new Attachment();
}
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
return null;
}

}

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at sfdcsagarsindhi@gmail.com .

 

 

Apex Rest API – Salesforce Integration with Twilio(Get a Call on your Mobile Number from Salesforce Through Twilio Voice API)

First of all, you need to Create an account on Twilio. If you do not a have an account on Twilio please refer to the link.

If you have Already then just Log in to your Twilio account. After Log in Your Twilio Account, you will See ACCOUNTSID and AUTH TOKEN as shown in the screenshot below.

1st

Copy this ACCOUNTSID and AUTH TOKEN we will use it later.

After this Click on Left Side Icon in Twilio Account and click on # Phone Numbers

3rd

4th

You would see your Twilio number (you would receive calls from this number on your connected Mobile number)

5th

After this Move on to the Verified Caller IDs on Left Side Bar and Enter Your Mobile Number on which you want to receive Call and Verify by Twilio.

6th

Now Login into your Salesforce Account and create a Remote Site Setting of Twilio End Point URL as given in the Twilio API Documentation

2nd

For Beginners Here is the Explanation of Remote Site Setting.

“When you want to access the external sites in your Salesforce application using callouts, web services, etc… You need to add that in the Remote Site Settings. This is just a security that force.com platform is going to check.
Before any Visualforce page, Apex callout, or JavaScript code using XmlHttpRequest in an s-control or custom button can call an external site, that site must be registered in the Remote Site Settings page, or the call will fail”

Now moving on to the Integration part, according to the Twilio voice API . We Need DEFAULT VERSION , ACCOUNTSIDAUTH TOKEN , Twilio Phone Number(From Phone Number) , Twilio Verified Phone Number(To Phone Number), Voice API End Point for Doing this Integration From Salesforce .

7th

 

8th

 

Here is Apex Controller with Apex REST API and Visualforce Page


public with sharing class TwilioVoiceCallExt 
{
 public String mobileNumber {get;set;}
 public String responseBody {get;set;}
 public CallResponse callRes{get;set;}
 public String DEFAULT_VERSION = '2010-04-01';
 public String AccountSID = 'YOUR ACCOUNTSID';
 public String Authtoken = 'YOUR AUTH TOKEN';
 public String FromPhoneNumber = 'YOUR Twilio Phone Number';
 public String VoiceAPIEndPoint = 'https://demo.twilio.com/welcome/voice/';

 public String Body = '';

 public Void VoiceAPI()
 { 
 String Crediential = EncodingUtil.base64Encode(Blob.valueOf(AccountSID + ':' + Authtoken));
 String EndPoint = 'https://api.twilio.com/'+DEFAULT_VERSION+'/Accounts/'+AccountSID+'/Calls.json';

 if(mobileNumber != '')
 {
 Body = 'To='+mobileNumber+'&amp;amp;'+
 'From='+FromPhoneNumber+'&amp;amp;'+
 'Url='+VoiceAPIEndPoint;
 }
 else
 { 
 ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Mobile Number is required.'); 
 ApexPages.addMessage(myMsg); 
 return;
 }

 Http h = new Http();
 HttpRequest request = new HttpRequest();
 request.setHeader('Content-Type', 'application/x-www-form-urlencoded');
 request.setHeader('Authorization', 'Basic '+Crediential);
 request.setEndpoint(EndPoint);
 request.setMethod('POST');
 request.setBody(Body);
 HttpResponse res = h.send(request);
 responseBody = res.getBody();

 //------------Deserialize the Reponse in different Class------------------//
 callRes = (CallResponse)JSON.deserialize(responseBody, CallResponse.class);

 if(callRes.Status == 'queued')
 {
 ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.CONFIRM,'Call successfully sent..!! Please Check Entered Mobile Number'); 
 ApexPages.addMessage(myMsg); 
 }
 else if(callRes.status == '400'){
 ApexPages.Message myMsg = new ApexPages.Message(ApexPages.Severity.ERROR,'Mobile number is not valid'); 
 ApexPages.addMessage(myMsg); 
 } 

 }// End of function

 //-----class for get Response---------//
 public class CallResponse 
 {
 public String Status; 
 }
}

<apex:page sidebar="false" controller="TwilioVoiceCallExt">

<apex:sectionHeader title="Voice Call"/>
<apex:form >

<!-- message -->
<apex:pageMessages />

<apex:pageBlock >
In Case of Trail Twilio Account You can Call Only <b>One Mobile Number</b> which is <b>Verified</b> by Your Twilio Account !!
</apex:pageBlock>
<!-- Page block Start-->
<apex:pageBlock >

<!-- Page block Button-->
<apex:pageblockButtons >
<apex:commandButton action="{!VoiceAPI}" value="Click to Call"/>
</apex:pageblockButtons>

<apex:pageblockSection >
<apex:pageBlockSectionItem >
Mobile Number
<apex:inputText value="{!mobileNumber}" />
</apex:pageBlockSectionItem>
</apex:pageblockSection>

</apex:pageBlock>
<!-- Page block End-->
</apex:form>
</apex:page>

Refer Below Links for Complete Details of APEX REST API.

http://www.salesforcetutorial.com/salesforce-integration-rest-api-basics/

http://www.jitendrazaa.com/blog/salesforce/call-salesforce-rest-api-from-apex/

https://trailhead.salesforce.com/en/modules/apex_integration_services/units/apex_integration_rest_callouts

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at sfdcsagarsindhi@gmail.com .

 

Upload File – Upload file as an Attachment OR as a Salesforce File Related to Particular Object using Visualforce Page

Visualforce Page for Upload File as an Attachment OR in Chatter.

2ndTo Upload file as an attachment or as a file using Visualforce,one must have Record Id so that the Uploaded file links with that Record.

In Order to use Bootstrap, JQuery or CSS for Designing purpose you can refer to the following link to access Script files

https://drive.google.com/open?id=0B55QW3bpdoFPYkpyWXZJOE1rZFU

Upload this Zip file as a static Resource in your Salesforce Org and use it in Visualforce Component.

1st


<apex:component>

<apex:stylesheet value="{!URLFOR($Resource.Jquery_ToolKit,'css/vendor/bootstrap.min.css')}"/>

<apex:stylesheet value="{!URLFOR($Resource.Jquery_ToolKit,'css/app.css')}"/>

<apex:includeScript value="{!URLFOR($Resource.Jquery_ToolKit,'js/vendor/jquery.min.js')}"/>

</apex:component>

Now Use this Component in your Visualforce Page and use some Apex Input and Output Tags.

  1. <apex:inputText>to get File title and<apex:inputTextarea> to get File Description as Input from User .
  2. <apex:Input file> for choose attachment file.
  3. <apex:commandButton>to Save Attachment .
  4. Jquery function to show to name of file.

<apex:page standardStylesheets="false" sidebar="false" showHeader="false" controller="UploadFileController">

<html>
<body>

<c:UploadFile_Component />
<!-- Main Section -->
<main class="main-section">

<!-- Header Section -->
<header class="header-section">
<div class="headersection-tagline">
<div class="container">
<div class="tagline-left">Upload File as Attachment</div>
</div>
</div>
</header>
<!-- /Header Section -->

<!-- Form Section -->
<section class="inner-section">
<div class="container">
<div class="formbg-section">
<apex:form styleclass="form-horizontal" id="frm">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-md-4">File Name :</label>
<div class="col-md-8">
<apex:inputText value="{!AttchName}" styleClass="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label col-md-2">File: </label>
<label class="btn btn-primary" > Browse File
<apex:inputFile value="{!AttchBody}" fileName="{!AttchName}" styleclass="form-control" style="display:none" onchange="filechange(event)"/>
</label>
<span class="uploaded-file" style="overflow: hidden; display: -moz-grid;" ></span>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-2">Description :</label>
<div class="col-md-10">
<apex:inputTextarea styleClass="form-control" value="{!AttchDesc}"/>
</div>
</div>
</div>
<apex:messages />
<div class="col-md-12">
<div class="form-group form-action-toolbar">
<div class="col-md-8 text-left">
<apex:commandButton id="btnsave" action="{!Upload}" styleClass="btn btn-primary" value="Save File as Attachment" />
<apex:commandButton id="btnsave1" action="{!UploadChatterFile}" styleClass="btn btn-primary" value="Save File in Chatter" />
</div>
</div>
</div>
</div>
</apex:form>
</div>
</div>
</section>
<!-- /.Form Section -->

</main>
<!-- /.Main Section-->
<script>
 
 function filechange(e)
 {
 var fileName = e.target.files[0].name;
 $('.uploaded-file').html(fileName);
 } 
 
</script>
</body>

</html>
</apex:page>

In order to Insert file as an Attachment Related to Record Just make the instance of Attachment Object and put the Values Like File Title, File Description, Body, Related Record Id.

In Order to Insert file as Salesforce File, first of all we need to make the Lookup field for particular Object with related list in which we want to insert file in Content Version. Please refer to the steps I have performed “I have created 2 Lookup fields in Lead and Account Objects”.

To create Lookup fields in Content Version

Salesforce Files -> Create, Modify, Delete custom fields –> New Field

3rd

4th

5th

After creating this Lookup Field Make Instance of Content Version and put Required Fields as we did for Attachment.

Please refer to the controller for more details.


public with sharing class UploadFileController {

Public Id PageId {get;set;}
public Blob AttchBody {get;set;}
public String AttchDesc {get;set;}
public String AttchName {get;set;}
Public Attachment attch {get;set;}

public UploadFileController(){

PageId = ApexPages.CurrentPage().getParameters().get('Id');

}

public PageReference Upload(){

attch = new Attachment(ParentId=PageId,Description=AttchDesc,Name=AttchName,Body=AttchBody);

try{
insert attch;
AttchBody = null;
AttchDesc = null;
AttchName = null;
}
catch(Exception ex){
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,ex.getlineNumber()+' '+ex.getMessage()));
return null;

}
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully'));
return null;
}

public PageReference UploadChatterFile() {


ContentWorkspace cw =[SELECT Id FROM ContentWorkspace WHERE DeveloperName = 'Test_Workspace'];

ContentVersion v = new ContentVersion();
v.versionData = AttchBody;
v.title = AttchName;
v.FirstPublishLocationId = cw.Id;
v.pathOnClient = AttchName;

If(PageId.getSObjectType() == Account.sObjectType){
v.Account__c = PageId;
}
If(PageId.getSObjectType() == Lead.sObjectType){
v.Lead__c = PageId;
}

v.Description = AttchDesc;

try{
insert v;
AttchBody = null;
AttchDesc = null;
AttchName = null;
}
catch(Exception ex){
ApexPages.addMessage(new ApexPages.message(ApexPages.severity.ERROR,ex.getlineNumber()+' '+ex.getMessage()));
return null;
}

ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'Attachment uploaded successfully in Chatter'));
return null;
}
}

Hope you find this helpful, in case of any queries/concerns, please post a reply or drop an email to me at sfdcsagarsindhi@gmail.com .

 

 

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:pageBlockSection>

</apex:pageBlock>

<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:pageblockTable>

</apex:pageBlock>

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

<script type = "text/javascript"> 
 
 $("#SearchVal").keypress(function(){
 var serchval = $(this).val();
 searchrecords(serchval);
 }); 
 
 </script>
</apex:page>

 


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.