Сайдбар в форме представляет из себя вынесенный в бок secondaryTabs из вашего fields.yaml
Поэтому, чтобы там отображались элементы формы, у вас должен быть указаны поля в secondaryTabs
Приступим к реализации.
Первое что вам нужно сделать, это добавить переменную в ваш контроллер.
public $bodyClass = 'compact-container';
Пример:
namespace OctoClub\Tutorial\Controllers;
use BackendMenu;
use Backend\Classes\Controller;
class Shops extends Controller
{
public $bodyClass = 'compact-container';
// [...]
}
Следуя из названия этой переменной, вы добавляете к body класс compact-container. Этот класс уберет отступы у вашей формы, и сайдбар не будет висеть "в воздухе".
Следующий шаг, это добавление в view шаблоны вашего контроллера добавить сам сайдбар и указать что в него выводить.
Открываем первый view файл create.htm в папке вашего контроллера, там мы увидим дефолтный шаблон верстки, который создает нам октябрь, когда мы создаем контроллер через artisan или builder.
Имеет он такой вид:
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Shops</a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>
<?php Block::endPut() ?>
<?php if (!$this->fatalError): ?>
<?= Form::open(['class' => 'layout']) ?>
<div class="layout-row">
<?= $this->formRender() ?>
</div>
<div class="form-buttons">
<div class="loading-indicator-container">
<button
type="submit"
data-request="onSave"
data-hotkey="ctrl+s, cmd+s"
data-load-indicator="Creating Shop..."
class="btn btn-primary">
Create
</button>
<button
type="button"
data-request="onSave"
data-request-data="close:1"
data-hotkey="ctrl+enter, cmd+enter"
data-load-indicator="Creating Shop..."
class="btn btn-default">
Create and Close
</button>
<span class="btn-text">
or <a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Cancel</a>
</span>
</div>
</div>
<?= Form::close() ?>
<?php else: ?>
<p class="flash-message static error"><?= e($this->fatalError) ?></p>
<p><a href="<?= Backend::url('octoclub/tutorials/shops') ?>" class="btn btn-default">Return to shops list</a></p>
<?php endif ?>
Первое что мы делаем, это заменяем способ вывода полей. Как мы видим, сейчас просто вызывается функция внутри формы:
// [..]
<?= Form::open(['class' => 'layout']) ?>
<div class="layout-row">
<?= $this->formRender() ?>
</div>
// [..]
<?= Form::close() ?>
// [..]
Функция $this->formRender() выводит все обычные поля, вкладки, вторичные вкладки друг за другом.
Нам это не нужно. Заменяем это на:
<?php Block::put('form-contents') ?>
<div class="layout-row">
<?= $this->formRenderOutsideFields() ?>
<?= $this->formRenderPrimaryTabs() ?>
</div>
// [..]
<?php Block::endPut() ?>
// [..]
Здесь мы пока не создаем форму, мы создаем фрагмент form-contents содержащий в себе обычные поля и вкладки, которые мы позже вставим в шаблон.
Сразу под этим блоком мы добавляем наш сайдбар.
<?php Block::put('form-sidebar') ?>
<div class="hide-tabs"><?= $this->formRenderSecondaryTabs() ?></div>
<?php Block::endPut() ?>
И теперь нам нужно вызвать шаблон формы с сайдбаром.
<?php Block::put('body') ?>
<?= Form::open(['class'=>'layout stretch']) ?>
<?= $this->makeLayout('form-with-sidebar') ?>
<?= Form::close() ?>
<?php Block::endPut() ?>
Финальный вид файла create.htm:
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Shops</a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>
<?php Block::endPut() ?>
<?php if (!$this->fatalError): ?>
<?php Block::put('form-contents') ?>
<div class="layout-row">
<?= $this->formRenderOutsideFields() ?>
<?= $this->formRenderPrimaryTabs() ?>
</div>
<div class="form-buttons">
<div class="loading-indicator-container">
<button
type="submit"
data-request="onSave"
data-hotkey="ctrl+s, cmd+s"
data-load-indicator="Creating Shop..."
class="btn btn-primary">
Create
</button>
<button
type="button"
data-request="onSave"
data-request-data="close:1"
data-hotkey="ctrl+enter, cmd+enter"
data-load-indicator="Creating Shop..."
class="btn btn-default">
Create and Close
</button>
<span class="btn-text">
or <a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Cancel</a>
</span>
</div>
</div>
<?php Block::endPut() ?>
<?php Block::put('form-sidebar') ?>
<div class="hide-tabs"><?= $this->formRenderSecondaryTabs() ?></div>
<?php Block::endPut() ?>
<?php Block::put('body') ?>
<?= Form::open(['class'=>'layout stretch']) ?>
<?= $this->makeLayout('form-with-sidebar') ?>
<?= Form::close() ?>
<?php Block::endPut() ?>
<?php else: ?>
<p class="flash-message static error"><?= e($this->fatalError) ?></p>
<p><a href="<?= Backend::url('octoclub/tutorials/shops') ?>" class="btn btn-default">Return to shops list</a></p>
<?php endif ?>
Все. Теперь если вы попробуете создать новую запись в вашей модели через Backend ваши SecondaryTabs будут отображаться в сайдбаре.
Точно так-же надо выполнить замену кода в файле update.htm, чтобы при редактировании записи отображался сайдбар.
Я не буду расписывать что заменять. Я просто покажу вариант до и после. Чтобы вы могли свериться.
До:
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Shops</a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>
<?php Block::endPut() ?>
<?php if (!$this->fatalError): ?>
<?= Form::open(['class' => 'layout']) ?>
<div class="layout-row">
<?= $this->formRender() ?>
</div>
<div class="form-buttons">
<div class="loading-indicator-container">
<button
type="submit"
data-request="onSave"
data-request-data="redirect:0"
data-hotkey="ctrl+s, cmd+s"
data-load-indicator="Saving Shop..."
class="btn btn-primary">
<u>S</u>ave
</button>
<button
type="button"
data-request="onSave"
data-request-data="close:1"
data-hotkey="ctrl+enter, cmd+enter"
data-load-indicator="Saving Shop..."
class="btn btn-default">
Save and Close
</button>
<button
type="button"
class="oc-icon-trash-o btn-icon danger pull-right"
data-request="onDelete"
data-load-indicator="Deleting Shop..."
data-request-confirm="Delete this Shop?">
</button>
<span class="btn-text">
or <a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Cancel</a>
</span>
</div>
</div>
<?= Form::close() ?>
<?php else: ?>
<p class="flash-message static error"><?= e($this->fatalError) ?></p>
<p><a href="<?= Backend::url('octoclub/tutorials/shops') ?>" class="btn btn-default">Return to shops list</a></p>
<?php endif ?>
После:
<?php Block::put('breadcrumb') ?>
<ul>
<li><a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Shops</a></li>
<li><?= e($this->pageTitle) ?></li>
</ul>
<?php Block::endPut() ?>
<?php if (!$this->fatalError): ?>
<?php Block::put('form-contents') ?>
<div class="layout-row">
<?= $this->formRenderOutsideFields() ?>
<?= $this->formRenderPrimaryTabs() ?>
</div>
<div class="form-buttons">
<div class="loading-indicator-container">
<button
type="submit"
data-request="onSave"
data-request-data="redirect:0"
data-hotkey="ctrl+s, cmd+s"
data-load-indicator="Saving Shop..."
class="btn btn-primary">
<u>S</u>ave
</button>
<button
type="button"
data-request="onSave"
data-request-data="close:1"
data-hotkey="ctrl+enter, cmd+enter"
data-load-indicator="Saving Shop..."
class="btn btn-default">
Save and Close
</button>
<button
type="button"
class="oc-icon-trash-o btn-icon danger pull-right"
data-request="onDelete"
data-load-indicator="Deleting Shop..."
data-request-confirm="Delete this shop?">
</button>
<span class="btn-text">
or <a href="<?= Backend::url('octoclub/tutorials/shops') ?>">Cancel</a>
</span>
</div>
</div>
<?php Block::endPut() ?>
<?php Block::put('form-sidebar') ?>
<div class="hide-tabs"><?= $this->formRenderSecondaryTabs() ?></div>
<?php Block::endPut() ?>
<?php Block::put('body') ?>
<?= Form::open(['class'=>'layout stretch']) ?>
<?= $this->makeLayout('form-with-sidebar') ?>
<?= Form::close() ?>
<?php Block::endPut() ?>
<?php else: ?>
<p class="flash-message static error"><?= e($this->fatalError) ?></p>
<p><a href="<?= Backend::url('octoclub/tutorials/shops) ?>" class="btn btn-default">Return to shops list</a></p>
<?php endif ?>
Решение возникших проблем
Если вы следовали инструкции, то проблем быть не должно. В любом случае если что будет не так, вы можете написать сюда, и я постараюсь вам помочь.
