SALESFORCE-PD1 User Interface Practice Test 7 — 15 Questions

Question 1

A developer is writing a Visualforce page and wants to include standard Salesforce styling and icons. What tag should be added to the top of the Visualforce page?

Accepted Answer

. includes the Salesforce Lightning Design System styles and assets in a Visualforce page.

Answer

<apex:lightningStyleguide />

Answer

<apex:stylesheet value="{!$Resource.SLDS}" />

Answer

<apex:includeLightning />

Question 2

A developer is troubleshooting a Lightning Web Component where data returned from an Apex wire adapter needs to be mutated before being rendered. What is the correct pattern to handle this?

Accepted Answer

Create a shallow copy or clone of the wire data object in a getter or property assignment before mutation.. Data returned from an Apex wire adapter is immutable (read-only). To mutate it, you must create a shallow copy or clone of the object before making changes. This can be done in a getter or by assigning the copied data to a new property. This pattern ensures you do not attempt to modify the original wire data, which would cause an error.

Answer

Decorate the wire property with @api mutable to allow direct writes.

Answer

Use the eval() function to strip immutability constraints from the prototype chain.

Answer

Directly assign new properties to the object returned by the wire adapter property.

Question 3

Which lifecycle hook in a Lightning Web Component runs after every render of the component?

Accepted Answer

renderedCallback(). renderedCallback() is the LWC lifecycle hook invoked after every render of the component, including the initial render and any subsequent re-renders triggered by reactive property changes. It is the correct place to perform DOM manipulation or logic that depends on the rendered output, though developers must guard against infinite loops by checking whether work has already been done.

Answer

constructor()

Answer

connectedCallback()

Answer

render()

Question 4

A developer is writing a Lightning Web Component and needs to load a third-party JavaScript library (such as D3.js) stored as a static resource. Which lifecycle hook is most appropriate for initiating the load using loadScript?

Accepted Answer

connectedCallback(). Third-party scripts should be loaded in connectedCallback() because the component must be inserted in the DOM before script tags can be appended.

Answer

constructor()

Answer

disconnectedCallback()

Answer

renderedCallback()

Question 5

A developer needs to display a toast notification in a Lightning Web Component when a record is successfully saved. Which module should the developer import?

Accepted Answer

import { ShowToastEvent } from 'lightning/platformShowToastEvent';. Lightning Toast notifications are triggered by importing ShowToastEvent from 'lightning/platformShowToastEvent'.

Answer

import { Toast } from 'lightning/toast';

Answer

import ShowToast from 'force:showToast';

Answer

import { showNotification } from 'lightning/notificationsLibrary';

Question 6

A developer is creating a Visualforce page that overrides the standard Account View action. Which attribute must be included in the <apex:page> tag to ensure standard controller functionality?

Accepted Answer

standardController="Account". The standardController attribute on <apex:page> binds the page to a Salesforce standard controller for a specific object, giving the page access to that object's fields, standard actions, and record context. When overriding a standard action like Account View, the page must declare standardController="Account" so the platform knows which object's standard controller to instantiate and how to pass the record Id. Without it, the page has no controller and cannot leverage standard save, view, or record-binding behavior.

Answer

controller="Account"

Answer

object="Account"

Answer

recordId="Account"

Question 7

A developer is building an Aura component and needs to include a Lightning Web Component inside it. How does the Aura markup reference the LWC?

Accepted Answer

. In Aura markup, a Lightning Web Component is referenced using the c: namespace followed by the component's camelCase name, e.g., . This is the documented syntax for embedding an LWC inside an Aura component. The c: namespace maps to the default namespace for custom components in the org.

Answer

<apex:includeComponent name="myLwcComponent" />

Answer

<lightning:lwc name="myLwcComponent" />

Answer

<aura:component include="myLwcComponent" />

Question 8

Which CSS methodology forms the foundation of the styling architecture in Salesforce Lightning Design System (SLDS)?

Accepted Answer

BEM (Block Element Modifier). Salesforce Lightning Design System (SLDS) is built on the BEM (Block Element Modifier) CSS naming methodology, which structures class names as block__element--modifier to create predictable, reusable, and scoped styles. SLDS class names such as slds-button, slds-button__icon, and slds-button_brand directly reflect BEM conventions. This methodology underpins SLDS's modularity and maintainability across components.

Answer

Bootstrap grid standards

Answer

OOCSS exclusively without modifiers

Answer

Tailwind utility prefixes

Question 9

A developer is implementing a Lightning Web Component with a custom CSS file. How does the component load its associated stylesheet?

Accepted Answer

Automatically by sharing the exact base file name in the same component bundle folder.. In a Lightning Web Component bundle, the CSS file is loaded automatically when it shares the exact base file name with the component and resides in the same bundle folder. For example, `myComponent.css` alongside `myComponent.js`, `myComponent.html`, and `myComponent.js-meta.xml` is applied automatically — no import or link tag is needed.

Answer

By declaring the stylesheet in the component's js-meta.xml configuration file.

Answer

By importing the CSS file explicitly at the top of the JavaScript file using an import statement.

Answer

Using a <link rel="stylesheet"> tag inside the component HTML template.

Question 10

A developer needs to create a custom tab for a Lightning Web Component so it can be navigated to from the App Launcher. What type of custom tab must be created?

Accepted Answer

Lightning Component Tab. Lightning component tabs allow Lightning Web Components and Aura components to be exposed as tabs.

Answer

Visualforce Tab

Answer

Object Tab

Answer

Web Tab

Question 11

A developer is building a Lightning Web Component that includes user input fields. To adhere to best practices for accessibility and SLDS form styling, how should form inputs be structured?

Accepted Answer

Use SLDS form element containers with corresponding or HTML input elements paired with explicit labels.. SLDS provides form element containers (slds-form-element, slds-form-element__label, slds-form-element__control) that pair labels with inputs for correct spacing, alignment, and screen-reader association. Using lightning-input (which renders SLDS-compliant markup with built-in label support) or native HTML inputs wrapped in these SLDS containers with explicit associations satisfies both accessibility and styling best practices.

Answer

Use standard HTML inputs without associated label elements.

Answer

Use <table> tags for layout alignment of form fields.

Answer

Apply inline CSS display:flex directly to raw text areas.

Question 12

A developer creates a parent Lightning Web Component containing a child component. The parent needs to call a public method defined inside the child component. How is this accomplished?

Accepted Answer

Use this.template.querySelector('c-child-component').publicMethodName() in the parent component.. In LWC, a parent can call a public method on a child component by querying the child element from the parent's template and invoking the method directly. The child must expose the method with the @api decorator, and the parent uses this.template.querySelector('c-child-component') to obtain the element reference, then calls the method on it. This is the documented pattern for parent-to-child method invocation.

Answer

Use the publish() method of the Lightning Message Service.

Answer

Update a shared reactive property passed down via @api.

Answer

Dispatch an event from the parent and listen to it in the child component.

Question 13

A developer is writing a Visualforce page and wants to display messages generated by controllers or validation rules. Which component should be used?

Accepted Answer

. displays all messages queued on the page for the current request.

Answer

<apex:errorMessages />

Answer

<apex:outputPanel type="messages" />

Answer

<apex:messageLog />

Question 14

A developer is implementing a custom pagination mechanism in a Lightning Web Component. The component uses an Apex controller method that returns a list of records. Which technique prevents excessive heap size and improves performance when dealing with large datasets?

Accepted Answer

Use server-side pagination passing page offset and limit parameters to the Apex controller.. Implementing server-side pagination with OFFSET and LIMIT or using standard database query locators in Apex is best practice.

Answer

Fetch all records in a single transaction and slice the array in JavaScript.

Answer

Store the entire dataset in browser local storage for client-side manipulation.

Answer

Use the @wire decorator with an unbounded query and enable auto-caching.

Question 15

A developer is building a Lightning Web Component and wants to define a property that can be set by a parent component. Which decorator is required?

Accepted Answer

@api. The @api decorator in Lightning Web Components marks a property or method as public, making it accessible to parent components. It is the required decorator for any property that a parent needs to set, and it also makes the property reactive. Without @api, the property is private and cannot be set from outside the component.

Answer

@track

Answer

@auraEnabled

Answer

@wire