Create formula field image button with lightning style in SalesForce and add it to page layout

For some requirements, we need to create a formula field image button (hyperlink) that redirects to a link (like record details page, external website, VF page, Lightning app page) and pass parameters like Id, Stage Name, Status etc.

Formula Field Button with Lightning UI

Here I'll show you:

1. How to create an image button that looks like a lightning button using  MS Paint.
2. Upload this image button in the static resources.
3. Create a formula field and use the previously created image button.
4. Add button to Page Layout
5. On click of this button how to redirect to a Visual Force page/record detail page/ external link   

Quick demonstration:

STEP 1: Create an image button using paint 

Note: Here we are not creating button image by taking the screenshot of any customized button as it can result in a blur or nonclear image.

Open microsoft paint (Windows have it my default) > File > Properties > Change the height of canvas as  [x] * 29 > do following configurations:

1. Font-family:  Arial 
2. Font size: 6 px (you have to type 6 in size window)
3. Font color:  Red- 69, Green- 105, Blue 150 (Click on 'Edit Colors' button available in top menu section of paint to select this custom color or watch the video for more details)
4. Border color: Red- 213, Green- 209, Blue 208
5. Enter button text 
6. Zoom the Paint canvas to 400% > maintain a gap of 8mm between left and right side > keep text at the center. (At the end of this blog, I have attached a sample button, do check it for left and right gap spacing measurement as it may vary based on your machine screen size)
7. Select font color as border color then using rectangle shape draw border.
8. Save the image.   

How to use custom color in Paint

STEP 2: Upload image to static resource in Salesforce

Setup > search for 'Static Resource' > Create new > Give meaningful name > Upload button image > copy 'Name' field to note pad for further use

Note: If we need to make any changes in image and we upload that image again then in order to see changes, we need to clear our browser cache.

 STEP 3: Create a formula field 

Set up > Object Manager > Opportunity (or any other object) > Fields and Relationships > New > Select 'Formula Field' > click Next > Enter Field Label and Name > Select Return Type as 'Text'

   In Advance tab > Enter the formula as mentioned below (modify as per your requirement)

IF(ISPICKVAL(StageName, "Qualification") , HYPERLINK('/apex/SendOpportunityForApproval?id=' & Id, IMAGE("/resource/Send_for_management_approval", "Send for Management Approval"), "_blank"), NULL)

How it is working?: It first checks, if the Opportunity stage is 'Qualification', If true then Hyperlink will be displayed. Hyperlink is redirecting to a VF page and passing current record ID as a query string parameter and displaying link as a clickable image.

Note:

• 'SendOpportunityForApproval' is visual force page name. Replace it with your VF page name.
• Use "_self", if you want to open link in same page 
• We can add multiple conditions in IF using AND/OR
• We can redirect to any link other than VF page like external website, App page, community page etc.
• We can pass object fields as an additional parameter separated by '&'   

 STEP 4: Add formula field (image button) to the page layout

Set up > Object Manager > Opportunity (or any other object) > Page Layout > Edit >

Drap formula field to the layout 

    

 STEP 5: Click on the button 

 

Sample button image for reference

Follow me @LinkedIn - sud-gupta

Keep Learning ... Keep Growing !!!

SalesForce data collection Part 1 - LIST

This blog is helpful for SFDC developers or admins to understand SalesForce data collection variable - LIST. It explains all basics and mostly used operations on LIST.  

Every programming language (like C, C++, python, apex) has

1. Primitive data types like String, Integer etc.
2. Collection variables like an array.

Apex (Salesforce programming language) has the following data collection (that can store multiple numbers of records) variables:

1. List (ordered)
2. Set (unique values and un-ordered)
3. Map (key-value pair) 

LIST: 

An ordered collection of elements, which is identified by their index. A list can contain any number of records of primitive, collections, sObjects, user defined and built in Apex type.

Example to get the basic idea about LIST

Requirement 1: Store name of class topper

String topperName = 'Sudhanshu'; // Storing single value

Requirement 2: store names of all class students

List<String> studentsName = new List<String>{'Sudhanshu','Sachin','Gaurav','Mariya','Amit'}; // storing collection of string.

Here in requirement example 2, students' names are saved in the list in an ordered way like the index of 'Sudhanshu' is 0, 'Sachin' is 1, and so on. 

How to declare a List?

1. List<String> colorsList = new List<String>(); // Creates a new instance of SET which can hold some value.

2. List<String> colors = new List<String>{'Yellow','Red','Green'}; // with default values
3. List<Integer> rollNumber = new List<Integer>{2,5,7}; // with default value - integer

3.   List<Account> accList = new list<Account>(); // list of type account.

4. List<Account> accList = [Select Id, Name, Industry, Type From ACCOUNT where Industry = 'Utilities'];

Below is an incorrect way of getting account records. It can throw an error if zero records are returned by the SOQL query and we try to do some operation on 'acc' variable.

Account acc = [Select id, Name from accountwhere Industry = 'Utilities'];// Incorrect way

Mostly used methods /functions of  LIST

1. List Null check

Note: List must be initialized before applying a null check.

List<String> colorsList = new List<String>{'Yellow','Red','Green'};

if (colorsList.size() > 0){
   // Do something
}
if (!isEmpty()){
   // Do something
}

List null check

Logs Output:

List null check output

2. Looping and sorting values in a List

Use list.sort(); for sorting elements in ascending order

List<String> studentsName = new List<String>{'Sudhanshu', 'Sachin','Gaurav','Mariya','Amit'};
for( String sName : studentsName){
    system.debug('Student Name: ' + sName);
}
studentsName.sort();// Sorting in ascending order
for(String sName : studentsName){
    system.debug('Student Name after sorting: ' + sName);
}

Output

3. Adding an element to a List.

1. list.add(element): adds a single element to a list
2. list.addAll(another list): add contents of an already existing List to a List.
3. list.add(index, element): add element at a specific index 

List<String> studentsName = new List<String>();
studentsName.add('Sudhanshu');
studentsName.add('Sachin');

List<String> studentslist2 = new List<String>();
studentslist2.add('Gaurav');
studentslist2.add('Mariya');
studentsName.addAll(studentslist2);// Addting existing list
studentsName.add(1,'Amit');// adding element at a specific index
system.debug('size of studentsName list: ' + studentsName.size());

for( String sName : studentsName){
    system.debug('Student Name: ' + sName);
}

Log Output:

List: Add element logs output

4. Converting a String into a List, check if any element exists or not, Converting a list to string

When we query multi picklist field value from an object it returns a string separated by ';' semi comma. If we need to apply some conditions or sorting or any manipulation then we can directly convert a string  to a List.

String cities = 'Mumbai;Pune;Gurgaon;Noida;New York;Toronto';// multi picklist field value or semi comma separated values in a string
List<String> citiesList = cities.split(';');
system.debug( 'size: ' + citiesList.size());// Output - Size: 6
citiesList.sort();
boolean flag = citiesList.contains('Pune');
system.debug( 'flag: ' + flag);//output- true
string x = citiesList.toString();

system.debug('X: ' + x); //output- (Gurgaon, Mumbai, New York, Noida, Pune, Toronto)
   

Contains(): is used to check if  any element is present in List or not

ToString(): is used to convert List values directly into a ',' comma-separated string. 

5. Clear all values in List

Clear: removes all the values from a List.

Example: citiesList.clear();

6. Referring the first element of List returned by SOQL query

List<Account> accList = [Select Id, Name, Industry, Type From ACCOUNT where Industry = 'Utilities' Limit 1];

String accName  = accList[0].Name; // Getting field value

7. Get Index of an element and Get element value by Index

List<String> myStrings = new List<String>{'a', 'b', 'a'};

String myVal = myStrings.get(0);

System.debug('myVal :' + myVal); // output - a

Integer indexValue = myStrings.indexOf('a'); 

System.debug('indexValue of a: ' + indexValue);// output - 0

For all other methods about LIST, refer apex developer guide - link

Keep Learning... Keep Growing !!!   - Sudhanshu Gupta