Learn User Interface (PD1) with Interactive Flashcards
Master key concepts in User Interface through our interactive flashcard system. Click on each card to reveal detailed explanations and enhance your understanding.
Visualforce Page Fundamentals
Visualforce Page Fundamentals are essential knowledge for the Salesforce Certified Platform Developer I exam. Visualforce is a framework that allows developers to build custom user interfaces hosted natively on the Salesforce platform. Here are the key fundamentals:
**Basic Structure:** Every Visualforce page begins with the `<apex:page>` tag, which serves as the root component. Pages are stored as metadata in Salesforce and can be accessed via unique URLs following the pattern: `/apex/PageName`.
**Standard Controllers:** Visualforce pages can leverage standard controllers by specifying `standardController` attribute on the `<apex:page>` tag. This provides automatic access to standard CRUD operations, record data, and navigation without writing Apex code. For example: `<apex:page standardController="Account">` gives access to Account record data.
**Custom Controllers & Extensions:** Developers can create custom Apex controllers for complex logic using the `controller` attribute, or extend standard controllers using the `extensions` attribute. Extensions allow you to add custom functionality while retaining standard controller features.
**Expression Syntax:** Visualforce uses merge expressions with the syntax `{! expression }` to dynamically reference data, perform calculations, and access controller properties. Global variables like `$User`, `$Label`, and `$Resource` provide access to platform data.
**Component Library:** Visualforce offers a rich library of built-in components such as `<apex:form>`, `<apex:inputField>`, `<apex:outputField>`, `<apex:pageBlock>`, `<apex:commandButton>`, and `<apex:dataTable>` that handle rendering, data binding, and user interaction.
**View State:** Visualforce maintains view state to preserve page data across server requests in forms. Developers should manage view state carefully to stay within the 170KB limit.
**Static Resources:** External files like JavaScript, CSS, and images can be uploaded as static resources and referenced using `$Resource` global variable.
**Data Binding:** Visualforce supports automatic data binding between page components and controller properties, enabling seamless two-way communication between the UI and server-side logic.
Understanding these fundamentals enables developers to create powerful, custom interfaces that integrate seamlessly with the Salesforce platform.
Visualforce Controllers: Standard, Custom, and Extensions
Visualforce Controllers are the backbone of business logic in Visualforce pages, managing data and user interactions. There are three types: Standard Controllers, Custom Controllers, and Controller Extensions.
**Standard Controllers:**
Salesforce provides built-in standard controllers for every standard and custom object (e.g., Account, Contact). They offer out-of-the-box functionality such as saving, editing, deleting, and viewing records without writing any Apex code. You reference them using the `standardController` attribute: `<apex:page standardController="Account">`. Standard controllers automatically handle record access based on user permissions and sharing rules. They also support standard list controllers for working with sets of records.
**Custom Controllers:**
Custom controllers are Apex classes written from scratch to define all the logic for a Visualforce page. They are used when standard controller functionality is insufficient. Declared using the `controller` attribute: `<apex:page controller="MyCustomController">`. Custom controllers run in system mode by default, meaning they don't enforce field-level security or object permissions automatically — developers must handle security explicitly. They provide complete flexibility to implement complex business logic, call external services, or perform custom DML operations.
**Controller Extensions:**
Controller extensions augment either standard or custom controllers by adding additional functionality. They are Apex classes that extend existing controller behavior without replacing it. Declared using the `extensions` attribute: `<apex:page standardController="Account" extensions="MyExtension">`. The extension class constructor must accept an `ApexPages.StandardController` (or the custom controller) as a parameter. Multiple extensions can be comma-separated, with method resolution following left-to-right precedence. Extensions are ideal for adding custom methods, overriding standard actions, or introducing new properties while retaining standard controller benefits like record context and navigation.
**Key Exam Points:**
- Standard controllers enforce sharing rules; custom controllers run in system mode.
- You cannot use `standardController` and `controller` attributes simultaneously.
- Extensions can be used with both standard and custom controllers.
- Method resolution in multiple extensions follows left-to-right order, with the controller being the last fallback.
Lightning Web Components Basics
Lightning Web Components (LWC) is a modern programming model for building Salesforce user interfaces. Built on web standards including HTML, JavaScript, and CSS, LWC leverages native browser capabilities rather than relying on proprietary frameworks, resulting in better performance and easier development.
**Core Structure:** Every LWC consists of an HTML template file, a JavaScript file, and optionally a CSS file and an XML configuration file. The component folder name must be camelCase and match across all files. For example, a component named 'myComponent' would have myComponent.html, myComponent.js, myComponent.css, and myComponent.js-meta.xml.
**HTML Templates:** LWC uses standard HTML with special directives like `lwc:if`, `lwc:else`, `for:each`, and `iterator` for conditional rendering and list iteration. Data binding uses curly braces `{propertyName}` to display JavaScript properties in templates.
**JavaScript:** Components extend `LightningElement` from the 'lwc' module. Key decorators include:
- `@api` - Makes properties public, allowing parent-to-child communication
- `@track` - Tracks private reactive properties (though primitive properties are reactive by default)
- `@wire` - Connects components to Salesforce data using wire adapters
**Lifecycle Hooks:** Important hooks include `constructor()`, `connectedCallback()` (when inserted into DOM), `renderedCallback()` (after rendering), and `disconnectedCallback()` (when removed from DOM).
**Communication Patterns:** Parent-to-child communication uses `@api` properties. Child-to-parent uses custom events via `CustomEvent` and `dispatchEvent()`. Unrelated components communicate through Lightning Message Service (LMS) or pub-sub patterns.
**Data Access:** LWC interacts with Salesforce data through Wire Service using Lightning Data Service (LDS) adapters like `getRecord`, `createRecord`, or by calling Apex methods with `@wire` or imperatively.
**XML Configuration:** The `.js-meta.xml` file defines where the component can be placed (Lightning App Builder, Record Pages, etc.) and its API version.
LWC promotes reusability, testability, and follows modern web development standards, making it Salesforce's recommended UI framework.
Aura Components Overview
Aura Components Overview is a fundamental topic for the Salesforce Certified Platform Developer I exam, particularly within the User Interface domain. Aura Components are part of the Lightning Component Framework, which enables developers to build dynamic, responsive, and reusable UI components for Salesforce Lightning Experience, Salesforce mobile apps, and standalone applications.
Aura Components follow a component-based architecture where each component is a self-contained, reusable unit of functionality. A component bundle consists of several resources including the component markup (.cmp), controller (client-side JavaScript), helper (shared JavaScript functions), style (CSS), renderer, and design resources. The markup uses XML-based syntax with the root tag <aura:component>.
Key concepts include:
1. **Component Attributes**: Defined using <aura:attribute>, these are typed fields that store data on the component, similar to instance variables.
2. **Events**: Aura uses an event-driven architecture. Component events are handled by the component itself or a parent, while Application events follow a publish-subscribe model broadcast to all listening components.
3. **Expressions**: Use the {!v.attributeName} syntax to bind data dynamically in the markup, enabling data flow between components and their controllers.
4. **Interfaces**: Components can implement interfaces like force:appHostable, flexipage:availableForAllPageTypes, or force:hasRecordId to make them available in different contexts within Salesforce.
5. **Server-Side Communication**: Aura components communicate with Apex controllers using @AuraEnabled methods, making asynchronous calls to retrieve or manipulate data.
6. **Component Lifecycle**: Components follow a rendering lifecycle with events like init, render, and afterRender that developers can hook into.
7. **Inheritance and Composition**: Components support inheritance through the extends attribute and composition by nesting components within each other.
While Salesforce now recommends Lightning Web Components (LWC) as the preferred model, Aura Components remain important because many existing applications use them, they can coexist with LWC, and understanding them is essential for maintaining legacy code and passing the Platform Developer I certification exam.
LWC Events and Component Communication
Lightning Web Components (LWC) in Salesforce use a robust event-driven architecture for component communication, following three primary patterns: Parent-to-Child, Child-to-Parent, and Unrelated Component communication.
**Parent-to-Child Communication:**
Parent components pass data to child components using public properties decorated with `@api`. The parent sets attribute values in the child's HTML tag, and the child receives them reactively. For example, a parent can pass `<c-child name={accountName}>` and the child declares `@api name;` to receive it. Parents can also call child methods decorated with `@api`.
**Child-to-Parent Communication (Custom Events):**
Child components communicate upward by dispatching custom events using `CustomEvent`. The child creates and dispatches an event using `this.dispatchEvent(new CustomEvent('eventname', { detail: data }))`. The parent listens for this event using the `on` prefix in the template: `<c-child oneventname={handleEvent}>`. Events bubble up through the DOM by default only one level unless `bubbles: true` and `composed: true` are specified in the event options.
**Event Bubbling and Composition:**
- `bubbles: false` (default) — event stays within the immediate parent
- `bubbles: true, composed: false` — bubbles up but stops at the shadow boundary
- `bubbles: true, composed: true` — crosses shadow DOM boundaries and bubbles to the document root
**Unrelated Component Communication (Pub-Sub / Lightning Message Service):**
For components without a direct parent-child relationship, Salesforce recommends **Lightning Message Service (LMS)**. Components publish and subscribe to message channels using `@wire(MessageContext)` and methods like `publish()` and `subscribe()`. This allows communication across the DOM, even between LWC, Aura, and Visualforce components.
**Best Practices:**
- Use `@api` properties for downward data flow
- Use custom events for upward communication
- Use LMS for cross-DOM or sibling communication
- Keep events loosely coupled to maintain component reusability
Understanding these patterns is essential for the Platform Developer I exam and building scalable Salesforce applications.
Lightning Component Framework Benefits
The Lightning Component Framework is a powerful UI framework designed for developing dynamic web applications for mobile and desktop devices within the Salesforce ecosystem. Here are the key benefits:
1. **Component-Based Architecture**: The framework follows a component-based approach, allowing developers to build reusable, self-contained components. These components can be assembled together to create complex applications, promoting code reusability and maintainability.
2. **Event-Driven Model**: Lightning components communicate through events, enabling loose coupling between components. This event-driven architecture makes it easier to build scalable and modular applications where components interact without direct dependencies.
3. **Performance Optimization**: The framework uses a stateful client and stateless server architecture. It leverages client-side JavaScript controllers to reduce server round-trips, resulting in faster and more responsive applications. It also supports caching mechanisms to improve load times.
4. **Out-of-the-Box Components**: Salesforce provides a rich library of pre-built base Lightning components that developers can use immediately, significantly accelerating development time. These include standard UI elements like buttons, inputs, data tables, and record forms.
5. **Responsive Design**: Lightning components are built with responsive design principles, ensuring applications work seamlessly across different screen sizes and devices, including smartphones, tablets, and desktops.
6. **Security**: The framework enforces Lightning Locker Service (now Lightning Web Security), which provides component isolation and security best practices. This ensures that components from different namespaces cannot interfere with each other, protecting against cross-site scripting and other vulnerabilities.
7. **Seamless Salesforce Integration**: Components natively integrate with Salesforce data and metadata through force:recordData, Lightning Data Service, and standard controllers, making it simple to interact with Salesforce records.
8. **Cross-Platform Compatibility**: Applications built using the Lightning Component Framework can run inside Salesforce Lightning Experience, Salesforce Mobile App, and even in standalone apps using Lightning Out.
9. **Standards-Based Development**: The framework aligns with modern web standards, supporting JavaScript ES6+ and CSS best practices, making it accessible to web developers familiar with modern development paradigms.
These benefits make the Lightning Component Framework an essential tool for building enterprise-grade applications on the Salesforce platform.
@AuraEnabled Methods and Wire Adapters
@AuraEnabled Methods and Wire Adapters are two fundamental mechanisms in Salesforce for communication between Lightning Web Components (LWC) and the server (Apex).
**@AuraEnabled Methods:**
These are Apex methods decorated with the @AuraEnabled annotation, making them accessible from Lightning components. Key characteristics include:
1. **@AuraEnabled(cacheable=true):** Marks the method as read-only and cacheable, improving performance by storing results in the client-side cache. Cacheable methods cannot perform DML operations.
2. **@AuraEnabled without cacheable:** Used for methods that perform DML operations (insert, update, delete). These are called imperatively from JavaScript.
3. Methods must be **static** and **public** or **global** in scope.
**Wire Adapters:**
The wire service is a reactive mechanism in LWC that provisions data to components. It uses the @wire decorator to bind a property or function to a wire adapter.
1. **Wire to Property:** Data is automatically provisioned to a component property. The property receives an object with `data` and `error` attributes.
2. **Wire to Function:** Data is provisioned through a function, offering more control over data handling and processing.
3. **Built-in Wire Adapters:** Salesforce provides adapters like `getRecord`, `getObjectInfo`, `getPicklistValues`, and `getListUi` from the `lightning/ui*Api` modules, eliminating the need for custom Apex.
4. **Custom Wire Adapters:** Using @AuraEnabled(cacheable=true) Apex methods with the wire service via `import methodName from '@salesforce/apex/ClassName.methodName'`.
**Key Differences:**
- Wire adapters are **reactive** — they automatically re-fetch data when parameters change.
- Imperative Apex calls provide more **control** over when the call executes.
- Wire adapters require **cacheable=true**, while imperative calls can perform DML.
- Wire service calls are **optimized** by the framework with built-in caching and deduplication.
For the Platform Developer I exam, understanding when to use wire versus imperative calls, caching behavior, and the proper annotations is essential for building efficient Lightning components.
Flow and Agentforce Integration with UI
Flow and Agentforce Integration with UI is a powerful capability in Salesforce that enables developers to create seamless, intelligent user experiences by combining declarative automation with AI-driven agent capabilities directly within the user interface.
**Flow Integration with UI:**
Salesforce Flows can be embedded directly into Lightning pages, record pages, and custom components using the Lightning Flow component. Screen Flows provide interactive, guided user experiences with input fields, choices, and dynamic screens. Developers can launch flows from Lightning Web Components (LWC) using the `lightning-flow` base component or the `lightning/flow` module. Flows can be triggered from Quick Actions, buttons, or utility bars, making them highly versatile. Autolaunched Flows run in the background without UI but can be invoked from UI interactions. Flow outputs can dynamically update the UI, providing real-time feedback to users. Developers can pass input variables to flows and receive output variables to create contextual experiences.
**Agentforce Integration with UI:**
Agentforce brings AI-powered autonomous agents into the Salesforce UI. These agents can be embedded in Lightning pages, Experience Cloud sites, and custom applications. Agentforce agents leverage topics, actions, and instructions to handle user queries intelligently. Developers can integrate Agentforce with existing flows, Apex actions, and APIs to extend agent capabilities. The Einstein Copilot component can be placed within the UI to provide conversational AI assistance. Agents can trigger flows, execute business logic, and return results within the chat interface.
**Combined Integration:**
When combined, Flows and Agentforce create powerful automated experiences. An agent can invoke screen flows to collect structured data, or trigger autolaunched flows to process backend logic. This combination allows for conversational interfaces backed by robust automation. Developers should understand how to configure agent actions that reference flows, handle error states gracefully in the UI, and ensure proper security through sharing rules and permissions. This integration represents Salesforce's vision of combining declarative tools, AI, and custom development for optimal user experiences.
UI Security: XSS Prevention
Cross-Site Scripting (XSS) is a critical security vulnerability that Salesforce Platform Developers must understand and prevent. XSS occurs when an attacker injects malicious scripts (typically JavaScript) into web pages viewed by other users, potentially stealing session data, cookies, or sensitive information.
In Salesforce, there are three main types of XSS attacks:
1. **Stored XSS**: Malicious script is permanently stored on the server (e.g., in a database field) and executed when users view the affected page.
2. **Reflected XSS**: Malicious script is embedded in a URL or request parameter and reflected back to the user in the response.
3. **DOM-based XSS**: The attack payload is executed through modification of the DOM environment in the victim's browser.
**Prevention Techniques in Salesforce:**
- **Output Encoding**: Salesforce provides built-in encoding functions. In Visualforce, use `HTMLENCODE()`, `JSENCODE()`, `JSINHTMLENCODE()`, and `URLENCODE()` to sanitize output based on context.
- **Visualforce Auto-Encoding**: Most Visualforce components automatically HTML-encode output by default. The `<apex:outputText>` tag with `escape='true'` (default) prevents XSS.
- **Avoid Dangerous Patterns**: Never use `escape='false'` unless absolutely necessary. Avoid directly rendering user-supplied input without encoding.
- **Lightning Security**: Lightning components benefit from LockerService (now Lightning Web Security), which provides namespace isolation and restricts access to the DOM, significantly reducing XSS risks.
- **Content Security Policy (CSP)**: Salesforce enforces CSP headers that restrict inline scripts and unauthorized external resources.
- **URLFOR() Function**: Use this for generating safe URLs instead of manually constructing them.
- **Platform Encoding Methods**: In Apex, use `String.escapeSingleQuotes()`, `EncodingUtil` methods, and proper SOQL parameterized queries.
Developers should always validate input, encode output contextually, leverage Salesforce's built-in security features, and regularly review code for potential XSS vulnerabilities during development and code reviews.
UI Security: SOQL Injection Prevention
SOQL Injection is a critical security vulnerability in Salesforce development where malicious users can manipulate SOQL queries by injecting unauthorized query fragments through user-supplied input. As a Platform Developer I, understanding and preventing SOQL injection is essential for building secure applications.
**How SOQL Injection Occurs:**
When developers dynamically construct SOQL queries by concatenating user input directly into query strings, attackers can alter the query's logic. For example:
```apex
String userInput = 'test\' OR Name LIKE \'%';
String query = 'SELECT Id FROM Account WHERE Name = \'' + userInput + '\'';
```
This could expose unauthorized records by modifying the WHERE clause.
**Prevention Techniques:**
1. **Static SOQL (Inline SOQL):** The most effective prevention is using static SOQL with bind variables. Variables are automatically escaped and treated as data, not executable code:
```apex
String searchTerm = userInput;
List<Account> accounts = [SELECT Id FROM Account WHERE Name = :searchTerm];
```
2. **String.escapeSingleQuotes():** When dynamic SOQL is necessary, use this built-in method to escape single quotes in user input:
```apex
String sanitized = String.escapeSingleQuotes(userInput);
String query = 'SELECT Id FROM Account WHERE Name = \'' + sanitized + '\'';
```
3. **Typecasting:** For numeric or date inputs, cast values to their appropriate types (Integer, Date, etc.) before incorporating them into queries, ensuring non-string data cannot be manipulated.
4. **Whitelisting:** Validate user input against a predefined set of acceptable values, especially for field names or object names used in dynamic queries.
5. **WITH SECURITY_ENFORCED:** Add this clause to enforce field-level and object-level security, providing an additional layer of protection.
**Best Practices:**
- Always prefer static SOQL over dynamic SOQL
- Never trust user input directly
- Use bind variables whenever possible
- Apply escapeSingleQuotes() for all dynamic query string concatenations
- Implement proper CRUD/FLS checks alongside injection prevention
These techniques ensure your Salesforce applications remain secure against unauthorized data access through SOQL injection attacks.
CRUD and Field-Level Security Enforcement
CRUD (Create, Read, Update, Delete) and Field-Level Security (FLS) enforcement are critical security mechanisms in Salesforce that ensure users can only access and manipulate data they are authorized to handle.
**CRUD Security** controls object-level permissions, determining whether a user can create, read, update, or delete records of a specific object. These permissions are defined through Profiles and Permission Sets.
**Field-Level Security (FLS)** operates at a more granular level, controlling visibility and editability of individual fields on an object. Even if a user has read access to an object, FLS can restrict access to specific sensitive fields.
**Why Enforcement Matters:**
Salesforce does NOT automatically enforce CRUD and FLS in Apex code. While standard UI components like Lightning pages respect these settings, custom Apex code runs in system context, bypassing these security checks. Developers must explicitly enforce them.
**Enforcement Methods:**
1. **WITH SECURITY_ENFORCED** - Added to SOQL queries to enforce both CRUD and FLS. If the user lacks access, it throws an insufficient access exception.
Example: `SELECT Name FROM Account WITH SECURITY_ENFORCED`
2. **Schema.DescribeSObjectResult & Schema.DescribeFieldResult** - Programmatic checking using methods like `isAccessible()`, `isCreateable()`, `isUpdateable()`, and `isDeletable()`.
3. **Security.stripInaccessible()** - Introduced in API v45.0, this method strips fields the user cannot access from query results or DML operations. It accepts an AccessType parameter (READABLE, CREATABLE, UPDATABLE, UPSERTABLE) and returns sanitized records.
4. **Lightning Data Service (LDS)** - In Lightning components, LDS automatically respects CRUD and FLS, making it the recommended approach for data operations in the UI layer.
**Best Practices:**
- Always enforce CRUD/FLS in custom Apex controllers
- Use `Security.stripInaccessible()` for cleaner handling
- Leverage LDS in Lightning components whenever possible
- Test with non-admin users to validate enforcement
Failure to enforce CRUD and FLS can lead to security vulnerabilities and is a common reason for AppExchange security review failures.
Lightning Design System (SLDS)
The Lightning Design System (SLDS) is Salesforce's official CSS framework and design guideline system used to create consistent, modern, and responsive user interfaces across the Salesforce platform. As a key topic for the Salesforce Certified Platform Developer I exam, understanding SLDS is essential for building visually cohesive applications.
SLDS provides a comprehensive collection of design tokens, CSS classes, component blueprints, icons, and guidelines that enable developers to build applications that seamlessly match the Lightning Experience look and feel. It ensures UI consistency without requiring developers to write custom CSS from scratch.
Key features of SLDS include:
1. **CSS Framework**: SLDS offers pre-built CSS classes that handle layout, typography, spacing, colors, and responsive design. Developers apply these classes directly to HTML elements.
2. **Component Blueprints**: SLDS provides HTML and CSS blueprints for common UI components like buttons, modals, cards, data tables, and forms. These serve as templates developers can implement.
3. **Design Tokens**: These are named entities that store visual design values such as colors, font sizes, and spacing, ensuring consistency and easy theme customization.
4. **Accessibility**: SLDS is built with WCAG 2.1 accessibility standards, ensuring applications are usable by all users.
5. **Responsive Grid System**: A flexible grid layout system that adapts to different screen sizes and devices.
In Lightning Web Components (LWC), SLDS is automatically available and can be referenced using standard class names like `slds-button` or `slds-grid`. In Visualforce pages, developers can include SLDS using the `<apex:slds />` tag or by referencing the static resource.
For Aura components, SLDS styles are automatically included when using the `implements='force:appHostable'` interface or running within Lightning Experience.
Importantly, SLDS is scoped to prevent style conflicts with other frameworks. Developers should leverage SLDS rather than custom CSS to maintain platform consistency, reduce maintenance overhead, and ensure their applications align with Salesforce's evolving design standards. Understanding SLDS is fundamental for building professional-grade Salesforce applications.