管理画面にタブ UI を実装する

管理画面の編集画面にタブを追加するコントローラーとテンプレートの書き方、保存後のタブ状態の保持。

アドオンで管理画面にタブ UI を追加する実装パターンです。自作の編集画面のほか、既存の画面へタブを追加する場合にも使えます。

タブは、コントローラー（PHP）でタブを定義し、テンプレート（.tpl）で中身を定義します。

1. コントローラーでタブを定義する

Registry::set('navigation.tabs.general', [
    'title' => __('general'),
    'js'    => true,
]);

Registry::set('navigation.tabs.custom_tab', [
    'title' => __('my_addon.custom_tab_title'),
    'js'    => true,
]);

// 条件付きでタブを追加する
if ($some_condition) {
    Registry::set('navigation.tabs.optional_tab', [
        'title' => __('my_addon.optional_tab'),
        'js'    => true,
    ]);
}
// テンプレートでも同じ条件を使えるように、ビューに渡す
Tygh::$app['view']->assign('some_condition', $some_condition);

// 選択中のタブを管理する
$selected_section = isset($_REQUEST['selected_section']) ? $_REQUEST['selected_section'] : 'general';
Tygh::$app['view']->assign('selected_section', $selected_section);

2. テンプレートでタブの中身を定義する

{capture name="tabsbox"}
    {* 基本情報のタブ *}
    <div id="content_general">
        <fieldset>
            {* タブの内容 *}
        </fieldset>
    </div>

    {* カスタムタブ *}
    <div id="content_custom_tab">
        {include file="addons/my_addon/views/components/custom_content.tpl"}
    </div>

    {* 条件付きのタブ（コントローラーと同じ条件にする） *}
    {if $some_condition}
    <div id="content_optional_tab">
        {* タブの内容 *}
    </div>
    {/if}
{/capture}

{include file="common/tabsbox.tpl"
    content=$smarty.capture.tabsbox
    active_tab=$selected_section
    track=true
}

3. 保存後も同じタブを開く

コントローラーで、リダイレクトの URL に選択中のタブを付けます。

$selected_section = isset($_REQUEST['selected_section']) ? $_REQUEST['selected_section'] : 'general';
return [CONTROLLER_STATUS_OK, 'controller.update?id=' . $id . '&selected_section=' . $selected_section];

テンプレートでは、hidden フィールドで選択中のタブを送信します。

<input type="hidden" class="cm-no-hide-input" name="selected_section" id="selected_section" value="{$selected_section}" />

4. 既存の画面にタブを追加する

既存の画面へは、Post コントローラーとテンプレートフックで追加します。

コントローラー（profiles.post.php など）：

Registry::set('navigation.tabs.my_addon_tab', [
    'title' => __('my_addon.tab_title'),
    'js'    => true,
]);

テンプレート（hooks/profiles/tabs_extra.post.tpl）：

<div id="content_my_addon_tab" class="cm-hide-save-button">
    {* タブの内容 *}
</div>

タブで使うクラス

クラス	用途
`cm-hide-save-button`	そのタブを開いている間、保存ボタンを非表示にします。読み取り専用のタブに向いています。
`cm-no-hide-input`	フォームの送信時に、hidden フィールドの値を維持します。

チェックリスト

タブ ID が、PHP とテンプレートで一致している
条件付きのタブは、PHP とテンプレートの両方に同じ条件を書いている
track=true を指定し、タブの状態を URL に保持している
保存後のリダイレクトで、タブの状態を維持している