Layouts

A layout defines a set of regions in which panels can be placed. In addition it allows the user to enter custom options into the dashboard form when updating the dashboard.

Layout Class

The layout class allows you to define regions where panels can be rendered.

It extends yii\base\Model, allowing you to define custom settings which will be available for the user to configure the layout via a form when updating the dashboard.

Place the following code into app/dashboard/layouts/ExampleLayout.php:

<?php
namespace app\dashboard\layouts;

class ExampleLayout extends \cornernote\dashboard\Layout
{

    public $viewPath = '@app/views/dashboard/layouts/example';

    public $customSetting;

    public function rules()
    {
        return [
            [['customSetting'], 'required'],
        ];
    }

    public function getRegions()
    {
        return [
            'column-1' => 'Column 1',
            'column-2' => 'Column 2',
        ];
    }

}

Layout View

The layout view will render the dashboard and all of it's panels in "view" mode.

Place the following code into app/views/dashboard/layouts/example/view.php`:

<?php
/**
 * @var $layout \app\dashboard\layouts\ExampleLayout
 * @var $this \yii\web\View
 */

$regionPanels = $layout->regionPanels($layout->dashboard->getDashboardPanels()->enabled()->all());
?>

<div class="panel panel-default">
    <div class="panel-heading">
        <h2 class="panel-title">
            <?= $layout->dashboard->name ?>
            <div class="pull-right">
                <?= $this->render('@cornernote/dashboard/views/dashboard/layouts/_buttons', ['layout' => $layout]) ?>
            </div>
        </h2>
    </div>
    <div class="panel-body">
        <?php
        echo '<div class="row">';
        foreach ($regionPanels as $region => $items) {
            echo '<div class="col-md-6">';
            foreach ($items as $item) {
                echo \yii\helpers\Html::tag('div', $item['content'], $item['options']);
            }
            echo '</div>';
        }
        echo '</div>';
        ?>
    </div>
</div>

Layout Update

The layout update will render the dashboard and all of it's panels in "update" mode. This allows the user to drag-and-drop panels between the regions.

Place the following code into app/views/dashboard/layouts/example/update.php:

<?php
/**
 * @var $layout \app\dashboard\layouts\ExampleLayout
 * @var $this \yii\web\View
 */

$regionPanels = $layout->regionPanels($layout->dashboard->getDashboardPanels()->all(), 'update');

echo '<div class="row">';
foreach ($regionPanels as $region => $items) {
    echo '<div class="col-md-6">';

    // sortable widget to enable drag-and-drop
    echo \kartik\sortable\Sortable::widget([
        'id' => 'dashboard-region-' . $region,
        'connected' => true,
        'items' => $items,
        'pluginEvents' => [
            'sortupdate' => 'dashboardPanelSort',
        ],
    ]);

    // hidden element to store the sort order
    echo \yii\helpers\Html::hiddenInput(
        'DashboardPanelSort[' . $region . ']',
        implode(',', \yii\helpers\ArrayHelper::map($items, 'options.id', 'options.id')),
        [
            'id' => 'input-dashboard-region-' . $region,
        ]
    );

    // create dashboard panel button
    echo '<div class="text-center">';
    echo \yii\helpers\Html::a('Create Dashboard Panel', [
        'dashboard/dashboard-panel/create',
        'DashboardPanel' => [
            'dashboard_id' => $layout->dashboard->id,
            'region' => $region,
            'sort' => count($items),
            'enabled' => 1,
        ]
    ], ['class' => 'btn btn-default btn-sm']);
    echo '</div>';

    echo '</div>';
}
echo '</div>';

Layout Form

The layout form will render form elements for the custom options available to your layout.

Place the following code into app/views/dashboard/layouts/example/form.php:

<?php
/**
 * @var $layout \app\dashboard\layouts\ExampleLayout
 * @var $this \yii\web\View
 * @var $form \yii\bootstrap\ActiveForm
 */
?>

<?= $form->field($layout, 'customSetting')->textInput() ?>

Configuration

Finally you will need to add your layout to the module configuration:

<?php
$config = [
    'modules' => [
        'dashboard' => [
            'layouts' => [
                'example' => 'app\dashboard\layouts\ExampleLayout',
            ],
        ],
    ],
];