Templates are UI components dedicated to rendering forms for a specific Model. They bridge the gap between the Store (state) and the Page (layout).
🎨Presentational Component
Templates should focus on UI layout and field rendering. Business logic should remain in the Store or Service.
File Convention
Templates are located in the library directory corresponding to their Model. The filename must follow the PascalCase convention.
lib/[model]/[Model].Template.tsx
Standard Structure
A Template file typically exports one or more functional components. Each component should accept a className prop.
Example Code
Product.Template.tsx
Template Usage Patterns
Templates are designed to be used within wrapper components that handle data loading, modal management, and form submission contexts.
1. In Modal (Model.Edit)
Use 'Model.Edit' to render the template inside a modal or an inline edit view. The wrapper handles the edit state based on the slice Name and model ID.
Ticket.Util.tsx
2. In Page (Load.Edit)
Use 'Load.Edit' for full-page editing scenarios where data is pre-fetched by a loader. It connects the 'edit' object from the loader to the Template.
EditPage.tsx
Template Best Practices
1️⃣Use Layout.Template
Always wrap the content in <Layout.Template> to ensure consistent padding and spacing within the form context.
2️⃣Use Auto-Generated Actions
Bind 'onChange' directly to 'st.do.set[Field]On[Model]' whenever possible. This reduces boilerplate code.
3️⃣Split Large Forms
If a model has many fields, create multiple components (e.g., General, Detail, Settings) in the same file to organize them logically.
