kris/afv-library
1
0
Fork 0
mirror of https://github.com/forcedotcom/afv-library.git synced 2026-07-30 11:43:26 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
ae4e46d97f
afv-library/samples/webapp-template-app-react-sample-b2e-experimental/.a4drules/webapp-nav-and-placeholders.md

2.5 KiB
Raw Blame History

description alwaysApply
A4D rule — always update navigation menu and placeholder name/design; never leave default true

Navigation Menu & Placeholder Name/Design (MANDATORY)

Agents consistently miss these. You must not leave them default.

Navigation belongs in the app layout: Build the navigation into the app layout (e.g. appLayout.tsx). The layout component must include the nav—header nav, sidebar, or both—so every page is wrapped by the same shell and nav. Do not omit navigation from the layout or put it only on individual pages.

1. Navigation menu

  • Always edit the navigation menu in the layout file (typically src/appLayout.tsx). Replace default/placeholder nav items and labels with app-specific links and names.
  • Do not leave template items (e.g. "Home", "About", generic links or placeholder labels). Use real routes and labels that match the app (e.g. "Dashboard", "Products", "Orders" for an e‑commerce app).
  • The navigation is part of the app shell; it lives in appLayout.tsx (or the file that routes.tsx uses as the layout). Open that file and update every nav link and label.

Check before finishing: Did I change the nav items and labels in the layout file to match this app? If not, the task is incomplete.

2. Placeholder name and design

  • Replace the placeholder app name everywhere it appears: header, nav brand/logo area, footer, document <title>, and any "Welcome to…" or generic title text. Use the actual app name (e.g. the name used in sf webapp generate -n <AppName> or the user's requested name).
  • Replace placeholder design in the shell: default header/footer styling, generic logo area, and any template branding must be updated to match the app's aesthetic (or at least use the real app name and intentional styling).

Check before finishing: Is the app name and shell design still the template default anywhere? If yes, update it.

Where to edit

  • Layout/nav/branding: force-app/main/default/webapplications/<appName>/src/appLayout.tsx — the app layout must contain the navigation (build it in here).
  • Document title: force-app/main/default/webapplications/<appName>/index.html
  • Root page content: The component rendered at the root route (often Home or similar in routes.tsx)

Completing a web app task includes updating navigation menu, app name in header/nav/footer/title, and placeholder design in the shell—not only the main page content.