How to create visualforce page using Streaming API

Streaming API allows to push data (whenever records are created or updated in the backend) to a visualforce page opened by a user without refreshing page. It is very much similar to push notifications in mobile apps. You can refer Streaming API developer guide to get additional details regarding streaming API. Since it is an API in Salesforce, you can connect to it using multiple ways. You can build a java client application to connect to Salesforce. In this post, we will cover how to create a visualforce page using streaming API. This page will show newly created opportunities without reloading the page.

Steps to Use

1) Create a push notification in Salesforce

    Streaming API works on the model of subscribing to push notifications. So first step is to create a push notification at the salesforce end to which we can subscribe from the visualforce page we are going to create. In this post we will create a push notification on opportunity object. Easiest way to create this is execute below code in developer console,

2) Create visualforce page and controller to subscribe to this push notification

    Cometd JavaScript library is used to get data in JSON format to visualforce page. Then using this JavaScript data can be rendered to visualforce page. In the example given below, controller queries 10 opportunity records and displays as a table in page level. Thereafter whenever new opportunities are created in the backend, streaming API pushes data as JSON to page and using JavaScript this data is appended at the end of the table.


 

In the page a static resource is used with JavaScript libraries like cometd, JSON2 etc. You can find the static resource in Salesforce Sample Codes Github project.

Please note that streaming API usage is counted against a 24hour daily limit. Exact limit varies with edition of salesforce. For developer edition it is 10000 in 24 hours.

How to build autocomplete fields in visualforce pages

It is a very handy option to have autocomplete in picklists/dropdowns with large number of options. In this blog we will cover how to use a multiselect autocomplete field in a visualforce page. image

In this example we will display a list of email addresses configured in a custom setting as autocomplete options in an input field. It will also demonstrate how to pass the value that user is selecting to the controller.

It works based on jQuery UI autocomplete feature. Necessary css and JavaScript is available in CDN. you can find links to these CDN files in the visualforce page code.

Steps to Use

1) Create a custom setting and create records

   In this example, the list of email addresses that are displayed in autocomplete is pulled from name field in a custom setting. Please create a list custom setting with name AutocompleteEmails(AutocompleteEmails__c). Then create some email addresses as entry in the custom setting.

2) Create a page and controller

   Code used for achieving it can be found below,

 

   In the constructor of the class, email addresses are queried from the custom setting. Then these values are converted to JSON. This JSON file is assigned to a property in the controller, which is accessible in the page. Then in page level, using this JSON, autocomplete feature is created. Since <apex:inputText does not support applying autocomplete feature on it, autocomplete is created in a regular input field. The values that user select in this regular input is passed to controller using an <apex:inputHidden field. In the save method, this value is passed to controller and it is printed using a System.debug() statement.

Usage

This feature will be very useful when users are using a dropdown with large number of options in a visualforce page. This will help users to find the value they are searching for very easily.

How to send email using apex

From Salesforce you can send emails using multiple methods. Commonly we will be image using workflows to send emails. But it is common to come across requirements that require more sophisticated email which might contain attachments. Please check below to see sample code to send email with attachments using apex,

Steps to Use

1) Get details regarding email body, attachments, to address etc.

    You need get some basic details and take some design considerations before starting development. Salesforce allows only 10 emails to be sent in one apex transaction. So if you are sending email from a trigger for each record it will fail, when data is loaded through data loader in bulk. In addition to this, there will be organization level limit in number of emails that can be sent in one day. But this limit is usually high(1000 x number of users).

3) Reuse below code to send simple email (minimum example)

    Please check below code sample to send a very simple email from apex.


3) Reuse below code to send email with attachment (full example)

    Please check below code sample to send email from apex.


This sample code receives a string of TO email addresses separated by commas, a String of CC email addresses separated by commas, email subject and email body as string. This method also creates a text attachment in the email.

4) Additional reference

    In addition to the methods used above there are many built in salesforce methods and supporting class related to sending emails. Please check below links for additional details,

Single Outbound email

Messaging Class

Send Email Result

How to use Google Charts in Visualforce pages

Usually you might come across requirements to show charts in visualforce page.image Salesforce’s built in analytics solutions is good. You can even embed those charts in your regular visualforce pages without much difficulty. But the only limitations is that some types of charts are not available in visualforce page. Another one common use case is community pages. Salesforce charts can be used in community, only if users have partner community or community user plus licenses, which are bit more costly. In such cases, you will have to go for third party charting solutions like Google Charts, Fusion charts etc. Here is an example of how to embed a Google chart in visualforce page.

Steps to Use

1) Understand the data requirements of the chart you need

    You can find the list of all Google charts at charts gallery. Once you have found the right chart for your requirement, you need to check the data requirements of the chart. Each chart requires data in some specific format.

2) Format data in visualforce page controller in the required format

    Once you have found the right format for data, next step is to format data in that format before sending to chart.

3) Visualforce page and controller implementation of doughnut chart

    Check out below code where a doughnut chart is displayed with attendance of student. In the controller different attendance values are aggregated and passed that to page level using properties,





Use Cases

  • Whenever charts need to be shown in visualforce pages
  • Wherever standard Salesforce charts are not fitting your requirements
  • If you have regular community licenses and want to show charts to users, Google charts is a good alternative.