Scenario based Salesforce interview questions/Problems: Insert Account and show list view of Account using Lightning Experience in Salesforce

Arun Garg 5/17/2017 1 comment

1. I create a page to show Account list view and insert account.
2. I use '<apex:slds /> ' to use lightning tags in page.
3. Display the list view of account record using html table and use styles of lightning design system.
4. Create button and input text box using lightning.
5. Insert Account using '<apex:actionFunction>' and JavaScript function.
6. Click on the 'Create Account' button and call the JavaScript function and get the input field value using JavaScript and pass as a parameter in action function name so that action function call the method of controller.

Click for Demo

Visualforce Page:

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" docType="html-5.0" Controller="AccountDetailCtr" applyBodyTag="False" applyHtmlTag="False">
<head>
<title>Salesforce Demo</title>
<apex:slds />
<script>
function CreateAcc()
{
var accName=document.getElementById('account-name').value;
if(accName!='')
{
createAccount(accName);

}
else
alert('Please Eneter account name');
}

</script>
</head>
<body class="slds-scope">


<apex:form styleClass="slds-form--stacked" id="add-account-form">

<apex:actionFunction name="createAccount" action="{!createAccount}" reRender="ren">
<apex:param name="accName" value=""/>
</apex:actionFunction>

<apex:outputPanel id="ren">
<fieldset class="slds-box slds-theme--default slds-container--small">

<legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>

<div class="slds-form-element">
<label class="slds-form-element__label" for="account-name">Name</label>
<div class="slds-form-element__control">
<input id="account-name" class="slds-input" type="text" placeholder="New account"/>
</div>
</div>
<a class="slds-button slds-button--brand slds-m-top--medium" type="submit" onclick="CreateAcc()">Create Account</a>

</fieldset>






<br/><br/>

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">

<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Close Date">Annual Revenue</div>
</th>

</tr>
</thead>
<tbody>
<apex:repeat value="{!lstAcc}" var="acc">
<tr>
<th scope="row" data-label="Account Name">
<div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">{!acc.Name}</a></div>
</th>
<td data-label="Annual Revenue">
<div class="slds-truncate" title="Cloudhub">{!acc.AnnualRevenue}</div>
</td>
</tr>
</apex:repeat>
</tbody>
</table>

</apex:outputPanel>
</apex:form>
</body>
</apex:page>

Apex Class:

public class AccountDetailCtr
{

public AccountDetailCtr()
{

}

public List<Account> getlstAcc()
{
List<Account> accounts = new List<Account>();
try
{

accounts=[Select id,name,AnnualRevenue from account order by createddate desc];
System.debug('lstAccount Size:='+accounts.size());
if(accounts!=null && accounts.size()>0)
return accounts ;
else
ApexPages.addMessage(new ApexPages.Message(ApexPages.severity.info,'No account record found'));
}
catch(Exception e)
{
System.debug('Exdeption Message:='+e.getMessage()+'**Line Number:='+e.getLineNumber());
}
return accounts ;
}

// Insert Account
public pageReference createAccount()
{
try
{
String accountName=ApexPages.CurrentPage().getparameters().get('accName');
System.debug('accountName:='+accountName);
if(String.isNotBlank(accountName))
{
Account a=new Account();
a.Name=accountName;
insert a;

}
}
catch(Exception e)
{
System.debug('Exdeption Message:='+e.getMessage()+'**Line Number:='+e.getLineNumber());
}
return null;
}
}