Use Visualforce in Classic and Lightning Experience

How to design a Visualforce page so that It would be displayed properly in classic as well in Salesforce Lightning Experience

This topic was subset of my presentation in Salesforce Boston World Tour 2017. Sometimes we find our-self in situation where custom Visualforce page should be displayed with Old theme in classic but with Lightning theme in Lightning Experience.

If you can convince client to use same user interface in classic and Lightning, then it would be an ideal approach. Even Salesforce displays classic user interface for many setup pages inside Lightning experience.

If client does not agree, then we simply need to detect that in which context Visualforce is running and then enable or disable the section as per UIThemeDisplayed global variable as shown in below Apex code snippet. Continue reading “Use Visualforce in Classic and Lightning Experience”

Spell checker in custom Visualforce page

Author posted by Jitendra on Posted on under category Categories Salesforce and tagged as Tags with 7 Comments on Spell checker in custom Visualforce page

Using Salesforce Spell checker in custom Visualforce pages

Standard email functionality in Salesforce supports spell checker out of the box. These days, all modern browsers already has spell checker and customer may agree to use it. However there are some customer, who wants standard look and feel of application include spell checking.

We might be in need to create a custom Visualforce page with spell checker functionality same as of out of the box. Salesforce does not support it in custom pages and there are no pure JavaScript based libraries available to support spell and grammar checking. JavaScript libraries, I have seen, needs to access server side endpoint implemented either in PHP or any language. We can try to use those libraries, however we need to use AJAX request to get spelling and grammar suggestions. Continue reading “Spell checker in custom Visualforce page”

Salesforce Developers interview questions – Most commonly used code snippets – part 21

Salesforce interview questions – Most frequently used Apex and visualforce code used by Salesforce developers like “How to query and abort scheduled job using Apex”, “Defining VF page as HTML5”, “Visualforce page as JSON” , “Handling colon in element Id for Jquery” , “Chatter using Apex” and many more.

201. Common Apex page attributes.

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

202. Declare Visualforce page as HTML5.

<apex:page docType="html-5.0" />

203. Visualforce page output as JSON.

<apex:page controller="ControllerName"  contentType="application/x-JavaScript; charset=utf-8" showHeader="false" standardStylesheets="false" sidebar="false">
{!jsonString}
</apex:page>

Continue reading “Salesforce Developers interview questions – Most commonly used code snippets – part 21”

Salesforce interview question related to Lightning framework – Part 20

Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications

191. Why do we still need Visualforce once Lightning will be GA ?
Ans : Visualforce provides the facility for delivering template-driven web pages and email messages. In addition, developers wishing to simply utilize a basic container and maintain more control over the lifecycle of the request may choose Visualforce pages. Finally, organizations that can’t use Apex code can’t use Lightning Components, but they can use Visualforce.


192. What is difference between Visualforce Components and Lightning Components ?
Ans : Visualforce provides the facility for delivering template-driven web pages and email messages. In addition, developers wishing to simply utilize a basic container and maintain more control over the lifecycle of the request may choose Visualforce pages. Finally, organizations that can’t use Apex code can’t use Lightning Components, but they can use Visualforce.


193. Currently, can you show Lightning components tab in Mobile as well in desktop ?
Ans : Currently you can only use Lightning Components in the Salesforce1 Mobile App or a standalone app. Continue reading “Salesforce interview question related to Lightning framework – Part 20”

Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based

HTML5 Drag And Drop File
HTML5 based Drag And Drop File

You may find many ways to upload attachments in Salesforce using visualforce however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought to create one simple Visualforce component which can show progress bar and have drag and drop capabilities.

Initially i gave though to use visualforce remoting however challenge was how to show progress bar and same challenge was with custom controller or extension also. So, i decided to create one simple Apex REST API to upload attachment.

Continue reading “Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based”

Salesforce interview questions – Part 19

Salesforce interview questions for developers and admins around Apex, Visualforce, getting Salesforce object name on basis of Id, Apex API limits

181. Lets consider your custom Object named “Training__c” has field “Trainer__c”. You have set some default value in that field. Will that default value apply to new record created by apex code ?
OR
How to make sure that record created from apex code should respect default value of fields ?
OR
Default value in field from Apex code.
Ans :

After API 20, it should automatically populate However there is known issue for same here, click here if it impacts you.
Workaround :
If Default value of field is not getting populated by Apex then we have to use “Dynamic Apex”.  Create instance of object from sObjectType like shown below:

Training__c tr= (Training__c) Training__c.sObjectType.newSObject(null, true);

//Check if Value in field "Trainer__c" is default value
System.assertEquals('Jitendra', tr.Trainer__c);

182. What is best practice to refer dynamic custom messages in Visualforce with multi-language support ?
Ans :
Using Custom Label or OutputField or InputField tag, Platform itself will take care of internationalization. However in some cases, Message needs to be dynamic at the same time it should also support muti-language. In Custom Label, we cannot save dynamic String.

Let’s assume we want to show message something like “DEVELOPERNAME is not authorized to access this page”.
Here, Developername should be dynamically changed in visualforce which supports multilanguage. For each developername, it is not feasible to create custom labels. So below workaround can be used :

Step 1 : Create a Custom Label with text “{0} is not authorized to access this page“. In every language, dynamic value should represented by {0}.

Step 2 : In Controller of Visualforce write something like this :

String developerName = 'Some DeveloperName';
String message = String.format(Label.DEVELOPERNA, new String[] { developerName });

Continue reading “Salesforce interview questions – Part 19”

Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file

In this article we will see how to use Camera and Audio recorder of mobile device in Visualforce and upload as chatter file. It may look that it is very tricky to access device camera and audio control in Visualforce however you may be right if there were no HTML5. Thanks to HTML5 for magic.

Visualforce Camera Access - Front Page
Visualforce Camera Access – Front Page
Visualforce Camera Access - Use Camera Prompt
Visualforce Camera Access – Use Camera Prompt

Continue reading “Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file”

Ajax based AutoComplete / TypeAhead Directive in AngularJS

Previously we already discussed below Auto Complete components:

  1. Ajax Based Multiselect JQuery Autocomplete Control in ASP.Net
  2. AutoComplete Component in Visualforce using JQueryUI

In this article, we will be creating TypeAhead Directive (Auto Complete) again in Salesforce However this time we will use AngularJs. Why we are using AngularJS ? We discussed already in one of article.

Getting Remote Data in JSON format using AJAX from:

To get data from remote source, we are using same code “Visualforce Account_JSON” and “Controller AccountJSONCreator ” explained in this article. Only thing I have added in wrapper class is ID field.

Other than AngularJs, we are also using Bootstrap in this article to make slick UI.

TypeAhead Demo using AngularJs
TypeAhead Demo using AngularJs

Angular Directive :

Directive is great way of declaring your own component and re-use throughout page. write once and re-use every where. Our directive will look like : Continue reading “Ajax based AutoComplete / TypeAhead Directive in AngularJS”

Salesforce REST API Playground

What is REST API ?

In my words, Getting data from Other System or Same System using HTTP request is known as REST API.

If you know, how website works, you know REST API. Before REST API, there was SOAP request which needed lots of configuration and very tightly coupled. If you make any modification , you had to modify client side also by generating stubs / proxy classes again. There were many more disadvantages which got address by REST API. However, it doesn’t mean we don’t need SOAP.

Back to REST API, It is very simple to setup and almost any programming language can make HTTP request so very easy to get data from other source. Return type of REST API can be XML, Simple HTTP, JSON or any media like image. However, JSON is very popular response type amongst all.

In Past, I have already written one article demonstrating REST API usage.

How to use Salesforce REST API using JQuery in Visualforce ?

REST API Playground : I have created Simple Visualforce page, which demonstrates how to use REST API of Salesforce. It is written in Visualforce with the help of JQuery. You can study this code and play with it in your organization, you just need to copy and paste it.

You also need to add URL “http://cdnjs.cloudflare.com” in Remote Site Settings, so that salesforce will allow Visualforce page to get JQuery library from CDN.

Continue reading “Salesforce REST API Playground”

Table with Sorting and Searching using AngularJS

I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs.

Output will look something like this :

Searching and Sorting in Table using AngularJS
Searching and Sorting in Table using AngularJS

Prerequisite Libraries :

  1. UnderscoreJs
  2. Bootstrap CSS
  3. AngularJs

Continue reading “Table with Sorting and Searching using AngularJS”