User interface development
Way back in 2009, when I took my first steps into the Salesforce world, the first thing my boss asked me to develop was a four-step wizard in Visualforce for our most valuable customer, to be used to grab customer data to activate a new contract in the utilities industry. I had about 2 months of Salesforce training, and I was not sure I was able to develop it…but I did!
This is the power of the Lightning Platform. The learning curve is not very steep, and after an initial moment of difficulty you start coding like crazy by putting together everything you have learned. This skill comes with experience, of course, but it’s not as hard as you might expect.
10 years ago, all I had was a huge PDF file with loads of Apex and Visualforce information and no Trailhead at all, but luckily Knowledge is now so accessible that you can get everything you need to become a pro. Experience is still the key, but you won’t find any issue to get all the necessary resources to blaze your trail as a developer.
Visualforce is the first supported way to code custom user interfaces. These pages are kind of HTML pages (yes, the ones that your browser can read to output your favorite sites) with special tags (the instructions used to represent components in the page, from input text to buttons to labels) used to output server-side data (for example, table of Account records) or to interact with the client (that is, the user’s browser) by displaying forms to get specific input data (which then can be processed using Apex code classes, called Visualforce controllers).
Visualforce pages can easily be represented by the following diagram:
Visualforce page request flow
The following list explains the preceding page request flow diagram:
- The user requests a specific page (Visualforce pages usually have the /apex/ path in their URL).
- The Salesforce platform gets the request and loads the corresponding Visualforce page.
- If needed, the page returns control to its Apex controller, which handles any server-side logic.
- If needed, the controller talks with the underlining database (making a SOQL query or doing a DML statement).
- The database returns the requested result (a query result or an update operation).
- The Apex controller gets the results and elaborates them and returns control to the Visualforce page.
- The page, using standard and static HTML tags, images, JavaScript resources, and proprietary Visualforce tags, compose the final HTML page that is sent back as a response to the user’s client.
- The user’s browser outputs the resulting HTML page.
Any time a user interacts with the same page, this request/response process restarts, and a new HTML page is generated with the updated data.
With the Visualforce framework, developers can generate any kind of form with any logic inside (they can use any JavaScript library to enhance the user experience), interact with the database, or even interact with external systems (for example, to get a list of all the bills for a given customer from the billing system, integrated using custom Apex callouts).
Where can we access a Visualforce page?
- From the LEX App Launcher
- From the LEX navigation bar
- From a standard page layout (Visualforce pages can be added within a layout section)
- From a Lightning page made with the Lightning App Builder
- From a quick action
- From an overridden object action (for example, override the edit action for the account record by showing a Visualforce page to users)
- From custom links or buttons
- From manually jumping to /apex/MyPageName in your browser
If you want to start building your first Visualforce page, I suggest you have a look at the Trailhead at https://trailhead.salesforce.com/en/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_intro.