Salesforce From Scratch

AI-Assisted Salesforce Development Made Simple

Page 6 — Wiring It Together in Lightning App Builder

Creating the App and Your First Live Test

Series: Build a Salesforce Guide App with AI Page: 6 of 10 Time to complete: 20–30 minutes Prerequisites: Page 5 complete (all core components deployed)

What You’re Doing in This Page

Up to this point you’ve built the data model, the approval process, the Apex service layer, and all the core LWC components. None of it is visible yet because nothing has been placed on a page. This page fixes that.

You’ll create three Lightning App Pages, build the Guide Hub app to hold them, and then run your first full end-to-end test — author a guide, submit it for approval, approve it, and read it. By the end of this page the app is working.

Create the Lightning App Pages

Guide Library page

  1. Setup → Lightning App Builder → New → App Page
  2. Name: Guide Library — the Developer Name will auto-fill as Guide_Library
  3. Layout: One Region
  4. Drag guideLibrary from the left panel onto the canvas
  5. In the right panel, tick Show Admin Controls (isAdmin = true)
  6. Click Save → Activate → Assign as Org Default → Save

Admin Guide Library page (build this component first)

Before creating this page you need the guideAdminLibrary component. Ask Claude:

💬 Prompt:

Build a guideAdminLibrary LWC component. It’s identical in layout to guideLibrary (card grid, search, New Guide button when isAdmin = true) but:

  • Fetches from getAdminGuides() not getGuides()
  • No category filter pills (admin guides are searched only)
  • Has article view and editor view managed the same way as guideLibrary
  • isExposed: true, targets: lightning__AppPage and lightning__UtilityBar
  • Has an isAdmin @api property exposed in targetConfigs

Generate the PowerShell script to write the files too.

After deploying, create the page:

  1. Setup → Lightning App Builder → New → App Page
  2. Name: Admin Guide Library
  3. Layout: One Region
  4. Drag guideAdminLibrary onto the canvas, set isAdmin = true
  5. Save → Activate

Guide Article page (standalone reader)

This page is the clean reading experience that opens when a user clicks a guide from the sidebar or modal. It must have a specific Developer Name or the navigation won’t work.

Build the guideArticleStandalone component first:

💬 Prompt:

Build a guideArticleStandalone LWC component. It:

  • Uses @wire CurrentPageReference to read c__guideId from URL state (also check guideId as fallback)
  • If the ID starts with ‘ka0’ it’s a Knowledge article — call getKnowledgeArticleDetail() and render the article with a blue Knowledge badge, title, article number, date, and the answer field (field name may vary by org — I’ll tell you mine)
  • Otherwise render c-guide-article with the ID
  • Shows an error state if no ID is present
  • isExposed: true, targets: lightning__AppPage only

My Knowledge article body field is [YOUR FIELD NAME HERE — check in Object Manager → Knowledge → Fields].

After deploying:

  1. Setup → Lightning App Builder → New → App Page
  2. Name: Guide Article
  3. Developer Name: must be exactly Guide_Article — check this carefully before saving
  4. Layout: One Region
  5. Drag guideArticleStandalone onto the canvas
  6. Save → Activate — do NOT add to any app navigation

⚠️ The Developer Name matters. The sidebar and modal navigate to a page called Guide_Article by name. If your Developer Name is anything else — GuideArticle, Guide_article, anything — the navigation will silently fail. Double-check it in the URL bar when you’re on the App Builder page for it.

Create the Guide Hub App

  1. Setup → App Manager → New Lightning App
  2. Name: Guide Hub | Developer Name: Guide_Hub
  3. Navigation: add Guide Library and Admin Guide Library pages
  4. Utility Bar: add guideAdminLibrary, label “Admin Guides”, isAdmin = true
  5. Profiles: System Administrator (add others as needed)
  6. Save

First Live Test

This is the moment everything comes together. Work through each step and if anything fails, paste the exact error into Claude with the context of which step you were on.

  1. Open App Launcher → Guide Hub
  2. You should see the Guide Library with a New Guide button
  3. Click New Guide — the editor should open
  4. Fill in: Title, Summary, Body, Category = Sales, Audience = User, Topics = Account Management
  5. Click Save as Draft — a toast appears and the editor stays open
  6. Click Submit for Approval — returns to the library
  7. Navigate directly to the Guide record (App Launcher → Guides → find it)
  8. Scroll to Approval History — click Approve
  9. Return to Guide Hub — the guide should now appear as a card in the library
  10. Click the card — the article view should open cleanly

If step 9 shows nothing, check that Is_Active__c is ticked on the guide record. Apex upserts don’t apply field defaults — the editor should be setting it to true automatically, but it’s worth checking if the guide isn’t appearing.

Check Your Work

  • ✅ Guide Library page visible in Guide Hub
  • ✅ New Guide button appears
  • ✅ Full author → approve → publish → view flow works end to end
  • ✅ Guide Article standalone page exists with Developer Name Guide_Article

What’s Next

The app is working but guides only appear in the central library. In Page 7 you’ll add the two contextual entry points that make the app genuinely useful in day-to-day work — a sidebar on record pages that surfaces relevant guides automatically, and a quick action button with object-specific and functionality tabs.

← Previous: Page 5 — Building the Core LWC Components Next → Page 7 — Contextual Sidebar and Quick Action Modal