UI Flashcards
Create Visualforce Pages
- Create Visualforce Pages in the Developer Console
- Create a page using the “quick fix” tool available in Visualforce development mode:
In your browser, enter a URL in the following form: https://yourSalesforceOrgURL/apex/nameOfNewPage, where the value of yourSalesforceOrgURL is the URL used to access your Salesforce org (for example, MyDomainName.my.salesforce.com) and the value of nameOfNewPage is the value you want to give to the Name field on your page definition (example - https://MyDomainName.my.salesforce.com/apex/HelloWorld)
Page names can’t be longer than 40 characters.
Because the page does not yet exist, you are directed to an intermediary page from which you can create your new page. Click Create page nameOfNewPage to create the new page. Both the page Name and Label are assigned the nameOfNewPage value you specified in the URL.
- Create Pages in Setup:
From Setup, enter Visualforce Pages, then select Visualforce Pages.
View created Visualforce Page
Once your page has been created, you can access it by clicking Preview (Setup > Visualforce Pages). You can also view it manually by entering a URL in the following form: http://yourSalesforceOrgURL/apex/nameOfNewPage, where the value of yourSalesforceOrgURL is your Salesforce organization’s URL (for example, MyDomainName.my.salesforce.com) and the value of nameOfNewPage is the value of the Name field on your page definition.
Enable Visualforce Development Mode
Development mode provides you with:
A special development footer on every Visualforce page that includes the page’s view state, any associated controller, a link to the component reference documentation, and a page markup editor that offers highlighting, find-replace functionality, and auto-suggest for component tag and attribute names.
The ability to define new Visualforce pages just by entering a unique URL.
Error messages that include more detailed stack traces than what standard users receive.
Enable Visualforce Development Mode:
User Profile (Personal settings) > My Personal Information > Advanced User Details: Development Mode checkbox, Show View State in Development Mode checkbox
Show View State in Development Mode checkbox enables the View State tab on the development footer. This tab is useful for monitoring the performance of your Visualforce pages.
Customization of Visualforce integration into Lightning
In Salesforce Classic, the default value of the sidebar attribute and showHeader attribute is true. However, in Lightning Experience and the Salesforce mobile app, the value of these attributes is overridden and is always false. There’s no way to suppress the Lightning Experience header.
The page still includes some Salesforce style sheets, which let you match Salesforce choices for fonts, size, and so on. To suppress all Salesforce output, add standardStylesheets=”false” to remove the styles as well.
Visualforce Expressions
Dynamic data is accessed in markup through the use of global variables, calculations, and properties made available by the page’s controller. Together these are described generally as Visualforce expressions. Use expressions for dynamic output or passing values into components by assigning them to attributes.
A Visualforce expression is any set of literal values, variables, sub-expressions, or operators that can be resolved to a single value. Method calls aren’t allowed in expressions.
The expression syntax in Visualforce is:** {! expression }**
The resulting value can be a primitive (integer, string, and so on), a Boolean, an sObject, a controller method such as an action method, and other useful results.
Visualforce Global Variables
{! $GlobalName.fieldName }
Use global variables to access and display system values and resources in your Visualforce markup.
For example, Visualforce provides information about the logged-in user in a global variable called $User: {! $GlobalName.fieldName }.
Example:
{!$User.FirstName } {!$User.LastName } {! $User.Username }
Visualforce expressions are case-insensitive, and spaces within the {! … }are ignored. So these expressions all produce the same value:
{!$User.FirstName} {!$USER.FIRSTNAME} {!$user.firstname }
There are nearly two dozen global variables that can be used within Visualforce. They’re useful for getting information about the currently logged in user, as you saw, but also for getting details about the organization ( $Organization), settings ( $Setup), details about custom objects ( $ObjectType), actions available on those objects ( $Action), and so on.
Visualforce Formula Expressions
Examples: {!$User.FirstName & ‘ ‘ & $User.LastName}
{! TODAY() + 7}
<p>Tomorrow will be day number {! DAY(TODAY() + 1) }</p>
<p>Let's find a maximum: {! MAX(1,2,3,4,5,6,5,4,3,2,1) } </p>
<p>The square root of 49 is {! SQRT(49) }</p>
<p>Is it true? {! CONTAINS('salesforce.com', 'force.com') }</p>
<p>The year today is {! YEAR(TODAY()) }</p>
Visualforce supports formulas that let you manipulate values.
Visualforce Conditional Expressions
Use a conditional expression to display different information based on the value of the expression.
You can do this in Visualforce by using a conditional formula expression, such as IF(). The IF()expression takes three arguments.
Example:
<p>{! IF( CONTAINS('salesforce.com','force.com'), 'Yep', 'Nope') }</p>
<p>{! IF( DAY(TODAY()) < 15, 'Before the 15th', 'The 15th or after') }</p>
({! IF($User.isActive, $User.Username, ‘inactive’) })
Visualforce: Accessing Data with a Standard Controller
Every standard controller includes a getter method that returns the record specified by the id query string parameter in the page URL. This method allows the associated page markup to reference fields on the context record by using {!object} syntax, where object is the lowercase name of the object associated with the controller. For example, a page that uses the Account standard controller can use {!account.name} to return the value of the name field on the account that is currently in context.
For the getter method to succeed, the record specified by the id query string parameter in the URL must be of the same type as the standard controller. For example, a page that uses the Account standard controller can only return an account record.
As with queries in the Lightning Platform API, you can use merge field syntax to retrieve data from related records:
You can traverse up to five levels of child-to-parent relationships. For example, if using the Contact standard controller, you can use {!contact.Account.Owner.FirstName} (a three-level child-to-parent relationship) to return the name of the owner of the account record that is associated with the contact.
You can traverse one level of parent-to-child relationships. For example, if using the Account standard controller, you can use {!account.Contacts} to return an array of all contacts associated with the account that is currently in context.
Visualforce: Associating a Standard Controller with a Visualforce Page
To associate a standard controller with a Visualforce page, use the standardController attribute on the <apex:page> tag and assign it the name of any Salesforce object that can be queried using the Lightning Platform API.</apex:page>
For example, to associate a page with the standard controller for a custom object named MyCustomObject, use the following markup:
<apex:page>
</apex:page>
When you use the standardController attribute on the <apex:page> tag, you cannot use the controller attribute at the same time.</apex:page>
Visualforce: Using Standard Controller Actions
Action methods perform logic or navigation when a page event occurs, such as when a user clicks a button, or hovers over an area of the page. Action methods can be called from page markup by using {! } notation in the action parameter of one of the following tags:
<apex:commandButton> creates a button that calls an action
<apex:commandLink> creates a link that calls an action
<apex:actionPoller> periodically calls an action
<apex:actionSupport> makes an event (such as “onclick”, “onmouseover”, and so on) on another, named component, call an action
<apex:actionFunction> defines a new JavaScript function that calls an action
<apex:page> calls an action when the page is loaded
The following table describes the action methods that are supported by all standard controllers. You can associate these actions with any Visualforce component that includes an action attribute.
**save, quicksave, edit, delete, cancel, list**
For example, the following page allows you to update an account. When you click Save, the save action is triggered on the standard controller, and the account is updated.
<apex:page>
<apex:form>
<apex:pageBlock>
<apex:pageBlockButtons>
<apex:commandButton></apex:commandButton>
</apex:pageBlockButtons>
<apex:pageBlockSection>
<apex:inputField></apex:inputField>
<apex:inputField></apex:inputField>
<apex:inputField></apex:inputField>
<apex:inputField></apex:inputField>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
Command buttons and links that are associated with save, quicksave, edit, or delete actions in a standard controller are only rendered if the user has the appropriate permissions. Likewise, if no particular record is associated with a page, command buttons and links associated with the edit and delete actions are not rendered.
</apex:page></apex:actionFunction></apex:actionSupport></apex:actionPoller></apex:commandLink></apex:commandButton>
Visualforce: Validation Rules and Standard Controllers
If a user enters data on a Visualforce page that uses a standard controller, and that data causes a validation rule error, the error can be displayed on the Visualforce page. If the validation rule error location is a field associated with an <apex:inputField> component, the error displays there. If the validation rule error location is set to the top of the page, use the <apex:pageMessages> or <apex:messages> component within the <apex:page> to display the error.</apex:page></apex:messages></apex:pageMessages></apex:inputField>
Visualforce: Styling Pages that Use Standard Controllers
Any page associated with a standard controller automatically inherits the style that is used for standard Salesforce pages associated with the specified object.
You can override the styling of a page that uses a standard controller with the tabStyle attribute on the <apex:page> tag. For example, the following page uses the Account standard controller, but renders a page that highlights the Opportunities tab and uses the Opportunity tab's yellow coloring:</apex:page>
<apex:page>
</apex:page>
To use the styling associated with MyCustomObject:
<apex:page>
</apex:page>
To use the styling associated with a custom Visualforce tab, set the attribute to the name (not label) of the tab followed by a double-underscore and the word tab. For example, to use the styling of a Visualforce tab with the name Source and a label Sources, use:
<apex:page>
</apex:page>
Alternatively, you can override standard controller page styles with your own custom stylesheets and inline styles.
Visualforce: Checking for Object Accessibility
If a user has insufficient privileges to view an object, any Visualforce page that uses a controller to render that object will be inaccessible. To avoid this error, you should ensure that your Visualforce components will only render if a user has access to the object associated with the controller.
You can check for the accessibility of an object like this:
{!$ObjectType.objectname.accessible}
This expression returns a true or false value.
For example, to check if you have access to the standard Lead object, use the following code:
{!$ObjectType.Lead.accessible}
For custom objects, the code is similar:
{!$ObjectType.MyCustomObjectc.accessible}
To ensure that a portion of your page will display only if a user has access to an object, use the render attribute on a component. For example, to display a page block if a user has access to the Lead object, you would do the following:
<apex:page>
<apex:pageBlock>
<p>This text will display if you can see the Lead object.</p>
</apex:pageBlock>
</apex:page>
It is good practice to provide an alternative message if a user cannot access an object. For example:
<apex:page>
<apex:pageBlock>
<p>This text will display if you can see the Lead object.</p>
</apex:pageBlock>
<apex:pageBlock>
<p>Sorry, but you cannot see the data because you do not have access to the Lead object.</p>
</apex:pageBlock>
</apex:page>
Visualforce: Standard List Controllers
Standard list controllers allow you to create Visualforce pages that can display or act on a set of records. Examples of existing Salesforce pages that work with a set of records include list pages, related lists, and mass action pages. Standard list controllers can be used with the following objects:
Account
Asset
Campaign
Case
Contact
Contract
Idea
Lead
Opportunity
Order
Product2
Solution
User
Custom objects
Visualforce: Associating a Standard List Controller with a Visualforce Page
Using a standard list controller is very similar to using a standard controller. First you set the standardController attribute on the <apex:page> component, then you set the recordSetVar attribute on the same component.
**<apex:page>**</apex:page></apex:page>
When you use the standardController attribute on the <apex:page> tag, you can’t use the controller attribute at the same time.</apex:page>
The recordSetVar attribute not only indicates that the page uses a list controller, it sets the variable name of the record collection. This variable can be used to access data in the record collection.
Visualforce: List View - Access Records with Expression Syntax
When using a standard list controller, the returned records automatically sort on the first column of data defined by the current view. When using an extension or custom list controller, you can control the sort method.
As with queries in the Lightning Platform API, you can use expression language syntax to retrieve data from related records. As with standard controllers, you can traverse up to five levels of child-to-parent relationships and one level of parent-to-child relationships.
<apex:page>
<apex:pageBlock>
<apex:pageBlockTable>
<apex:column></apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
Visualforce: List View - Access Records with IDs
In a typical page interaction, a user selects records from a listview before navigating to a page, and Visualforce sends them to the controller. You can also specify records manually by setting selected records directly on to the controller.
The standard list controller is based on the StandardSetController Apex class. Use the method ApexPages.StandardSetController.setSelected() to set the list of records from your Apex controller.
*public with sharing class MyControllerExtension {
private ApexPages.StandardSetController setController;
public MyControllerExtension(ApexPages.StandardSetController setController) {
this.setController = setController;
Account [] records = [SELECT Id, Name FROM Account LIMIT 30];
setController.setSelected(records);
} }* The standard list controller is based on the StandardSetController Apex class. To retrieve a list of records assigned to the list controller, use the method ApexPages.StandardSetController.setSelected().
In the MyControllerExtension’s constructor, make a SOQL request to select the ID and Name from the Account object and limit the first 30 results. Then, definesetController.setSelected(records) so that the records are selected on page load.
A standard list controller can return up to 10,000 records. Custom controllers can work with larger results sets.
It’s also possible to pass a list of record IDs into a URL by including them as multiple query parameters. For example, a URL that has three Account IDs looks like: /apex/pageName?ids=001xx00account1&ids=001xx00account2&ids=001xx00account3.
Some browsers have a hard limit on the length of a URL. If your URL has too many IDs, then there is a greater chance of reaching that limit, causing your page to misbehave. Instead of manually including IDs in a URL string, it’s better to set the selected records on to the controller.
Visualforce: Standard List Controller Actions
Action methods can be called from page markup by using {! } notation in the action parameter of one of the following tags:
<apex:commandButton> creates a button that calls an action
<apex:commandLink> creates a link that calls an action
<apex:actionPoller> periodically calls an action
<apex:actionSupport> makes an event (such as “onclick”, “onmouseover”, and so on) on another, named component, call an action
<apex:actionFunction> defines a new JavaScript function that calls an action
<apex:page> calls an action when the page is loaded
Actions: save, quicksave, list, cancel,
for page navigations - first, last, next, previous
Example:
*<apex:page>
<apex:form>
<apex:selectList>
<apex:selectOptions></apex:selectOptions>
</apex:selectList>
<apex:commandButton></apex:commandButton>
</apex:form>
</apex:page>*
</apex:page></apex:actionFunction></apex:actionSupport></apex:actionPoller></apex:commandLink></apex:commandButton>
Visualforce: List View - Pagination
By default, a list controller returns 20 records on the page. To control the number of records displayed on each page, use a controller extension to set the pageSize.
<apex:page>
<apex:pageBlock>
<apex:form>
<apex:pageBlockSection>
<apex:dataList>
{!a.name}
</apex:dataList>
</apex:pageBlockSection>
<apex:panelGrid>
<apex:commandLink>Previous</apex:commandlink>
<apex:commandLink>Next</apex:commandlink>
</apex:panelGrid>
</apex:form>
</apex:pageBlock>
</apex:page>
</apex:commandLink></apex:commandLink></apex:panelGrid></apex:form></apex:pageBlock></apex:page>
Visualforce: Using List Views with Standard List Controllers - Filter
Many Salesforce pages include list views that allow you to filter the records displayed on the page. For example, on the opportunities home page, you can choose to view a list of only the opportunities you own by selecting My Opportunities from the list view drop-down. On a page that is associated with a list controller, you can also use list views.
For example, to create a simple list of accounts with a list view, create a page with the following markup:
<apex:page>
<apex:pageBlock>
<apex:form>
<apex:panelGrid>
<apex:outputLabel></apex:outputLabel>
<apex:selectList>
<apex:actionSupport></apex:actionSupport>
<apex:selectOptions></apex:selectOptions>
</apex:selectList>
</apex:panelGrid>
<apex:pageBlockSection>
<apex:dataList>
{!a.name}
</apex:dataList>
</apex:pageBlockSection>
</apex:form>
</apex:pageBlock>
</apex:page>
This page is associated with the standard account controller and the <apex:selectlist> component is populated by {!listviewoptions}, which evaluates to the list views the user can see. When the user chooses a value from the drop-down list, it is bound to the filterId property for the controller. When the filterId is changed, the records available to the page changes, so, when the <apex:datalist> is updated, that value is used to update the list of records available to the page.</apex:datalist></apex:selectlist>
Visualforce: Editing Records with List Controllers
You can edit a set of records using list controllers, too. For example, if you create a page with the following markup:
<apex:page>
<apex:form>
<apex:pageBlock>
<apex:pageMessages></apex:pageMessages>
<apex:pageBlockButtons>
<apex:commandButton></apex:commandButton>
</apex:pageBlockButtons>
<apex:pageBlockTable>
<apex:column></apex:column>
<apex:column>
<apex:inputField></apex:inputField>
</apex:column>
<apex:column>
<apex:inputField></apex:inputField>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
(you see a page that allows you to update and save the Stage and Close Date on your opportunities)
Command buttons and links that are associated with save, quicksave, or edit actions in a list controller are not rendered if the user does not have the appropriate permissions. Likewise if no particular record is associated with a page, command buttons and links associated with the edit actions are not rendered.
