Control Panel

The control panel defines the upper most admin UI structure. Every page's control panel you view in the admin is defined by a module.

<?php namespace Anomaly\ProductsModule;

use Anomaly\Streams\Platform\Addon\Module\Module;

class ProductsModule extends Module
{

    /**
     * The module sections.
     *
     * @var array
     */
    protected $sections = [
        'products'   => [
            'buttons'  => [
                'new_product' => [
                    'data-toggle' => 'modal',
                    'data-target' => '#modal',
                    'href'        => 'admin/products/choose',
                ],
            ],
            'sections' => [
                'attributes' => [
                    'href'    => 'admin/products/attributes/{request.route.parameters.product}',
                    'buttons' => [
                        'add_attribute',
                    ],
                ],
                'modifiers'  => [
                    'href'    => 'admin/products/modifiers/{request.route.parameters.product}',
                    'buttons' => [
                        'add_modifier',
                    ],
                ],
                'options'    => [
                    'href'    => 'admin/products/options/{request.route.parameters.modifier}',
                    'buttons' => [
                        'add_option',
                    ],
                ],
                'variants'   => [
                    'href'    => 'admin/products/variants/{request.route.parameters.product}',
                    'buttons' => [
                        'new_variant',
                    ],
                ],
            ],
        ],
        'categories' => [
            'buttons' => [
                'new_category',
            ],
        ],
        'types'      => [
            'buttons'  => [
                'new_type' => [
                    'data-toggle' => 'modal',
                    'data-target' => '#modal',
                    'href'        => 'admin/products/types/choose',
                ],
            ],
            'sections' => [
                'assignments' => [
                    'href'    => 'admin/products/types/assignments/{request.route.parameters.type}',
                    'buttons' => [
                        'assign_fields' => [
                            'data-toggle' => 'modal',
                            'data-target' => '#modal',
                            'href'        => 'admin/products/types/assignments/{request.route.parameters.type}/choose',
                        ],
                    ],
                ],
            ],
        ],
        'fields'     => [
            'buttons' => [
                'new_field' => [
                    'data-toggle' => 'modal',
                    'data-target' => '#modal',
                    'href'        => 'admin/products/fields/choose',
                ],
            ],
        ],
    ];

}

Introduction

This section will introduce you to the control panel components and how to use them.

Sections

The control panel sections are the building blocks for a module's UI.

The Module Segment

Modules are the primary building block of the control panel and must be routed by their slug first.

admin/products // Products module
admin/settings // Settings module
The Section Segment

The third slug is reserved for sections. Each module is divided into sections. The first section, known as the default section does not require a URI segment.

admin/products              // default section of products module
admin/products/categories   // "categories" section of products module
admin/products/brands       // "brands" section of products module
**Pro-tip:** An excellent naming convention is to name your products after your primary stream. And your default section after your module and primary stream as well so everything aligns nicely.
Additional Segments

Aside from nesting sections the control panel no longer has any interest in your URI pattern after the section segment.

Buttons

Each section can define buttons that display when that section is active. Buttons can be used for anything! Very often they are used for displaying create a new entry buttons for example.

Basic Usage

The control panel is entirely defined in your Module class. When you create a module you can define the $sections property to define the control panel structure for that module.

Module::$sections

The sections property is used to define the sections for the module.

Example

protected $sections = [
    'products' => [
        'buttons' => [
            'create',
        ],
    ],
    'categories' => [
        'buttons' => [
            'create',
        ],
    ],
];

The Section Definition

Below is a list of all section definition properties available.

Properties
Key Required Type Default Description

$slug

true

string

The section array key.

The slug will become the URI segment and must be unique.

$title

false

string

{vendor}.module.{module}::section.{slug}.title

The section title or translation key.

$description

false

string

{vendor}.module.{module}::section.{slug}.description

The section description or translation key.

$buttons

false

array

null

An array of button definitions.

$icon

false

string

null

A registered icon string or icon class.

$class

false

string

null

A CSS class to append to the section.

$matcher

false

string

The section's URL

A string pattern to test against a request path to determine if the section is active or not. Example: admin/products/*/variants

$parent

false

string

null

The slug of the parent section if any. Sub-sections will not display in the navigation. Sub-sections highlight their parent when active but display their own buttons.

$sections

false

array

null

An array of child section definitions. These are placed in the base array and parent set on them automatically.

$attributes

false

array

null

An array of key => value HTML attributes. Any base level definition keys starting with data- will be pushed into attributes automatically.

$href

false

string

admin/{module}/{slug}

The HREF to the section. This gets pushed into attributes automatically.

$breadcrumb

false

string|false

The section title.

The breadcrumb text for the section.

$view

false

string

null

The view to delegate the section to.

$html

false

string

null

The HTML to display as the section.

$permission

false

string

{vendor}.module.{module}::{slug}.*

The permission string required to access the section. Note that builders within the section usually automate permissions so this may not be required if using said builders.

$permalink

false

string

The section URL.

The actual permalink for the section in the case that the HREF is used for something different. This is helpful when the HREF used for the section link needs to be different than the actual HREF for the section. Like a section link that opens a modal as in the above example to take you into the section.

Section Handlers

Sections also support handlers to dynamically control the sections of your module. Set the $sections property to a callable string or create a valid handler class next to your module class to be picked up automatically.

protected $sections = 'Anomaly\ProductsModule\ProductsModuleSections@handle';

The handler is called from the service container and is passed the $builder.

<?php namespace Anomaly\UsersModule;

use Anomaly\Streams\Platform\Ui\ControlPanel\ControlPanelBuilder;

class UsersModuleSections
{
    public function handle(ControlPanelBuilder $builder)
    {
        $builder->setSections([
            'users',
            'roles',
            'fields',
        ]);
    }
}