Custom menus

You can add custom menus in the backend from within dependencies.json. Furthermore, it's possible to link models to your own custom menus.

New menu

To add a new menu to an existing one, there're two things to do.

  • Create a new menu.
  • Add this menu to an existing menu.

In this example, we'll show how to add a menu to the applications menu. This is the top menu bar in the backend.

Create a new menu as a dependency

{
    "class": "ride\\web\\base\\menu\\Menu",
    "id": "menu.forms",
    "calls": [
        {
            "method": "setId",
            "arguments": [
                {
                    "name": "id",
                    "type": "scalar",
                    "properties": {
                        "value": "forms"
                    }
                }
            ]
        },
        {
            "method": "setTranslation",
            "arguments": [
                {
                    "name": "key",
                    "type": "scalar",
                    "properties": {
                        "value": "title.forms"
                    }
                }
            ]
        },
        {
            "method": "setWeight",
            "arguments": [
                {
                    "name": "weight",
                    "type": "scalar",
                    "properties": {
                        "value": 4
                    }
                }
            ]
        }
    ]
}

Creating a menu requires you to create a dependency from ride\web\base\menu\Menu. Next you can set some properties like the menus id, the translation key and the weight.

Next you'll need to add this menu in the application menu.

Adding a menu

Adding a menu to an existing menu, you should create a dependency which extends from this existing menu, and call the addMenu method. The value provided in the method call is the dependency id of the menu you've created earlier.

{
    "class": "ride\\web\\base\\menu\\Menu",
    "extends": "applications",
    "id": "applications",
    "calls": [
        {
            "method": "addMenu",
            "arguments": [
                {
                    "name": "menu",
                    "type": "dependency",
                    "properties": {
                        "interface": "ride\\web\\base\\menu\\Menu",
                        "id": "menu.forms"
                    }
                }
            ]
        }
    ]
}

Menu item

Besides creating menus, you can manually create menu items, which can be added to a menu. An example would be the following.

{
    "class": "ride\\web\\base\\menu\\MenuItem",
    "id": "my.custom.menu.item",
    "calls": [
        {
            "method": "setTranslation",
            "arguments": [
                {
                    "name": "key",
                    "type": "scalar",
                    "properties": {
                        "value": "my.custom.label"
                    }
                }
            ]
        },
        {
            "method": "setRoute",
            "arguments": [
                {
                    "name": "id",
                    "type": "scalar",
                    "properties": {
                        "value": "my.custom.route.id"
                    }
                }
            ]
        }
    ]
}

Adding this menu item to a menu is done in a similar way as adding menus.

{
    "class": "ride\\web\\base\\menu\\Menu",
    "extends": "applications",
    "id": "applications",
    "calls": [
        {
            "method": "addMenuItem",
            "arguments": [
                {
                    "name": "menuItem",
                    "type": "dependency",
                    "properties": {
                        "interface": "ride\\web\\base\\menu\\MenuItem",
                        "id": "my.custom.menu.item"
                    }
                }
            ]
        }
    ]
}

Add a model to a menu

Models are added by default in the content menu. You can however add them to other menus using the scaffold.menu option.

<model name="Test">
  	<!-- ... -->
		
 		<option name="scaffold.menu" value="forms"/>
  	<option name="scaffold.expose" value="true" />
</model>

Note: the id provided in the scaffold.menu options is the id of the menu which is set when calling the setId method from within the dependency, not the dependency id. Furthermore, there's a default menu for models connected to form submissions called submissions.menu.