Visualforce - Beyond Basics Series 50 - Easy Global Search

What is Global Search ?

In Salesforce, there's a standard global search functionality at the top Header. This will search all the text, email, phone fields in Objects & list them.

How to implement one ?

If you want to implement one, it's simple to do so. we need to use SOSL for fuzzy search on fields in specific objects.

Where is the Code ?

	<apex:page controller="testclass1_23022017">
	<apex:sectionHeader title="Global Search Box"/>
	<apex:form >
	<apex:outputLabel value="Enter you search text here "/>
	<apex:inputText value="{!searchStr}"/>
	<apex:commandButton value="Go" action="{!startSearch}" rerender="DisplayArea"/>
	</apex:form>
	<apex:outputPanel id="DisplayArea">
	<apex:outputPanel rendered="{!results != Null}">
	<apex:pageBlock >
	<!-- For each Object, like Account, Opportunity, Product2 -->
	<apex:repeat value="{!results}" var="objName">
	<apex:sectionHeader subtitle="{!objName}"/>
	<!-- For each row -->
	<apex:pageBlockTable value="{!results[objName]}" var="rec" >
	<!-- For each field -->
	<apex:repeat value="{!rec}" var="field">
	<apex:column value="{!rec[field]}" headerValue="{!field}"/>
	</apex:repeat>
	</apex:pageBlockTable>
	</apex:repeat>
	</apex:pageBlock>
	</apex:outputPanel>
	</apex:outputPanel>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

	public class testclass1_23022017 {
	/* VF Bindings */
	Public String searchStr{get;set;}
	Public Map<String, List<Map<String, String>>> results {get;set;}
	/* Action Function */
	public void startSearch() {
	List<List<sObject>> lsResults = [
	FIND
	:searchStr
	IN
	ALL FIELDS
	RETURNING
	Account(Name, Type),
	Opportunity(Name, StageName),
	Product2(Name, ProductCode)
	];
	Map<String, List<String>> objNamesAndFields = new Map<String, List<String>>{
	'Account' => new List<String>{ 'Name', 'Type'},
	'Opportunity' => new List<String>{ 'Name', 'StageName'},
	'Product2' => new List<String>{ 'Name', 'ProductCode'}};
	results = new Map<String, List<Map<String, String>>>();
	Integer count = 0;
	for (String objName : objNamesAndFields.keySet()) {
	results.put(objName, new List<Map<String, String>>());
	for (Integer idx = 0; idx < lsResults[count].size(); idx++) {
	Map<String, String> recMap = new Map<String, String>();
	for (String field : objNamesAndFields.get(objName)) {
	recMap.put(field, (String) lsResults[count][idx].get(field));
	}
	results.get(objName).add(recMap);
	}
	count++;
	}
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 49 - Mark a table column as Required

How to give help text for a Table ?

In visualforce, table can be generated using PageBlockSection, PageBlockTable, DataGrid tags. If one wants to provide help text for a column, they need to use apex:facet tag.

How it will be useful to indicate Required Field ?

In some cases, developer may want to indicate a column as Required. So, it's possible to provide that in the table column header

Where is the Code ?

	<apex:page standardController="Opportunity" recordSetVar="Opps">
	<style>
	.ReqHelpText {
	display : inline-block;
	width : 3px;
	background-color : #c00;
	}
	</style>
	<apex:sectionHeader title="Opportunities"/>
	<apex:form>
	<apex:pageBlock>
	<apex:pageBlockTable value="{!Opps}" var="opp">
	<apex:column>
	<apex:inputField value="{!Opp.Name}"/>
	<apex:facet name="header">
	<apex:outputPanel>
	<apex:outputText value="Opportunity Name - "/>
	<apex:outputText value="&nbsp;" escape="false" styleClass="ReqHelpText"/>
	<apex:outputText value=" It is a Required Field"/>
	</apex:outputPanel>
	</apex:facet>
	</apex:column>
	<apex:column value="{!Opp.StageName}"/>
	<apex:column value="{!Opp.IsClosed}"/>
	</apex:pageBlockTable>
	</apex:pageBlock>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 48 - Required field Help Text

How to give more emphasis on Required fields in form ?

Prevention is better than Cure. Most of the time users forget to fill in required fields in the form & realize than while saving the record.

How to prevent that ?

Giving a highlighted Help text through each section of the forms would give more emphasis on required fields. By doing so, user will fill some values & will never have any issues while saving the record.

Where is the Code ?

	<apex:page standardController="Opportunity">
	<style>
	.ReqHelpText {
	display : inline-block;
	width : 3px;
	background-color : #c00;
	}
	</style>
	<apex:form>
	<apex:pageblock >
	<apex:pageBlockSection collapsible="false" showHeader="true" title="Opportunity Section">
	<apex:facet name="header">
	<apex:outputPanel>
	<apex:outputPanel styleClass="ReqHelpText">&nbsp;</apex:outputPanel>
	<apex:outputText value="Fill Required Fields"/>
	</apex:outputPanel>
	</apex:facet>
	<apex:inputField value="{!Opportunity.Name}"/>
	</apex:pageBlockSection>
	</apex:pageblock>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 47 - Extend standard sObject

What is the purpose of extending the sObject ?

There's no inheritance to standard sObject. So, if one wants to extend the record, one need to create a wrapper to store the record inside it.

How to do that ?

The wrapper is a Apex Class which will have the record and other extended fields. So, in visualforce page, both standard and extended fields can be used seamlessly.

Where is the Code ?

	<apex:page controller="testclass6_22022017">
	<apex:sectionHeader title="Extend the Standard Opportunity Object"/>
	<!-- Show Opportunty Standard Fields -->
	<apex:sectionHeader subtitle="Standard Fields"/>
	<apex:outputPanel layout="block">
	<apex:outputLabel value="Name - "/>
	<apex:outputText value="{!oppWrapObj.opp.Name}"/>
	</apex:outputPanel>
	<apex:outputPanel layout="block">
	<apex:outputLabel value="StageName - "/>
	<apex:outputText value="{!oppWrapObj.opp.StageName}"/>
	</apex:outputPanel>
	<!-- Show Opportunty Extended Fields -->
	<apex:sectionHeader subtitle="Extended Fields"/>
	<apex:outputPanel layout="block">
	<apex:outputLabel value="Generic Name - "/>
	<apex:outputText value="{!oppWrapObj.genericName}"/>
	</apex:outputPanel>
	<apex:outputPanel layout="block">
	<apex:outputLabel value="Open Date - "/>
	<apex:outputText value="{!oppWrapObj.openDate}"/>
	</apex:outputPanel>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

	public class testclass6_22022017 {
	public OpportunityWrapper oppWrapObj {get;set;}
	public testclass6_22022017() {
	oppWrapObj = new OpportunityWrapper(ApexPages.currentPage().getParameters().get('Id'));
	}
	class OpportunityWrapper {
	Public String genericName{get;set;}
	Public Date openDate{get;set;}
	Public Opportunity opp{get;set;}
	Public OpportunityWrapper(Id oppId) {
	opp = [Select Id, Name, StageName From Opportunity Where Id =: oppId];
	genericName = 'Test Opp Generic Name';
	openDate = System.Today() + 20;
	}
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 46 - Treat each User differently

What is Personalization ?

Sometimes Visualforce page needs to behave or look differently for different set of users. This is called Personalization.

How do achieve this ?

In salesforce, we can use 'Custom Settings' to store the personalization data for User, Profile or entire Organization. We need to be very careful in not misusing this. If any data that does n't different between user, then it's App Configuration which should be stored in 'Custom Metadata'.

Where is the Code ?

	<apex:page >
	<apex:sectionHeader title="Styling based on User Configuration"/>
	<!-- Show a text with Color, Configured for ORG -->
	<apex:outputText value="My Sample Text"
	style="color:{!$Setup.TestSettings__c.Color__c};font-size:{!$Setup.TestSettings__c.Size__c}px;"/>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 45 - Keep the pages alive

What is keep-alive for the page ?

For every visualforce page, there's a timout for session, after which the session expires. This is configurable under security controls in Salesforce Setup. Normally, it will be few minutes in best secured Org.

How to prevent that ?

But, practically, you might have a visualforce page which requires more time for the User to work on it. Say, if they take 30min to configure products for an opportunity, then, they were pulled for a meeting. So, when they come back after 30 min & click save, they should be disappointed to see login page & potentially losing all the effors.

To avoid such scenarios, we can use actionPollar to poll for an empty request to server, so that session will be kept alive forever.

Where is the Code ?

	<apex:page >
	<apex:sectionHeader title="This page never expires in session"/>
	<apex:form>
	<apex:outputText value="A timer running to send request to server every 5sec"/>
	<apex:actionPoller interval="5"/>
	</apex:form>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 44 - Inline VF Page Redirect

What is Inline VF Page ?

Inline Visualforce page means, a technique of embedding visualforce page into the main detail/edit page of standard layout for a record.

How to redirect or refresh the page ?

This inline VF Page lives inside a iframe. So, when you do redirect or reload. the detail/edit page won't get affected. you may try this now, if you haven't faced this.

Where is the Code ?

	<apex:page standardController="Opportunity">
	<button onclick="top.location.href = '/{!Opportunity.Id}'">
	Click here to refresh
	</button>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 43 - Use QR Code in Page

What is QR Code ?

QR Code is the visual representation of text. It has very similar attributes to Bar Code. But, it's more powerful than it.

What are the applications ?

The main application is to scan the URL, rather than typing in the browser. And embedding Contact details, Product details for the Business.

How it will be useful in CRM System like Salesforce ?

In Salesforce, we may need to get the QR Code from external system containing lead information (or) Contact Information (or) Cases. In return, we may send QR Code to other systems which accepts the data in QR Code format. Barcode/QR Code has very important role in every business. So, converting the format between QR Code & text is vital for a Organisation.

How to implement the feature very quickly ?

It's not necessary to implement the complex algorithms required for processing QR Codes. As there are services available in the Cloud, we could reuse them.

Where is the Code ?

	<apex:page docType="html-5.0">
	<apex:sectionHeader title="QR Code Generator"/>
	<apex:form>
	<apex:outputText value="Enter the URL"/>
	<apex:input type="text" onchange="redirect(this.value);" />
	<br/><br/>
	<apex:outputPanel layout="block" rendered="{!$CurrentPage.parameters.ImageURL != Null}">
	<apex:image value="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={!$CurrentPage.parameters.ImageURL}"/>
	</apex:outputPanel>
	</apex:form>
	<script>
	function redirect(imageURL) {
	window.location.href = '{!$Page.testpage2_22022017}?ImageURL=' + imageURL;
	}
	</script>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?

Visualforce - Beyond Basics Series 42 - Inline Edit with No Apex

How normally inlineEdit implemented in Visualforce ?

The best way to achieve inlineEdit for fields in Visualforce is using mode = 'InlineEdit' in PageBlock tag. This is the best and efficient way to do it. However, there's only one inconvenience, it opens up only one field for editing.
Then, user needs to click on each field to edit. So, what if user wants to edit all the fields in the row ?

How to edit all the fields in the row ?

When user double clicks a field in the row, then redirect to the same page with a Query Parameter that determines which row should be opened for Editing.

Where is the Code ?

	<apex:page standardController="Opportunity" recordSetVar="Opps">
	<!-- Local Variables -->
	<apex:variable var="EditId" value="{!IF($CurrentPage.parameters.EditRecordId!=Null,
	$CurrentPage.parameters.EditRecordId, Null)}"/>
	<apex:form>
	<apex:pageblock>
	<apex:pageBlockButtons rendered="{!EditId != Null}">
	<apex:commandButton value="Save" action="{!save}" reRender="None" />
	<apex:commandButton value="Cancel" action="{!cancel}"/>
	</apex:pageBlockButtons>
	<apex:pageBlockTable value="{!Opps}" var="Opp">
	<apex:column value="{!Opp.Name}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="Name" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.Name}"/>
	</apex:column>
	<apex:column value="{!Opp.StageName}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="StageName" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.StageName}"/>
	</apex:column>
	<apex:column value="{!Opp.CloseDate}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="CloseDate" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.CloseDate}"/>
	</apex:column>
	<apex:column value="{!Opp.AccountId}" ondblclick="redirect('{!Opp.Id}')" rendered="{!EditId != Opp.Id}"/>
	<apex:column headerValue="AccountId" rendered="{!EditId == Opp.Id}">
	<apex:inputField value="{!Opp.AccountId}"/>
	</apex:column>
	</apex:pageBlockTable>
	</apex:pageblock>
	</apex:form>
	<script>
	function redirect(recId) {
	window.location.href = '{!$Page.testpage_22022017}?' + 'EditRecordId=' + recId +
	'&retURL=' + '{!$Page.testpage_22022017}';
	}
	</script>
	</apex:page>

view raw gistfile1.txt hosted with ❤ by GitHub

Any Screenshots ?

Walk through in a video ?