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 !!!