Building Modules

Modules are the building blocks of a Brezel application. A module packages the data schema, user interface, and business logic for a specific feature (e.g., Blog Posts, Products, Users).

In this guide, we will build a posts module, examining how to define its data structure and create its administration interface.

Module Structure

A standard module in Brezel is defined within the systems/<system-name>/modules/ directory. For example, the posts module is located at systems/kab/modules/posts/.

It typically consists of three key files:

1. Schema Definition (posts.bake.json): Defines the data fields and database structure.
2. Index Layout (posts.index.json): Configures the list view (table) for the module.
3. Detail Layout (posts.detail.json): Configures the create/edit form for the module.

1. Defining the Schema (.bake.json)

The .bake.json file is the heart of the module. It tells Brezel what data to store and how to validate it.

Here is an example from systems/kab/modules/posts/posts.bake.json:

[
    {
        "resource_module": "posts",
        "resource": {
            "identifier": "posts",
            "type": "module",
            "icon": "file-text",
            "title": "title",
            "fields": [
                {
                    "identifier": "title",
                    "type": "text",
                    "options": {
                        "rules": "required"
                    }
                },
                {
                    "identifier": "slug",
                    "type": "text",
                    "options": {
                        "rules": "required",
                        "prefix": "/"
                    }
                },
                {
                    "identifier": "draft",
                    "type": "checkbox",
                    "options": {
                        "mode": "switch"
                    }
                },
                {
                    "identifier": "category",
                    "type": "select",
                    "options": {
                        "references": "categories"
                    }
                },
                {
                    "identifier": "content",
                    "type": "wysiwyg",
                    "options": {
                        "no_paragraphs": true,
                        "height": "calc(100vh - 250px)"
                    }
                }
            ],
            "layouts": {
                "detail": "${file('/modules/posts/posts.detail.json')}",
                "index": "${file('/modules/posts/posts.index.json')}"
            }
        }
    }
]

Key Concepts

• Fields: Defined in the fields array. Common types include text, checkbox, select, wysiwyg, datetime, and file.
• Relationships: The select field type with a references option creates a relationship to another module (e.g., "references": "categories").
• Layout Linking: The layouts object links the module to its UI definitions using the ${file(...)} helper.

2. Configuring the List View (.index.json)

The index layout defines how the module’s data appears in the administration table.

Example from systems/kab/modules/posts/posts.index.json:

{
    "tabs": [
        {
            "rows": [
                {
                    "cols": [
                        {
                            "components": [
                                {
                                    "type": "resource_table",
                                    "options": {
                                        "module": "posts",
                                        "columns": [
                                            "title",
                                            "slug",
                                            "permalink",
                                            "draft",
                                            "website"
                                        ],
                                        "pre_filters": [
                                            {
                                                "column": "website.id",
                                                "operator": "=",
                                                "recipe": "getCurrentWebsite().id"
                                            }
                                        ]
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Key Concepts

• resource_table: The main component for listing data.
• columns: Specifies which fields from the schema to display.
• pre_filters: Automatically filters the list (e.g., showing only posts for the current website).

3. Configuring the Detail View (.detail.json)

The detail layout defines the form used to create and edit records. Brezel’s layout system allows for complex arrangements using rows, columns, and tabs.

Example from systems/kab/modules/posts/posts.detail.json:

{
    "tabs": [
        {
            "identifier": "general",
            "rows": [
                {
                    "cols": [
                        {
                            "span": 16,
                            "components": [
                                {
                                    "type": "field_group",
                                    "options": {
                                        "no_labels": true,
                                        "fields": [
                                            "content"
                                        ]
                                    }
                                }
                            ]
                        },
                        {
                            "span": 8,
                            "components": [
                                {
                                    "type": "headline",
                                    "options": {
                                        "identifier": "general"
                                    }
                                },
                                {
                                    "type": "field_group",
                                    "options": {
                                        "fields": [
                                            "title",
                                            "draft",
                                            "category",
                                            "publish_date"
                                        ]
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Key Concepts

• Grid System: Uses rows and cols (with span for width) to organize the page.
• field_group: Renders the input widgets for the specified fields.
• Headlines & Buttons: Standard UI components to structure the form.

Next Steps

Now that you have defined your data and UI, you can add business logic using Workflows. Check out the Workflows Guide to learn more.