Visualforce – Jitendra Zaa's Blog

Event Handling between Aura, Lightning Web Components (LWC) and Visualforce

Salesforce Lightning Message Service

Few months back, I wrote an article on how pub sub model can be used to communicate between Lightning Web Components. In that blog post, we used external library to pass event from child to Lightning Web Components.

Lightning Message Service

In Winter 20, Salesforce released Lightning Message Service which can be used to exchange data between Visualforce, Aura Component and Lightning Web Components. Unlike previous process, we don’t need to import any external library like pub or sub.

In this blog post, I would be creating Visualforce, Aura Component and Lightning Message Service and exchanging message between all of them using Lightning Message Service.

Salesforce interview question related to Lightning framework – Part 20

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.

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.

Ajax based AutoComplete / TypeAhead Directive in AngularJS

Previously we already discussed below Auto Complete components:

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.

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 :

Visualforce Remote Objects

One of the exciting feature of Spring14 release is introduction of “Visualforce Remote Objects”. You can say its actually replacement of JavaScript Remoting.

Why do we need “Visualforce Remote Objects” when we already have “JavaScript Remoting” ?

Well, here are few advantages of “Visualforce Remote Objects” :

No need to write Controllers, Everything can be done in Visualforce only.
As @RemoteAction annotated methods needs to be static so you had to take special precaution as it didn’t supported Viewstate. This hurdle is completely removed now.
No need to write Test Class now, as no Controller is involved.

Continue reading Visualforce Remote Objects

How to access ListView in Apex | Using StandardSetController for Pagination

There are scenario in project lifecycle where developer creates SOQL or Dynamic SOQL to return expected result. Also if requirement changes they go back and change existing code to reflect updated SOQL. If you are good developer and avoid to change Apex code at most you will save your SOQL in “Custom Settings” and utilize in Dynamic SOQL.

However, There is very good design Developer can suggest to client. Instead of going to your code and changing code for new requirement, how it sounds if we can utilize existing List View inside Apex or Visualforce only 🙂 ? It will solve lots of problems and if requirement changed, just change or create new Listview and it will reflect in your Visualforce code. We can almost have same functionality like Navigation buttons and Paging without writing any complex code logic, thanks to StandardSetController capabilities.

There is also very good article on Salesforce blog on various approaches suggested for pagination and one of them is using StandardSetController.

To keep article simple, I am posting complete Visualforce and Apex code with Comments inside. Account object is used as an example here.

Using FieldSet with Visualforce and Apex

One of the disadvantages comes up with Custom Page or Overriding New or Edit button with Visualforce page is its “Maintenance”, if New Filed is Added or needed to remove field we have to modify our code every time.

However, Thanks to Salesforce that we have “Field Set“.

With the Help of “Dynamic Visualforce Binding” and “Field Set” we can create effective Visualforce pages with ability to change Fields and its Sequence any time without modifying any code.

Let’s start with using Field set in Salesforce.

Step 1: Creating Field Set

First we need to create a field set. For this article, I am using custom object named “Question__c”.

We have to navigate to setting page of that object and then “Field Sets”. Create a new Field Set and add required field in Sequence as displayed in below image.

Assume that field set name is “Add_Question”.

Introduction to View State in Visualforce

As we know that http protocol is stateless protocol. Unlike Other programming languages like Java and C# the variables, objects are persisted between different method and network calls. However in case of server client model, the server only stores the session related information of client, however it does not stores the temporary data being used by the clients. Sometime hidden field values, IDs and other information are needed by server for processing.

For example : If client needs any data and is loaded by the server in first request, if error comes the server will need to retrieve data again for second request. Also it is possible that few data is created at client side also, so to persist the state of client View State is used in Visualforce.

Before Summer 12, For every form tag the View State was created. However from Summer 12 release only one View State will be created per page. View State is encrypted and transferred to client with each response. View State cannot be viewed with tools like firebug however salesforce has “View State Inspector” to check the View State Data.

Types of Data Saved in View State:
Following data are saved in Viewstate

All public and private data members present in Standard, Custom and Controller extensions.
Objects that are reachable from data members in Custom and Controller extensions.
The component tree for that page that represents the page’s component structure and the associated state which are the values applied to those components.
Small amount of data needed by visualforce for other general purposes.

Transient Variable and Objects:
As Viewstate is transferred over http with every response, it is very necessary to control the size of View State. There are lots of situations where data is not needed after postback or not needed on Visualforce page then in that case we can make variable or object transient. The transient variables are not passed to view state and therefore not stored in View State.

Salesforce Apex Code talk – Important Questions and Answers

Hello everyone,
On 24th April 2012, There was Apex code chat conducted by the Salesforce. So i thought to share important question and answers of that chat. You can read complete chat here.

Here are some of the (edited) highlights from this episode’s chat transcript.

Question: Is there a way in Apex to send an email and replace the default from email address (no-reply@salesforce.com)?
Ans: Yes, using either the setSenderDisplayName or setOrgWideEmailAddressID methods on the SingleEmailMessage or MassEmailMessage classes.

Question: Which fields are accessible in a Trigger.new record without performing a SOQL query? For example if my trigger is on the Contact object, are fields on the parent Account object (like Account Description) accessible without performing an explicit SOQL query?
Ans: You can use Trigger.new to access all non-null fields of the object on which the trigger is defined. You have to perform an explicit SOQL query to access any fields on associated parent or child records. For example, if the trigger is defined on Contact, you can only access the Id of the parent Account record (via AccountId) in Trigger.new. You’d need to perform a separate SOQL query to access any other field on the parent Acccount record (e.g. Description, Industry etc.).

Gantt Chart in Salesforce using JQuery and JSON

I have searched a lot for any library available for the Gantt Chart however there are very few available on the web. Even i was not able to find out the chart in “Google API”.

In this article, i will delineate creating the “Gantt Chart” using JQuery and JSON. In previous article we have seen that how to generate JSON using Salesforce. So continuing the last article, i will use the same JSON reponse to create the “Gantt Chart”.

What is Gantt Chart?

A Gantt chart is a type of bar chart, developed by Henry Gantt, that illustrates a project schedule. Gantt charts illustrate the start and finish dates of the terminal elements and summary elements of a project.

In this example i am going to create the Gantt Chart for room reservation system. for this i am going to use the JQuery plugin for creating Gantt Chart found here.

Plugin uses following JSON format :

[{  "name"  : "Task#1"
  , "desc"  : " Task Desc"
  , "values": [
      {  "from"       : "/Date(1296547200000)/"
       , "to"         : "/Date(1296554400000)/"
       , "desc"       : "<b>Task #1<br>"
       , "customClass": "ganttRed" (optional)
       , "label"      : "Task #1" (optional)
      },
      {  "from"       : "/Date(1296637200000)/"
       , "to"         : "/Date(1296649800000)/"
       , "desc": "<b>Task #</b>"
       , "customClass": "ganttOrange" (optional)
       , "label": "Task #1" (optional)
      }
  ]
 },
 ...
]

However we know that the variable name “from” and “desc” are not valid in Apex because they are keyword. so as a workaround i am replacing the placeholders after the generation of JSON in previous article.