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
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 |
$href |
false |
string |
admin/{module}/{slug} |
The HREF to the section. This gets pushed into |
$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',
]);
}
}