a-blog cms 合宿ネタ:カテゴリーのカスタムフィールドで,エントリーのカスタムフィールドをつくろう(謎)

カテゴリーのカスタムフィールドに...

現地でしゃべった内容だと,分かりづらかったと思うので,以下のコードを見てご勘弁ください.それでも不明なところはTwitterとかで聞いてください.

(邪道です)

カスタムフィールドグループで,こんな項目を作ってみる

ここで,項目名・タイプ・キー名・必須フラグの4つを指定します.


カテゴリーのカスタムフィールド

カテゴリーのカスタムフィールド


これを,エントリーの編集画面の項目として使えるように,Category_Fieldモジュールを使って,admin/entry/edit.html (またはadmin/entry/field.html)に展開します.

エントリー編集画面に仕込まれたテンプレート

入れ子になったモジュールは,内側から解決されるという法則が活きてきます.

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<!-- BEGIN_MODULE Category_Field -->
<table><!-- BEGIN efd_group:loop -->
    <tr>
        <th>{field_label}</th>
        <td>
            <input type="{field_input_type}" name="{field_key_name}" value="\{{field_key_name}\}" />
            <input type="hidden" name="field[]" value="{field_key_name}" />
            <input type="hidden" name="{field_key_name}:v#required" <!-- BEGIN field_required:veil -->{field_required}<!-- END field_required:veil--> />
            <label style="color:red;" class="validator-result-\{{field_key_name}:validator#required\}">入力してちょ</label>
        </td>
    </tr><!-- END efd_group:loop -->
</table>
<!-- END_MODULE Category_Field -->
<!-- END_MODULE Admin_Entry_Edit -->

Category_Fieldの処理直後,このように展開

Admin_Entry_Editの中にCategory_Fieldを入れると,Category_Fieldが先に解決されて,解決されたあとのテンプレートがAdmin_Entry_Editのほうに渡されます.

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<table>
    <tr>
        <th>テキスト</th>
        <td>
            <input type="text" name="efd1" value="{efd1}" />
            <input type="hidden" name="field[]" value="efd1" />
            <input type="hidden" name="efd1:v#required" disabled />
            <label style="color:red;" class="validator-result-{efd1:validator#required}">入力してちょ</label>
        </td>
    </tr>
    <tr>
        <th>日時</th>
        <td>
            <input type="datetime" name="efd2" value="{efd2}" />
            <input type="hidden" name="field[]" value="efd2" />
            <input type="hidden" name="efd2:v#required" class />
            <label style="color:red;" class="validator-result-{efd2:validator#required}">入力してちょ</label>
        </td>
    </tr>
    <tr>
        <th>URL</th>
        <td>
            <input type="url" name="efd3" value="{efd3}" />
            <input type="hidden" name="field[]" value="efd1" />
            <input type="hidden" name="efd1:v#required" disabled />
            <label style="color:red;" class="validator-result-{efd3:validator#required}">入力してちょ</label>
        </td>
    </tr>
</table>

すると,エントリーのカスタムフィールドが動的に生成!


エントリーのカスタムフィールド

エントリーのカスタムフィールド

実になさけないUIにですが,管理画面から動的にカスタムフィールドを増やすことができました!

カテゴリーのカスタムフィールドと結びついているので,%{CID}を使ってincludeを振り分けなくても,勝手に変化します.


さいごにカテゴリーのカスタムフィールドのソース

こっちは平凡です


<h2 id="adminTitle">えらぶ</h2>
<table class="adminTable adminTableX js-fieldgroup-sortable">
    <thead>
        <tr>
            <th></th>
            <th>項目名</th>
            <th>タイプ</th>
            <th>キー</th>
            <th>必須</th>
            <th></th>
        </tr>
    </thead>
    <tbody><!-- BEGIN efd_group:loop -->
        <tr class="sortable-item">
            <td class="item-handle">□</td>
            <td><input type="text" name="field_label[{i}]" value="{field_label}" /></td>
            <td>
                <select name="field_input_type[{i}]">
                    <option value="text"{field_input_type:selected#text}>text</option>
                    <option value="tel"{field_input_type:selected#tel}>tel</option>
                    <option value="url"{field_input_type:selected#url}>url</option>
                    <option value="email"{field_input_type:selected#email}>email</option>
                    <option value="datetime"{field_input_type:selected#datetime}>datetime</option>
                    <option value="datetime-local"{field_input_type:selected#datetime-local}>datetime-local</option>
                    <option value="date"{field_input_type:selected#date}>date</option>
                    <option value="range"{field_input_type:selected#range}>range</option>
                    <option value="color"{field_input_type:selected#color}>color</option>
                    <option value="file"{field_input_type:selected#file}>file</option>
                </select>
            </td>
            <td><input type="text" name="field_key_name[{i}]" value="{field_key_name}" /></td>
            <td><input type="hidden" name="field_required[{i}]" value="disabled" /><input type="checkbox" name="field_required[{i}]" value="class"{field_required:checked#class} /></td>
            <td><input type="button" class="item-delete" value="削除" /></td>
        </tr><!-- END efd_group:loop -->
        <tr class="sortable-item item-template">
            <td class="item-handle">□</td>
            <td><input type="text" name="field_label[]" value=""/></td>
            <td>
                <select name="field_input_type[{i}]">
                    <option value="text">text</option>
                    <option value="tel">tel</option>
                    <option value="url">url</option>
                    <option value="email">email</option>
                    <option value="password">password</option>
                    <option value="datetime">datetime</option>
                    <option value="datetime-local">datetime-local</option>
                    <option value="date">date</option>
                    <option value="month">month</option>
                    <option value="week">week</option>
                    <option value="range">range</option>
                    <option value="color">color</option>
                    <option value="file">file</option>
                </select>
            </td>
            <td><input type="text" name="field_key_name[]" value="" /></td>
            <td><input type="hidden" name="field_required[]" value="disabled" /><input type="checkbox" name="field_required[]" value="class" /></td>
            <td><input type="button" class="item-delete" value="削除" /></td>
        </tr>
    </tbody>
    <tfooter>
        <tr>
            <td colspan="6"><input type="button" class="item-insert" value="追加" /></td>
        </tr>
    </tfooter>
</table>

<input type="hidden" name="@efd_group[]" value="field_label" />
<input type="hidden" name="@efd_group[]" value="field_input_type" />
<input type="hidden" name="@efd_group[]" value="field_required" />
<input type="hidden" name="@efd_group[]" value="field_key_name" />
<input type="hidden" name="field[]" value="field_label" />
<input type="hidden" name="field[]" value="field_input_type" />
<input type="hidden" name="field[]" value="field_required" />
<input type="hidden" name="field[]" value="field_key_name" />
<input type="hidden" name="field[]" value="@efd_group" />

Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search