Visualforce in Salesforce

on

Visualforce pages are building blocks for developers to build sophisticated, custom user interfaces. This is similar to a standard Web page, but includes powerful features to access, display, and update your organization’s data. This can be referenced and invoked via a unique URL.

Salesforce developers can use Visualforce to create a Visualforce page definition which consists of two primary elements -

-Visualforce markup (consists of Visualforce tags, HTML, JavaScript, or any other Web-enabled code embedded within a single <apex:page> tag)

-Visualforce controller (is a set of instructions that specify what happens when a user interacts with the components specified in associated Visualforce markup, such as when a user clicks a button or link)


The Visualforce framework includes a tag-based markup language, similar to HTML, and a set of server-side 'standard controllers' that make basic database operations, such as queries and saves, very simple to perform. Visualforce components can either be controlled by the same logic that is used in standard Salesforce pages, or developers can associate their own logic with a controller class written in Apex.


Developers can use Visualforce pages to:

  • Override standard buttons, such as the New button for accounts, or the Edit button for contacts
  • Override tab overview pages, such as the Accounts tab home page
  • Define custom tabs
  • Embed components in detail page layouts
  • Create dashboard components or custom help pages
  • Customize, extend, or integrate the sidebars in the Salesforce console (custom console components)
  • Add navigation menu items and actions in the Salesforce mobile app


You can use Developer Console to create and edit Visualforce pages, with access to other powerful Lightning Platform development tools.


Steps to create a Visualforce page in the Developer Console -

Open the Developer Console under Your Name or the quick access menu ( Setup gear icon) | Click File | New | Visualforce Page | enter the <pageName - firstPageName> | OK

Just make changes to display something -

<apex:page>

    <h1>Something</h1>

</apex:page>

Now click File | Save | Click Preview to preview the page


To see your page in the context of Lightning Experience, return to your main Lightning Experience browser window. Open your browser’s JavaScript console (Fn+F12 from keyboard while on the lightning page) and enter the following code. Just replacing pageName with your page’s name - firstPageName like

$A.get("e.force:navigateToURL").setParams(

    {"url": "/apex/pageName"}).fire();

This JavaScript fires the Lightning Experience navigateToURL event, and is the equivalent of entering in the classic /apex/PageName URL — you can even see that URL pattern in the code.


In Developer Console, click File | Open to see a list of existing Visualforce pages. Double-click a page to open it.



Visual:

https://www.youtube.com/watch?v=6dNm99DDPm0

https://www.youtube.com/watch?v=tkcX47-b2Ow

https://www.youtube.com/watch?v=kDZa6CF1KF8

https://www.youtube.com/watch?v=WenLR4k8L6A


Reference:

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_intro_what_is_it.htm

https://trailhead.salesforce.com/content/learn/modules/visualforce_fundamentals

Comments

Post a Comment