Layout Basics

  3 minute read  

This is the basic layout structure of Brezel.

Tabs

  • identifier: string
  • position: int
  • icon: string
  • loaded_on_create_webhook: string (webhook event to call when this tab is loaded in module/create)
  • rows: array

Rows

  • cols: array

Cols

  • span: int
  • borderless: boolean
  • vertical_labels: boolean
  • no_labels: boolean
  • no_padding: boolean
  • components: array

Options

  • hidden_from_frontend Tabs, Rows, Cols and Components can be hidden from the frontend. This can be attached to a boolean condition.
{
    "type": "text",
    "options": {
        "recipes": {
            "hidden_from_frontend": "(Mahnungsstufe == 'final') ? false : true"
        }
    },
    "identifier": "Zinsen"
}

This text field will only show up in the modal if the user selected “final” in Mahnungsstufe.

You can define which module page to land on after login by defining a menu entry like so:

[
  {
    "resource_menu": "main",
    "resource": {
      "name": "main",
      "elements": [
        {
          "name": "dashboard",
          "type": "entry",
          "default": true
        },
        "addresses",
        "shipments",
        "billings",
        "invoice",
        "shop",
        {
          "name": "settings",
          "type": "entry",
          "recipes" : {
            "visible": "user().id == 1 ? true : false",
            "icon": "1 == 2 ? 'icon-name' : 'other-icon'"
          }
        }
      ]
    }
  }
]

In this case, the module “dashboard” is opened upon login. You can also use recipes to e.g. set the visibility or change the icon of an menu element.

Top Bar

You can use a layout to add components to the top bar. Just create a layout file like ’top_bar.bake.json’ and set the type to “top_bar”.

[{
    "resource_layout": "top_bar_layout",
    "resource": {
        "identifier": "top_bar_layout",
        "type": "top_bar",
        "spec": {
            "tabs": [
                {
                    "rows": [
                        {
                            "cols": [
                                {
                                    "span": 24,
                                    "components": [
                                        {
                                            "type": "widget",
                                            "options": {
                                                "view": "topbar.widget",
                                                "widget": "custom"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }            
            ]
        }
    }
}]

Affix

You can add custom content to the affix that is rendered on top of entity pages and contains the standard buttons and entity title. It is basically a layout row as described above, so defining it is the same as defining a row in a layout. To add content to the affix, add a property called affix to your layout spec.

{
  "spec":
  {
     "affix": {
        "cols": [
            {
                "options": {
                    "borderless": true
                },
                "components": [
                    {
                        "type": "buttons",
                        "options": {
                            "buttons": [
                                {
                                    "icon": "save",
                                    "identifier": "save",
                                    "action": "saveAndContinue",
                                    "style": "primary"
                                }
                            ]
                        }
                    }
                ]
            }
        ]
    },
    "tabs": [...]
  }
}

Buttons

You can define custom buttons which will be displayed in the top bar, or hidden in a list which opens on click on “actions”. To do so, the property name of the button object should be the same as your workflow webhook name which you want to trigger on click. You can also choose to hide standard buttons.

They have the following properties:

  • icon: string
  • style: string
  • forceTitle: boolean if this is not set or false, only the icon will be displayed.
{
  "resource": {
    "identifier": "example_module",
    "title": "title_field",
    "icon": "field-time",
    "buttons": {
      "print": {
        "display": false
      },
      "myWorkflowTrigger": {
        "icon": "check-circle",
        "style": "default",
        "forceTitle": "true"
      }
    }
  }
}