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/ui-layout.md

1.7 KiB
Raw Blame History

UI layout: always update appLayout.tsx (MANDATORY)

Build navigation into the app layout: The app layout (e.g. appLayout.tsx) must include the navigation—header nav, sidebar, or both—so that every routed page is wrapped by the same shell and nav. Do not omit nav from the layout or rely on per-page nav only.

Targets (File Pattern Matching)

Apply this rule when editing React UI or layout:

  • force-app/main/default/webapplications/*/src/appLayout.tsx
  • force-app/main/default/webapplications/*/src/**/*.tsx
  • force-app/main/default/webapplications/*/src/**/*.jsx

Rule (CRITICAL)

When making any UI change that affects navigation, header, footer, sidebar, theme, or overall layout:

  1. You MUST also edit src/appLayout.tsx (the theme layout used by routes.tsx).
  2. Do not only edit pages or components and leave appLayout.tsx unchanged.
  3. Before finishing: confirm you opened and modified appLayout.tsx if the change touches layout/nav/theme. If you did not, the task is incomplete — update the layout file.

Navigation menu and placeholder name/design (often missed): When editing the layout, always update (1) the navigation menu—replace default nav items and labels with app-specific links and names; do not leave template "Home"/"About" or placeholder links; (2) the app name in header/nav brand/footer and in index.html <title>—use the actual app name, not the template placeholder; (3) any placeholder design in the shell so it matches the app. See webapp-nav-and-placeholders.md.

Path: force-app/main/default/webapplications/<appName>/src/appLayout.tsx (or the app's layout file that routes.tsx imports). (or the app’s layout file that routes.tsx imports).