Create custom sections in OctoberCms backend forms

Question

Create custom sections in OctoberCms backend forms

585 views Asked by paishin At 07 February 2022 at 15:48

I am trying to create a new layout in octobercms backend and I need to put fields in different areas.

I have followed the example of default.htm and form-with-sidebar.htm to create my own layout and add a custom 'placeholder' to put the controls in.

The layout appears to be working with fields, tabs and secondaryTabs sections but when I add a custom section e.g. controls to the yaml file I am not able to render them in place.

I know I am missing something here, but I cant figure out what.

Here is an example of the yaml file and the layout

yaml

fields:
    name:
        label: Name
        span: full
        required: 1
        type: text
    section1:
        label: Options
        span: full
        hidden: 1
        type: section
    toolbar:
        span: full
        cssClass: collapse-visible
        path: edit_toolbar
        type: partial

controls:
    fields:
        is_active:
            label: Active
            span: auto
            type: switch
            comment: 'Activate location to make it visible in search and other pages'
        is_focused:
            label: Focus
            span: auto
            type: switch
            comment: 'Display element larger than others'

layout.htm

<!DOCTYPE html>
<html lang="<?= App::getLocale() ?>" class="no-js <?= $this->makeLayoutPartial('browser_detector') ?>">
<head>
    <?= $this->makeLayoutPartial('head') ?>
    <?= $this->fireViewEvent('backend.layout.extendHead', ['layout' => 'default.htm']) ?>
</head>
<body class="<?= $this->bodyClass ?>">
<div id="layout-canvas">
    <div class="layout">
        ...

                            <div class="layout-row">
                                <?= Block::placeholder('controls') ?>
                            </div>
        ...

    </div>
</div>

<!-- Flash Messages -->
<div id="layout-flash-messages"><?= $this->makeLayoutPartial('flash_messages') ?></div>

</body>
</html>

Original Q&A

There are 1 answers

**Hardik Satasiya** · Answer 1 · 2022-02-08T05:41:17+00:00

There is one miss understanding in the forms config_form.yaml.

You are thinking as if you add controls: it will be treated as placeholder but it will not as form can have only definitions about fields

fields : which are outer fields
tabs -> fields : which are primary tab fields
secondaryTabs -> fields : which are second level of tabs after primary tad fields

Now if you want to render these fields in different locations you can, but you need to do it manually.

if you think you need to have a different section for controls just add those fields to the secondaryTabs

fields:
    name:
        label: Name
        span: full
        required: 1
        type: text

secondaryTabs: <- control fields
    fields:
        is_active:
            label: Active
            span: auto
            type: switch
            comment: 'Activate location to make it visible in search and other pages'

One tip: If you do not add tab property in field definition (for ex: is_active here), fields will be rendered in the second section but will not create the tab and render in place.

now to render these control/secondaryTab fields

<div class="layout-row">
    <?= $this->formRenderSecondaryTabs() ?>
    <!-- ^ this will render your `control/secondaryTab fields` -->
</div>

same ways you can render other fields of the form.

<?= $this->formRenderOutsideFields() ?> // <- to render main fields -->
<?= $this->formRenderPrimaryTabs() ?>   // <!-- <- to render primary tabs fields

just make sure you are rendering fields inside, the form so they can submit values.

<?= Form::open() ?>
<!-- Here -->
<?= Form::close() ?>

if you still have any doubt please comment.

TechQA.

Create custom sections in OctoberCms backend forms

There are 1 answers

Related Questions in OCTOBERCMS

Related Questions in OCTOBERCMS-BACKEND

Popular Questions

Popular Tags

Trending Questions