ppreeper/webtemplate
1
0
Fork 0
Code Issues 33 Projects Releases Packages Wiki Activity

28: FormSheet — centered form container with groups, notebook, button box #29

New issue
Open
opened 2026-07-05 00:45:47 -06:00 by ppreeper · 0 comments
ppreeper commented 2026-07-05 00:45:47 -06:00
Owner
Copy link

Description

Build the form view sheet layout — Odoo's o_form_view + FormGroup + Notebook + ButtonBox.

Components

FormSheet

Centered form container with max-width, padding, background.

<div class="o_form_view mx-auto" style="max-width: 1200px;">
  <ButtonBox buttons={buttons} />
  <FormGroup cols={2}>
    {field rows}
  </FormGroup>
  <FormGroup cols={4}>
    {more field rows}
  </FormGroup>
  <Notebook tabs={tabs}>
    <NotebookPage name="page1">...</NotebookPage>
    <NotebookPage name="page2">...</NotebookPage>
  </Notebook>
</div>

FormGroup

Grid-based field layout with configurable column count. Each row splits into:

  • Label column (for field label)
  • Input column (for field widget)

Notebook

Tabbed page container with horizontal tab bar. Active tab highlighted.
Tabs clickable to switch content.

ButtonBox

Action buttons rendered in the top-right area of the form (save, discard, edit,
action dropdown, etc.)

StatusBar (form)

Workflow step indicator at top of form.

References

PRD-003 §2 form
Odoo: form_controller.xml, form_group.xml, form_renderer.js, form_controller.scss
oddo_widget_subcomponents.md §5.7 (StatusBar)

## Description Build the form view sheet layout — Odoo's `o_form_view` + FormGroup + Notebook + ButtonBox. ## Components ### FormSheet Centered form container with max-width, padding, background. ```html <div class="o_form_view mx-auto" style="max-width: 1200px;"> <ButtonBox buttons={buttons} /> <FormGroup cols={2}> {field rows} </FormGroup> <FormGroup cols={4}> {more field rows} </FormGroup> <Notebook tabs={tabs}> <NotebookPage name="page1">...</NotebookPage> <NotebookPage name="page2">...</NotebookPage> </Notebook> </div> ``` ### FormGroup Grid-based field layout with configurable column count. Each row splits into: - Label column (for field label) - Input column (for field widget) ### Notebook Tabbed page container with horizontal tab bar. Active tab highlighted. Tabs clickable to switch content. ### ButtonBox Action buttons rendered in the top-right area of the form (save, discard, edit, action dropdown, etc.) ### StatusBar (form) Workflow step indicator at top of form. ## References PRD-003 §2 form Odoo: form_controller.xml, form_group.xml, form_renderer.js, form_controller.scss oddo_widget_subcomponents.md §5.7 (StatusBar)
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ppreeper/webtemplate#29
No description provided.