PDI User Interface

User Interface Detailed Explanation

Salesforce provides tools for creating user interfaces to manage and interact with data. These tools range from classic Visualforce pages to the modern Lightning Web Components (LWC) framework.

3.1 Visualforce

What is Visualforce?

• Visualforce is a framework for building custom user interfaces in Salesforce.
• It uses the <apex> markup language, similar to HTML, and integrates tightly with Salesforce’s backend.

Key Components of Visualforce

Visualforce pages are constructed using <apex> tags.

1. <apex:page>:

   • The root tag for a Visualforce page.

   • Example:

     <apex:page>
        <h1>Welcome to Salesforce</h1>
     </apex:page>
     

2. <apex:form>:

   • Used to create forms for user input.

   • Example:

     <apex:page>
        <apex:form>
            <apex:inputText value="{!name}" label="Enter Name"/>
            <apex:commandButton value="Submit" action="{!submitName}"/>
        </apex:form>
     </apex:page>
     

3. <apex:inputText>:

   • An input field for capturing text from users.
   • Can be bound to an Apex variable or property.

Custom Controllers

Visualforce can use Apex classes to add dynamic behavior and logic to pages.

• What are Custom Controllers?

  • An Apex class that acts as the backend for a Visualforce page.
  • Used to process user input, fetch data, or perform custom actions.

• Example: Visualforce Page:

  <apex:page controller="MyController">
      <h1>Hello, {!name}!</h1>
      <apex:form>
          <apex:inputText value="{!name}" />
          <apex:commandButton value="Greet Me" action="{!greet}"/>
      </apex:form>
  </apex:page>
  

  Custom Controller (Apex Class):

  public class MyController {
      public String name { get; set; }
  
      public void greet() {
          System.debug('Greeting ' + name);
      }
  }
  

Key Features of Visualforce:

• Works well for creating custom pages in Salesforce Classic.
• Can be embedded in page layouts, tabs, or as standalone applications.
• Limited compared to modern frameworks like LWC.

3.2 Lightning Web Components (LWC)

What is LWC?

• Lightning Web Components (LWC) is a modern framework for building user interfaces.
• It leverages web standards like HTML, JavaScript, and CSS.
• Designed for better performance, faster development, and seamless integration with Salesforce data.

Key Features of LWC

1. Web Standards:

   • Uses standard HTML and JavaScript, making it easier for developers to learn and build.

2. Seamless Salesforce Integration:

   • Directly connects to Salesforce objects and data via the Lightning Data Service (LDS).

3. Reusable Components:

   • LWC components can be reused across pages and applications.

Example of LWC

Let’s create a simple LWC component with a button that logs a message when clicked.

1. HTML Template:

   • The structure of the component is defined using an HTML template:

     <template>
        <lightning-card>
            <lightning-button label="Click Me" onclick={handleClick}></lightning-button>
        </lightning-card>
     </template>
     

2. JavaScript File:

   • The behavior of the component is controlled using JavaScript:

     import { LightningElement } from 'lwc';
     
     export default class Example extends LightningElement {
        handleClick() {
            console.log('Button clicked');
        }
     }
     

3. CSS File (Optional):

   • You can style the component using CSS.

4. Deploying the Component:

   • Once created, the component can be added to Salesforce pages via the Lightning App Builder.

When to Use LWC?

• When building modern, dynamic user interfaces.
• For creating reusable components that work across Salesforce Lightning applications.
• Ideal for performance-critical or scalable solutions.

3.3 User Experience Optimization

Dynamic Forms

• What are Dynamic Forms?
  • Allow fields and sections to be displayed conditionally based on the record type, user, or other criteria.
  • Available for Lightning Record Pages.
• Use Case:
  • Show a “Discount” field only when the “Account Type” is "Premium."

Optimizing Page Load Times

1. Reduce Server Calls:

   • Minimize SOQL queries and avoid fetching unnecessary data.
   • Use lazy loading for components that don’t need to render immediately.

2. Use Lightning Data Service (LDS):

   • Automatically manages data access and caching.
   • Reduces the need for Apex controllers.

3. Efficient Component Design:

   • Split large components into smaller, focused components.
   • Use @wire decorators for efficient data fetching.

Summary

• Visualforce is a legacy tool for building pages but is still relevant for some use cases.
• LWC is the modern standard for creating dynamic and fast interfaces.
• Optimizing the user experience through dynamic forms and efficient design ensures your applications perform well and meet user needs.

User Interface (Additional Content)

1. Lightning Components (Aura Components)

Although Lightning Web Components (LWC) are the modern standard for Salesforce development, Aura Components (introduced in 2014) are still supported and used in specific use cases, such as Experience Cloud (Community) pages and legacy Lightning components.

1.1 What are Aura Components?

• Aura Components were the original component-based framework in Salesforce before LWC.
• Unlike LWC, Aura uses a Salesforce-specific framework rather than standard web technologies.
• They consist of multiple files (.cmp, .controller, .helper) for defining structure, logic, and helper functions.
• Still widely used in Experience Cloud and Lightning pages that have not yet been migrated to LWC.

1.2 Aura Components vs. Lightning Web Components (LWC)

Feature	Aura Components	Lightning Web Components (LWC)
Performance	Slower due to framework overhead	Faster due to native browser support
Technology Base	Salesforce-specific framework	Standard web technologies (HTML, JS, CSS)
Code Complexity	Requires multiple files: .cmp, .controller, .helper	More streamlined code in a single JS module
Data Access	Requires @AuraEnabled methods in Apex	Uses @wire and Lightning Data Service (LDS)
Future Development	No longer recommended for new projects	Preferred for all new development

1.3 Why is LWC Recommended Over Aura?

• LWC is built using standard web technologies (HTML, JavaScript, CSS), making it faster and more scalable.
• LWC is more efficient, reducing the need for Apex calls thanks to built-in Lightning Data Service (LDS).
• LWC improves performance due to its smaller footprint and optimized rendering.

Possible Exam Question

"Why does Salesforce recommend using LWC instead of Aura Components?"

• Answer: LWC is faster, built on modern web standards, and optimized for scalability.

2. Standard Controllers in Visualforce

Your existing Visualforce explanation is good, but it lacks details about Standard Controllers, which are often tested in the exam.

2.1 What is a Standard Controller?

• A Standard Controller allows Visualforce pages to use existing Salesforce object data and built-in logic without requiring custom Apex code.
• Provides CRUD operations automatically for standard and custom objects.

2.2 Example of a Standard Controller in Visualforce

The following Visualforce page displays an Account record without requiring an Apex controller:

<apex:page standardController="Account">
    <h1>{!Account.Name}</h1>
    <apex:detail subject="{!Account}" />
</apex:page>

• standardController="Account" binds the page to the Account object.
• {!Account.Name} dynamically retrieves the account’s name.
• <apex:detail> renders a standard record detail view.

2.3 When to Use a Standard Controller vs. a Custom Controller?

Use Case	Standard Controller	Custom Controller
Read and display object data	Yes	Yes
Use built-in Salesforce logic	Yes	No
Execute custom logic and SOQL queries	No	Yes
Handle complex user interactions	No	Yes

Possible Exam Question

"When should you use a Standard Controller instead of a Custom Controller?"

• Answer: Use a Standard Controller when you only need to retrieve and display object data without custom logic.

3. Lightning Record Pages & App Builder

Your explanation of Dynamic Forms is great, but it lacks details on Lightning Record Pages and Lightning App Builder, which are commonly tested topics.

3.1 What are Lightning Record Pages?

• Lightning Record Pages allow developers to customize Salesforce page layouts using a drag-and-drop interface.
• Can be created and modified using Lightning App Builder.
• Supports adding components like LWC, Aura, Standard Components, and Custom Visualforce Pages.

3.2 What is Lightning App Builder?

• A declarative tool that allows users to create and customize Lightning pages without coding.
• Used for placing Lightning Web Components (LWC), Aura Components, and Standard Components.
• Accessible via Setup > User Interface > Lightning App Builder.

3.3 How to Add an LWC to a Lightning Page?

1. Navigate to Setup > Lightning App Builder.
2. Create or Edit a Lightning Page.
3. Drag and drop an LWC component onto the page layout.
4. Configure properties (if needed).
5. Save and Activate the page for users.

Possible Exam Question

"How can you add an LWC to a Lightning Page?"

• Answer: Use Lightning App Builder to drag and drop an LWC component onto the page layout.

4. LWC Data Access: @wire and Apex Calls

Your LWC explanation is good, but it is missing data access methods, particularly @wire and Apex calls.

4.1 How Does LWC Retrieve Data?

LWC can retrieve Salesforce data in three ways:

1. Lightning Data Service (LDS) – Uses lightning-record-form and lightning-record-view-form (no Apex needed).
2. @wire (Reactive Data Binding) – Fetches data reactively from an Apex method.
3. Imperative Apex Calls (Manual Execution) – Calls Apex on user action (e.g., button click).

4.2 Example: Using @wire to Query Account Data

import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {
    @wire(getAccounts) accounts;
}

• @wire(getAccounts) accounts; – Reactively fetches accounts from an Apex method.
• This method automatically re-fetches data if the record is updated.

4.3 Example: Imperative Apex Call (User Action Required)

import { LightningElement, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccounts';

export default class AccountList extends LightningElement {
    @track accounts = [];

    handleLoadAccounts() {
        getAccounts()
            .then(result => {
                this.accounts = result;
            })
            .catch(error => {
                console.error(error);
            });
    }
}

• Imperative Apex calls are useful when the data should load only when triggered (e.g., by a button click).

Possible Exam Question

"What is the best way to retrieve Apex data in LWC?"

• Answer: Use @wire for reactive data binding or Imperative Apex Calls for user-triggered fetches.