Using dependsOn in a form with sidebar

Tips and Tricks
#1

There is a minor issue when using the traditional sidebar layout with a form. Each set of fields is encapsulated in its own container and cannot use dependsOn across each container.

You can solve it with the following modifications:

Use formRender with useContainer set to false, supply the section manually.

<?= $this->formRender(['section' => 'outside', 'useContainer' => false]) ?>

Include the container manually

When defining the form, also define the form widget container here so all containers are linked

<?= Form::open(['class'=>'layout stretch']) ?>
    <div
        data-control="formwidget"
        data-refresh-handler="<?= $this->formGetWidget()->getEventHandler('onRefresh') ?>"
        class="form-widget form-elements layout"
        role="form"
        id="<?= $this->formGetWidget()->getId() ?>">
        <?= $this->makeLayout('form-with-sidebar') ?>
    </div>
<?= Form::close() ?>

Complete example taken from that RainLab.User plugin

<?php Block::put('breadcrumb') ?>
    <ul>
        <li><a href="<?= Backend::url('rainlab/user/users') ?>"><?= e(trans('rainlab.user::lang.users.menu_label')) ?></a></li>
        <li><?= e(trans($this->pageTitle)) ?></li>
    </ul>
<?php Block::endPut() ?>

<?php if (!$this->fatalError): ?>

    <?php Block::put('form-contents') ?>

        <div class="layout-row min-size">
            <?= $this->formRender(['section' => 'outside', 'useContainer' => false]) ?>
        </div>

        <div class="layout-row">
            <?= $this->formRender(['section' => 'primary', 'useContainer' => false]) ?>
        </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="<?= e(trans('backend::lang.form.saving_name', ['name'=>$formRecordName])) ?>"
                    class="btn btn-primary">
                    <?= e(trans('backend::lang.form.save')) ?>
                </button>
                <button
                    type="button"
                    data-request="onSave"
                    data-request-data="close:1"
                    data-hotkey="ctrl+enter, cmd+enter"
                    data-load-indicator="<?= e(trans('backend::lang.form.saving_name', ['name'=>$formRecordName])) ?>"
                    class="btn btn-default">
                    <?= e(trans('backend::lang.form.save_and_close')) ?>
                </button>
                <span class="btn-text">
                    <?= e(trans('backend::lang.form.or')) ?> <a href="<?= Backend::url('rainlab/user/users/preview/'.$formModel->id) ?>"><?= e(trans('backend::lang.form.cancel')) ?></a>
                </span>
                <button
                    class="oc-icon-trash-o btn-icon danger pull-right"
                    data-request="onDelete"
                    data-load-indicator="<?= e(trans('backend::lang.form.deleting_name', ['name'=>$formRecordName])) ?>"
                    data-request-confirm="<?= e(trans('rainlab.user::lang.users.delete_confirm')) ?>">
                </button>
            </div>
        </div>

    <?php Block::endPut() ?>

    <?php Block::put('form-sidebar') ?>
        <div class="hide-tabs"><?= $this->formRender(['section' => 'secondary', 'useContainer' => false]) ?></div>
    <?php Block::endPut() ?>

    <?php Block::put('body') ?>
        <?= Form::open(['class'=>'layout stretch']) ?>
            <div
                data-control="formwidget"
                data-refresh-handler="<?= $this->formGetWidget()->getEventHandler('onRefresh') ?>"
                class="form-widget form-elements layout"
                role="form"
                id="<?= $this->formGetWidget()->getId() ?>">
                <?= $this->makeLayout('form-with-sidebar') ?>
            </div>
        <?= Form::close() ?>
    <?php Block::endPut() ?>

<?php else: ?>
    <div class="control-breadcrumb">
        <?= Block::placeholder('breadcrumb') ?>
    </div>
    <div class="padded-container">
        <p class="flash-message static error"><?= e(trans($this->fatalError)) ?></p>
        <p><a href="<?= Backend::url('rainlab/user/users') ?>" class="btn btn-default"><?= e(trans('rainlab.user::lang.users.return_to_list')) ?></a></p>
    </div>
<?php endif ?>
1 Like