Salesforce From Scratch

AI-Assisted Salesforce Development Made Simple

Page 7 — Contextual Sidebar and Quick Action Modal

Surfacing Guides Where People Are Actually Working

Series: Build a Salesforce Guide App with AI

Page: 7 of 10

Time to complete: 30–40 minutes

Prerequisites: Page 6 complete (Guide Hub app live, first guide published)

What You’re Doing in This Page

The guide library is useful when someone knows they need help. The contextual features on this page are useful when someone doesn’t know they need help yet — or when they’re mid-task and don’t want to leave the record they’re working on.

You’ll build two components:

guideSidebar — a panel that appears in the right column of Account, Opportunity, and Case record pages. It automatically shows guides relevant to that object type based on how guides are tagged. Nothing to configure per record — it’s entirely data-driven.

guideActionModal — an “Open Guides” button in the record page action bar. Opens a modal with two tabs: guides specific to that object type, and cross-object functionality guides like list views and reports.

Both open guides in the standalone Guide Article page you created in Page 6, keeping the reading experience clean and separate from the record.

Build and Deploy the Components

guideSidebar

💬 Prompt:

Build the guideSidebar LWC component. It:

  • Uses @wire CurrentPageReference to detect the current object API name from ref.attributes.objectApiName
  • Calls getGuidesByTopic(objectApiName) imperatively when the object changes
  • Shows a compact panel with a header “Guides for this [ObjectLabel]” and a list of guide titles with category dot, category name, and read time
  • Clicking a guide navigates to the Guide_Article page using NavigationMixin (standard__navItemPage) with state { c__guideId: guideId }
  • Hides entirely if isLoading is false and guides.length is 0 — no empty panel
  • isExposed: true, targets: lightning__RecordPage only

Generate the PowerShell script for deployment too.

guideActionModal

💬 Prompt:

Build the guideActionModal LWC component. This is a Quick Action (Screen Action type). It:

  • Has @api recordId with a getter/setter — when recordId is set, immediately calls loadGuides()
  • Detects object type from recordId prefix: 001=Account, 006=Opportunity, 500=Case, 003=Contact, 00Q=Lead
  • Calls getGuidesForModal(objectApiName) to fetch guides
  • Shows two tabs: “[ObjectName] Guides (N)” and “Functionality (N)”
  • Object tab shows guides where topicType = Object (read from Topic_Assignments__r subquery)
  • Functionality tab shows guides where topicType = Functionality
  • Clicking a guide navigates to Guide_Article page using standard__navItemPage with state { c__guideId }
  • Shows empty state messages with helpful text when each tab has no guides
  • isExposed: true, targets: lightning__RecordAction with actionType: ScreenAction

Important: do NOT use @wire CurrentPageReference in this component — it breaks Screen Actions silently. Use the recordId getter/setter approach only.

💡 Why the getter/setter instead of a simple @api property? Screen Actions have a different lifecycle to regular LWC components. When you use a plain @api recordId, Salesforce injects the value after connectedCallback fires — meaning your code runs before the ID arrives. A getter/setter triggers your load function the moment Salesforce sets the value, regardless of lifecycle timing.

Place the Components

Sidebar (Account, Opportunity, Case)

  1. Open any Account record
  2. Click gear ⚙️ → Edit Page
  3. Drag guideSidebar into the right column
  4. Click Save → Activate → Assign as Org Default
  5. Repeat for Opportunity and Case

Quick Action (Account, Opportunity, Case)

For each object:

  1. Object Manager → [Object] → Buttons, Links, and Actions → New Action
Field Value
Action Type Lightning Web Component
Lightning Web Component c:guideActionModal
Label Open Guides
Name Open_Guides
  1. Click Save
  2. Go to Page Layouts → [Object] Layout → edit
  3. Find Open Guides in the Salesforce Mobile and Lightning Experience Actions palette
  4. Drag it into the actions bar
  5. Click Save

⚠️ Case-specific note: If the Case record page uses a custom Lightning page rather than the standard layout-driven page, the action won’t appear via the page layout. You’ll know this is the case if Open Guides shows on Account and Opportunity but not Case. The fix is to open the Case record page in Lightning App Builder, click the Highlights Panel, enable Dynamic Actions, and add Open Guides directly.

Tagging Guides So They Appear in the Right Places

The sidebar and modal only show guides that are tagged with the right topics. If you open the modal on an Account record and see zero guides, the most likely cause is that your guides aren’t tagged with the Account Management topic.

To fix:

  1. Open any published guide in the Guide Hub editor
  2. In the Topics section, move Account Management to the Selected list
  3. Save as Draft → Submit for Approval → Approve
  4. Open an Account record and click Open Guides — the guide should now appear

The relationship is: Guide → tagged with → Guide Topic → has Object_API_Name__c = Account → appears on Account records.

Check Your Work

  • ✅ Sidebar appears on Account, Opportunity, and Case records
  • ✅ Sidebar hides completely when no relevant guides exist
  • ✅ Open Guides button appears in the action bar on record pages
  • ✅ Clicking a guide from either the sidebar or modal opens the Guide Article standalone page
  • ✅ Object tab and Functionality tab both work in the modal

What’s Next

The app now surfaces guides contextually. In Page 8 you’ll add video support — YouTube embeds, Vimeo, external links, and native Salesforce File videos via a Visualforce bridge.

← Previous: Page 6 — Wiring It Together in Lightning App Builder Next → Page 8 — Video Support and the Visualforce Bridge