Skip to content

Salesforce Hack with Visualforce: Getting Started

 

Salesforce Admin Tips
One of my favorite things about Salesforce is how customizable it is. As a user, you get the feeling that you are working on a platform that is very much your own. By making it so easy to build on top of this platform, Salesforce have given the user power to control their work environment to the fullest. How do you utilize this? One way to customize Salesforce is via the use of Visualforce pages. Visualforce pages are basically Html pages that plug into Salesforce (like any other page you use in Salesforce) and can be used to do awesome things. In this Salesforce Hack blog, I will show you how to get started with building your own Visualforce page. To follow each step, ensure you have Development mode enabled within your org. Refer here for instructions on how to do this. Whilst in Salesforce, enter the address of your new page “/apex/MyVeryOwnTestPage” into the url bar straight after your Salesforce instance, as displayed in the screen shot below. For example, mine would look as follow: https://c.eu5.visual.force.com/apex/MyVeryOwnTestPage. “c.eu5.visual.force.com” is my Salesforce instance and “/apex/MyVeryOwnTestPage” is the address to my new page. blog1 (2) You should see a page, as displayed in the screen shot below, telling you MyVeryOwnTestPage does not exist and do you wish to create this page. Click on “Create Page MyVeryOwnTestPage”. blog2 (2) You should see a similar page to the one displayed in the screen shot below. As easy as this, you have created a Visualforce page. blog3 (1) As you have Development mode enabled, you will be able to edit this page quite easily. To get started click on “MyVeryOwnTestPage” located in the bottom right hand side of the page within the tool bar.   blog4 (1)   You should see the tool bar open: blog5 Simply delete the code in the apex page tag (<apex:page >) and enter the following: <h1>Hello World!</h1>. Click on the save icon. blog6 You should find the page refreshes and your new header, Hello World! is displayed. You may be thinking what is the point to this? Well, for one, the ability to easily and dynamically bind Salesforce data to elements on the page which is why Visualforce pages are like gold-dust to Salesforce Developers.  One way to demonstrate this is by replacing our h1 element with the following code and click on the save icon: <h1>Hi {!$User.FirstName} {!$User.LastName}!</h1> <p>This is {!account.name} account. </p> <a href=”{!account.website}”>Visit account’s website</a> blog7 Now, get an id of any account you would like within your org (one with a valid value for the field website) and enter the id as a parameter within the url of your new page and press enter. For example mine looks like this:  “https://c.eu5.visual.force.com/apex/MyVeryOwnTestPage?id=0012400000FFSJt” You should be greeted by your user’s full name and the name of the account as well a link to the account’s website should be displayed on the page. This simple example demonstrates just how easily it is to bind Salesforce data to elements on a Visualforce page; this makes them a powerful tool to have in your Dev arsenal. For more information on creating and customizing Visualforce pages, refer here. Enjoy your Salesforce Hack!

Soroosh Avazkhani

Junior Developer at Ebsta. Obsessed with finding and sharing all the best Salesforce Admin hacks to help you achieve Salesforce greatness!

Related Posts

Give your Sales Reps access to the best data

Long gone are the days where you had to rely on your Reps to add emails or data into Salesforce. Ebsta does it automatically. Reps now have access to 100% data accuracy without having to do a thing.
Find out more