1. HOME
  2. フロントエンド
  3. カスタムフィールドグループに変更できる初期値を設定する

カスタムフィールドグループに変更できる初期値を設定する

フロントエンド

a-blog cmsでサイトを作る際にはかなりの確率で使われるであろう、【カスタムフィールドグループ】。
イベントを載せるサイトで1エントリーが1日の開催時刻を入力するとします。
例えば..

  • 開催時間は同じ時間が多いし何度も入力するのは面倒....
  • でも日によっては同じ時間じゃない場合もあるし、任意でも追加がしたい
  • 来年になったら時間が変わるから固定では困る...

こんな時のために、変更ができる初期値をカスタムフィールドグループに設定してみます。

この記事は「a-blog cms Advent Calendar 2018」の22日目の記事です。

モジュールのカスタムフィールドグループを作成

カスタムフィールドメーカーで開催時刻が入力できるカスタムフィールドグループを作成します。


モジュールID MF_initial_setting
グループのタイトル 初期項目
フィールド名(変数) group_initial_setting
入力欄の種類 テキスト
タイトル 時間
フィールド group_initial_setting_time

<h2 class="acms-admin-admin-title2">初期項目</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
    <tr>
      <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle">&nbsp;</th>
      <th class="acms-admin-table-left">時間
        <i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="例:10:00~"></i>
      </th>
      <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
    </tr>
  </thead>
  <tbody>
    <!-- BEGIN group_initial_setting:loop -->
    <tr class="sortable-item">
      <td class="item-handle">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="group_initial_setting_time[]" value="" class="acms-admin-form-width-full">
      </td>
      <td>
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
      </td>
    </tr>
    <!-- END group_initial_setting:loop -->
    <tr class="sortable-item item-template">
      <td class="item-handle">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="group_initial_setting_time[]" value="" class="acms-admin-form-width-full">
      </td>
      <td>
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">
        <input type="button" class="item-insert acms-admin-btn-admin" value="追加">
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="@group_initial_setting[]" value="group_initial_setting_time">
<input type="hidden" name="field[]" value="group_initial_setting_time">
<input type="hidden" name="field[]" value="@group_initial_setting">

このフィールドが次に作成するエントリーのカスタムフィールドグループの初期値になります。

エントリーのカスタムフィールドグループの作成

モジュールのカスタムフィールドグループ同様にカスタムフィールドメーカーで開催時刻が入力できるカスタムフィールドグループを作成します。


グループのタイトル イベント開始時刻
フィールド名(変数) group_event_start
入力欄の種類 テキスト
タイトル 開始時刻
フィールド group_event_start_time

<h2 class="acms-admin-admin-title2">イベント開始時刻</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
  <tr>
    <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle">&nbsp;</th>
    <th class="acms-admin-table-left">開始時刻</th>
    <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
  </tr>
  </thead>
  <tbody>

  <!-- BEGIN group_event_start:loop -->
  <tr class="sortable-item">
    <td class="item-handle">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <input type="text" name="group_event_start_time[]" value="" class="acms-admin-form-width-full">
    </td>
    <td>
      <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
    </td>
  </tr>
  <!-- END group_event_start:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <input type="text" name="group_event_start_time[]" value="" class="acms-admin-form-width-full">
    </td>
    <td>
      <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
    </td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="3">
      <input type="button" class="item-insert acms-admin-btn-admin" value="追加">
    </td>
  </tr>
  </tfoot>
</table>
<input type="hidden" name="@group_event_start[]" value="group_event_start_time">
<input type="hidden" name="field[]" value="group_event_start_time">
<input type="hidden" name="field[]" value="@group_event_start">

初期値の設定を
エントリーのカスタムフィールドグループ内に反映する

先ほどのエントリーのカスタムフィールドグループのままだとただ単に入力しかできないので、
最初に作成したモジュールのカスタムフィールドグループ(group_initial_setting)を表示&保存させるようにします。

{group_event_start_time}にすでに値が入っている場合には表示をする必要がないため
{group_event_start_time}にまだ値がない時のみ表示をさせるようにします。

sortable-itemとクラス属性が付いているtr要素を丸ごとコピーし、
loopブロックの前に貼り付けます。
変更が必要になるのはvalue属性です。

保存したいグループは「group_event_start_time[]」のためname属性はそのままにし、
value属性のみをモジュールのカスタムフィールドグループの名前にしておくことで、初期値に設定したものを表示し
特に変更がない場合にはそのまま保存をすることでエントリーのカスタムフィールドグループとして登録されます。
変更 & 削除が必要な場合も時刻の変更や削除が可能になっているため個別に対応が可能です。

変更前

<input type="text" name="group_event_start_time[]" value="{group_event_start_time}" class="acms-admin-form-width-full">

変更後

<input type="text" name="group_event_start_time[]" value="{group_initial_setting_time}" class="acms-admin-form-width-full">

残りはtr要素を丸ごとloop表示をさせたいので
モジュールのカスタムフィールドグループで囲みます。

最終的なソースコード

<h2 class="acms-admin-admin-title2">イベント開始時刻</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
  <tr>
    <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle">&nbsp;</th>
    <th class="acms-admin-table-left">開始時刻</th>
    <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
  </tr>
  </thead>
  <tbody>

  <!-- BEGIN_IF [{group_event_start_time}/em] -->
    <!-- BEGIN_MODULE Module_Field id="MF_initial_setting" -->
    <!-- BEGIN group_initial_setting:loop -->
    <tr class="sortable-item">
      <td class="item-handle">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <input type="text" name="group_event_start_time[]" value="{group_initial_setting_time}" class="acms-admin-form-width-full">
      </td>
      <td>
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
      </td>
    </tr>
    <!-- END group_initial_setting:loop -->
    <!-- END_MODULE Module_Field -->
  <!-- END_IF -->

  <!-- BEGIN group_event_start:loop -->
  <tr class="sortable-item">
    <td class="item-handle">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <input type="text" name="group_event_start_time[]" value="{group_event_start_time}" class="acms-admin-form-width-full">
    </td>
    <td>
      <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
    </td>
  </tr>
  <!-- END group_event_start:loop -->
  <tr class="sortable-item item-template">
    <td class="item-handle">
      <i class="acms-admin-icon-sort"></i>
    </td>
    <td>
      <input type="text" name="group_event_start_time[]" value="" class="acms-admin-form-width-full">
    </td>
    <td>
      <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除">
    </td>
  </tr>
  </tbody>
  <tfoot>
  <tr>
    <td colspan="3">
      <input type="button" class="item-insert acms-admin-btn-admin" value="追加">
    </td>
  </tr>
  </tfoot>
</table>
<input type="hidden" name="@group_event_start[]" value="group_event_start_time">
<input type="hidden" name="field[]" value="group_event_start_time">
<input type="hidden" name="field[]" value="@group_event_start">

あとがき

簡単にできるちょっとした小ネタですが、簡単にできる上に便利なのでまだ試したことがない方はぜひお試しください。
明日は、川邉マナブさんの記事です!