SF-PD2 User Interface — 20 Questions

Question 1

A company wants to implement a multi-page form in a Lightning Experience Console app that allows users to navigate between stages while maintaining state. Which TWO features of the Lightning Workspace API should a developer use to enhance the user experience by managing tab behavior? (Choose TWO)

Choose an answer to begin — your selection is scored in the full session.

Accepted Answer

disableTabClose(). The Lightning Workspace API provides programmatic control over the console environment, which is essential for complex business processes. Managing tab closing and titles ensures that users do not lose work accidentally and can easily identify their current task. These methods allow developers to hook into the lifecycle of console tabs to provide a seamless and guided navigation experience.

Answer

setTabHighlighted()

Answer

getEnclosingTabId()

Answer

openSubtab()

Question 2

Refer to the exhibit. A developer is using the getRecord wire adapter in a Lightning Web Component with the configuration shown. If the current user does not have FLS (Field Level Security) access to the 'Phone' field, what will be the result when the wire service executes?

Accepted Answer

The wire service will return the record data, but the 'Phone' field will be omitted.. Lightning Data Service (LDS) honors Field Level Security automatically to ensure data privacy and security. When using getRecord, the fields array represents mandatory requirements, while optionalFields allows the component to function even if those fields are unavailable. This distinction is vital for creating robust components that gracefully handle varying user permissions across different profiles and roles.

Answer

The wire service will return an error and the data property will be undefined.

Answer

The entire transaction will roll back and a system exception will be logged.

Answer

The 'Phone' field will be returned with a null value regardless of actual data.

Question 3

A developer needs to integrate a third-party JavaScript library that performs complex data visualizations within a Lightning Web Component. The library is stored as a Static Resource. What is the correct pattern for loading this library and ensuring it is initialized only after it is fully loaded?

Accepted Answer

Invoke loadScript in the renderedCallback() and handle the returned promise.. Integrating external libraries in LWC requires using the platformResourceLoader module to maintain security and performance. Since loading resources is an asynchronous operation, developers must use the loadScript function, which returns a Promise. Proper initialization must occur within the .then() block or after an await to ensure the library's functions are available in the global scope.

Answer

Import the library using a standard ES6 import statement at the top of the JS file.

Answer

Use the connectedCallback() to append a script tag to the document head manually.

Answer

Add the library path to the component's XML configuration file under the 'scripts' tag.

Question 4

When migrating an existing Aura component to Lightning Web Components, which THREE factors must the developer consider regarding interoperability and composition? (Choose THREE)

Accepted Answer

A Lightning Web Component can be nested inside an Aura component.. Aura and LWC can coexist, but there are strict rules governing their interaction. Understanding these rules is crucial for phased migrations. Aura components can contain LWC, but LWC cannot contain Aura. Furthermore, communication between the two must follow specific patterns to ensure that data and events are handled correctly across the different framework runtimes.

Answer

An Aura component can be nested inside a Lightning Web Component.

Answer

Both frameworks share the exact same CSS scoping and lifecycle hooks.

Question 5

A developer needs to ensure that a Lightning Web Component's CSS styles do not leak out to other components on the page and that global styles do not affect the component's internal structure. Which TWO concepts describe how LWC achieves this? (Choose TWO)

Accepted Answer

Shadow DOM. LWC uses Shadow DOM to provide strong encapsulation for both HTML and CSS. This ensures that components are truly modular and reusable without fear of style collisions. Developers need to understand how styles are scoped to the component's host and how the framework manages the boundary between the component and the rest of the page.

Answer

CSS Modules

Answer

BEM Methodology

Answer

!important declarations

Question 6

A developer wants to use the Lightning Message Service (LMS) to communicate between a Visualforce page and a Lightning Web Component on the same Lightning Page. Which TWO steps are required to implement this? (Choose TWO)

Accepted Answer

Create a Lightning Message Channel metadata file.. Lightning Message Service (LMS) is the bridge that allows different Salesforce UI technologies to communicate. It requires a shared definition called a Message Channel. Both the Visualforce page and the LWC must reference this channel to publish or subscribe to messages, enabling cross-framework interoperability within the same browser session.

Answer

Use the sforce.one.publish() method in Visualforce.

Answer

Configure the components to use the same Apex Controller.

Answer

Enable 'LMS Mode' in the Salesforce Org Settings.

Question 7

A developer needs to build a custom Lightning Web Component that dynamically loads child components based on user interaction without waiting for the initial page load. Which approach should the developer use to optimize performance and rendering?

Accepted Answer

Implement dynamic component importing using JavaScript import() expressions to fetch child definitions on demand.. Utilizing dynamic imports with the lwc dynamic module loading capability allows developers to defer loading child components until explicitly required by runtime logic. This pattern drastically reduces initial payload size, minimizes bundle initialization time, and enhances the overall responsiveness of enterprise Lightning applications.

Answer

Use the standard template if:true directive around statically imported child components to defer their execution.

Answer

Invoke Aura delegation methods from within the Lightning Web Component wrapper to lazy-load child elements asynchronously.

Answer

Configure the component metadata file with lazyLoad equals true to instruct the Lightning Container Service to defer loading.

Question 8

A developer is building a Lightning Web Component that is placed on a Lightning record page. A child component nested inside the same template fires a custom event named `recordselected` that bubbles and is composed. The parent template listens for the event. During testing, the parent's handler never runs, and the console shows the event was dispatched. Which change should the developer make so the parent handler receives the event?

Accepted Answer

In the parent template, change the listener attribute to `onrecordselected={handleRecordSelected}` and ensure the child dispatches with the exact event name `recordselected`.. Declarative event listeners in Lightning Web Component templates follow a strict naming rule: the attribute is the event name prefixed with `on`, and the event name must match exactly in lowercase. A custom event named `recordselected` is therefore bound in the parent template with `onrecordselected`. Case mismatches, such as camel-cased attribute names, silently fail to register, which explains why the child dispatches but the parent handler never executes.

Answer

Wrap the child component in an `aura:component` and use an application event so the parent can receive the payload.

Answer

Change the child's dispatch call to `this.dispatchEvent(new CustomEvent('recordselected', { bubbles: true, composed: true }))` and have the parent register the listener with `addEventListener` in a lifecycle hook.

Answer

Set `@api recordselected` on the child and pass the handler function down as a property from the parent.

Question 9

A developer is building a Lightning Web Component that needs to communicate with a parent Aura component. The LWC is nested inside the Aura component. The developer wants to send data from the LWC to the Aura component. Which two methods can be used to achieve this? (Choose two.)

Accepted Answer

Dispatch a standard DOM CustomEvent from the LWC that the Aura component listens for using an event handler in its markup.. The two correct methods are dispatching a standard DOM CustomEvent that the Aura component can listen for, and using Lightning Message Service to publish and subscribe to messages. Both are supported patterns for communication from LWC to Aura. The other options either describe the reverse direction (Aura to LWC) or attempt to access internal state, which is not allowed.

Answer

Use the Aura component's controller to call a method on the LWC using the LWC's public API.

Answer

Access the Aura component's attributes directly from the LWC using this.template.host or similar DOM traversal.

Answer

Call a public method on the Aura component using the Aura component's aura:method from the LWC.

Question 10

A developer is creating a Lightning Web Component that must be used as a quick action on the Account object. The component needs to display the account's name and allow the user to update the account's phone number. The developer wants to ensure the component receives the record ID and can access the record data. Which approach should the developer use?

Accepted Answer

Use the @api decorator to expose a recordId property and configure the component's target to include lightning__RecordAction.. For a Lightning Web Component to be used as a quick action, it must target lightning__RecordAction in its meta.xml. The record ID is then passed to the component through a public property named recordId, which must be decorated with @api. This allows the component to access the record ID and use it with wire adapters or imperative Apex to fetch and update record data.

Answer

Use the getRecord wire adapter with the recordId from the @api property and specify the fields to retrieve.

Answer

Implement the NavigationMixin and use the CurrentPageReference to extract the record ID.

Answer

Use the force:hasRecordId interface in the component's meta.xml file.

Question 11

A developer is building a Lightning Web Component that must call an Apex method and immediately display the returned Account records. The Apex method is decorated with @AuraEnabled(cacheable=true). The developer wants the component to refresh its data whenever the record page's data changes. Which approach should the developer use?

Accepted Answer

Use @wire with the Apex method and import refreshApex from @salesforce/apex.. The wire service is the only mechanism that combines Apex invocation with automatic cache provisioning and re-provisioning. Because the Apex method is cacheable, the framework can subscribe to the Lightning Data Service cache for the records it returns. Importing refreshApex and calling it with the wire result allows the component to refresh on demand after DML, keeping the UI consistent with the server state.

Answer

Subscribe to a platform event that fires whenever the Account record is modified.

Answer

Call the Apex method imperatively inside connectedCallback and store the result in a property.

Answer

Use getRecord from lightning/uiRecordApi with the Apex method's return type.

Question 12

A developer is building a Lightning Web Component that displays a list of contacts for a given account. The component uses the getRecord wire adapter to retrieve the account's contacts. The developer wants to ensure the component updates automatically when the contact records change on the server. Which two actions should the developer take? (Choose two.)

Accepted Answer

Use the refreshApex function to refresh the wired data after performing an update to the contact records.. To ensure the component updates when contact records change, the developer should use refreshApex to manually refresh the wired data after updates, and notifyRecordUpdateAvailable to inform the Lightning Data Service of record changes. These two functions work together to invalidate caches and trigger re-fetching, keeping the UI in sync with server-side changes.

Answer

Use the getRelatedListRecords wire adapter to fetch the contacts and rely on its built-in refresh capabilities.

Answer

Use the getRecord wire adapter with the appropriate fields and ensure the component is within a record page context.

Answer

Subscribe to the lightning:empApi channel to receive notifications when contact records change.

Question 13

A developer is building a Lightning Web Component that must call an Apex method to retrieve a list of Accounts and display them. The Apex method is annotated with @AuraEnabled(cacheable=true). The developer writes the following import statement: import getAccounts from '@salesforce/apex/AccountController.getAccounts'; and then calls it in a wire adapter. Which wire adapter should the developer use to invoke this Apex method?

Accepted Answer

Use the @wire decorator with the imported Apex method.. The correct approach is to use the @wire decorator with the imported Apex method. The import statement provided is correct (default import), and the wire decorator invokes the Apex method reactively. The other options either use incorrect adapters or incorrect import syntax. The developer must combine the correct import with the @wire decorator to retrieve data.

Answer

import { getAccounts } from '@salesforce/apex/AccountController.getAccounts';

Answer

import { wire } from 'lwc';

Answer

import { getRecord } from 'lightning/uiRecordApi';

Question 14

A developer is building a Lightning Web Component that must render a list of contacts and allow the user to select multiple contacts to delete. The component uses lightning-datatable with a custom data source. Which TWO actions must the developer take to handle row selection and deletion correctly? (Choose two.)

Accepted Answer

Call refreshApex on the wired data after deleting the selected contacts to update the table.. Handling row selection requires listening for the onrowselection event and storing the selected rows from the event detail. After deleting those records, the table must be refreshed so it no longer displays them; refreshApex re-executes the wired Apex method and re-provisions the data. Together, these two actions let the component capture user intent and reflect the deletion in the UI.

Answer

Use the getRecord wire adapter to retrieve each selected contact before deleting it.

Answer

Set the key-field attribute to the Id field and enable the show-row-number-column attribute.

Answer

Set the sortedBy attribute on lightning-datatable to the field used for selection.

Question 15

A developer is building a Lightning Web Component that must display a custom UI in a Visualforce page using Lightning Out. The component uses the lightning/navigation module to navigate to a record page. When the component is rendered in the Visualforce page, the navigation fails. What is the most likely cause?

Accepted Answer

The navigation service requires the Lightning Experience container, which is not present in a standalone Visualforce page.. The lightning/navigation service is designed to work within the Lightning Experience container. When a Lightning Web Component is used in a Visualforce page via Lightning Out, it runs outside that container, so navigation calls fail. The correct solution is to ensure the component runs in a supported context or use an alternative navigation method.

Answer

The component must use the NavigationMixin from lightning/navigation instead of the navigation module.

Answer

The Visualforce page must include the lightningOut.js script and define a Lightning Out app.

Answer

The lightning/navigation module is not supported in Lightning Out.

Question 16

A developer is creating a Lightning Web Component that renders a list of contacts fetched imperatively with getRecord or a wire adapter. Each row has a button that opens a custom modal defined in the same component. The developer wants the modal markup to exist in the DOM only while it is open, and wants to avoid a full page navigation. Which approach best satisfies these requirements?

Accepted Answer

Use if:true on a template element wrapping the modal markup and toggle a boolean property when the button is clicked.. Conditional rendering with the if:true directive adds or removes the wrapped markup from the DOM based on a tracked boolean, which satisfies both the visibility requirement and the no-navigation requirement. Hiding with CSS, using unsupported base components, or navigating away all fail one of the stated goals.

Answer

Apply the slds-hide CSS class to the modal container and toggle the class when the button is clicked.

Answer

Navigate to a separate Lightning page using NavigationMixin and pass the record id in the state.

Answer

Use the lightning-modal-base component and set its open attribute to false initially.

Question 17

A developer is building a Lightning Web Component hosted inside a Visualforce page via lightning:container. The component needs to invoke an Apex method that returns sensitive data. The developer wants the call to run in the user's context and respect Apex sharing rules, without exposing the method to unauthenticated callers. Which approach should be used?

Accepted Answer

Annotate the Apex method with @AuraEnabled and call it from the component with an imperative import, relying on the user's session for authentication.. Invoking an @AuraEnabled Apex method imperatively from a Lightning Web Component uses the current user's authenticated session, so authentication is inherent and Apex sharing rules apply. Cacheable wiring is meant for read-only, cache-tolerant data, while REST resources and global classes do not provide the same straightforward, secure invocation path for this scenario.

Answer

Mark the Apex class as global and call the method directly from JavaScript using the class name.

Answer

Annotate the Apex method with @AuraEnabled(cacheable=true) and call it from the LWC using a wired property.

Answer

Expose the Apex method through a @RestResource and call it with fetch from the component.

Question 18

A developer is building a Lightning Web Component for a Lightning Experience record page that must display field values from the current record and re-render automatically whenever the user edits and saves those fields on the page. The component should not make its own Apex callout. Which TWO techniques should the developer use to meet these requirements? (Choose two.)

Accepted Answer

Decorate a property with @wire using the getRecord wire adapter and pass the record id from @api recordId.. The getRecord wire adapter provides reactive record data when given the recordId from the record page context, and the cache-invalidation techniques getRecordNotifyChange or refreshApex ensure the adapter re-fetches after a save. Imperative Apex, Lightning Message Service, and the Aura force:recordData component do not deliver the required automatic refresh.

Answer

Subscribe to the Lightning Message Service channel for record updates and refresh on every message.

Answer

Add a force:recordData component to the template and bind its fields attribute to the component properties.

Answer

Use an @api property named recordId and call Apex imperatively inside connectedCallback to load the fields.

Question 19

A developer is creating a Lightning Web Component that must be placed on a Lightning record page for the Case object. The component needs to read the record Id from the page context and then perform an imperative Apex call. Which approach correctly obtains the record Id in the component?

Accepted Answer

Use the @wire decorator with getRecord from lightning/uiRecordApi to read the Id field automatically.. Lightning Web Components placed on a record page receive the record Id through the framework. Declaring an @api recordId property or using @wire with getRecord from lightning/uiRecordApi gives the component the current record context. This is the supported, stable approach and avoids brittle URL parsing or misusing server-side APIs for client-side context.

Answer

Import the recordId property from lightning/pageReference and assign it to a component property.

Answer

Call Apex.ConnectApi.Case.getCase() to retrieve the current Case Id from the page context.

Answer

Read the Id from window.location.href by parsing the URL query parameters in connectedCallback.

Question 20

A developer is building a Lightning Web Component that displays a list of contacts and must allow the user to navigate to a selected contact's record page. The component is deployed both to Lightning Experience and to a Salesforce mobile app. Which TWO techniques are supported for performing this navigation? (Choose two.)

Accepted Answer

Import NavigationMixin from lightning/navigation and use this[NavigationMixin.Navigate] with a standard__recordPage page reference.. NavigationMixin is the supported navigation API for Lightning Web Components and works in both Lightning Experience and the mobile app. A component can build a standard__recordPage page reference directly in JavaScript or obtain a PageReference from Apex and pass it to the navigation service. Aura events, raw location assignment, and display-only URL components do not provide the same supported programmatic navigation behavior.

Answer

Generate a URL with the force:navigateToSObject event and dispatch it from the component.

Answer

Use the lightning-formatted-url component with a target of _self to link to the record.

Answer

Set window.location.href to the Salesforce record URL to force a full page load.