Editing a page in the App Builder

Preview, Build and Interact, the components that show sample data, and what each one can do.

1. 1

   Three modes, one switch

   The switch above the canvas is always in one of three modes, and the active one is filled in. Preview shows the page as it will look. Build shows the regions and drop zones so you can add and arrange components. Interact makes the page behave like Salesforce: quick actions, buttons and screen flows run.

2. 2

   Add components

   In Build mode the Components panel lists every standard App Builder component for the page type; drag one onto a drop zone or click it to add it. Quick inserts at the bottom of the panel add a ready-made block with sample content in one click. Click any component on the canvas to change its settings in the Properties panel.

3. 3

   Lists and records that already have data

   A single related list, the related list quick links, a List View and Recent Items show sample records for the object you choose, as many as the "Number of Records to Display" setting asks for. A List View also lets you pick the object, one of its standard list views (Recently Viewed, All Opportunities, Closing This Month…) or a custom name, and the fields to show as columns.

4. 4

   Related lists as a table or as tiles

   Each related list has a Display as setting: Basic List shows the columns in a table; Enhanced List shows a tile per record with the icon, the name and its field pairs, the way Salesforce shows lists in the sidebar. Notes & Attachments keeps its file upload area.

5. 5

   Report charts and rich text

   A Report Chart draws a donut, bar, column or line chart from sample figures chosen from the report name. Rich Text has a formatting toolbar (bold, italic, headings, lists, links, alignment) and an HTML view for anything the toolbar does not cover.

6. 6

   Components Salesforce renders from live data

   Visualforce, Company Hierarchy, Invoice Preview, CRM Analytics and similar components cannot run here. Give them content under "What it shows": type an intro, label/value rows, list items and buttons, or describe the component and choose Draft with AI to have it written for you. Visualforce also accepts page markup.

7. 7

   Custom component buttons

   A custom component stands in for a Lightning web component your developers will build. Each of its buttons can run a screen flow, show a toast, open a dialog with text, move the Path to a stage or go to another screen, so a stakeholder can click it in Interact mode and see what happens.

8. 8

   Multi-step prototypes

   The Page panel has a Screens section. Add a Second Screen turns the page into step 1 and adds step 2; add, rename, reorder or remove steps from there. The Flow Screens strip above the canvas switches between them, and a quick action or custom component button can open a step. Every edit applies to the step in view.

9. 9

   Two Salesforce looks

   SLDS 1 and SLDS 2 at the top of the studio switch the page between the classic Lightning look and the current one. Both were measured from live orgs, down to the highlights panel bands, the path colours and the card headers, so the same page reads correctly in either.