[EC-CUBE4] @FormAppendでフォームを追加→ form_themeを使用しフォームのデザインを変更する

概要

Entityからフォームを自動生成するときは　@FormAppend アノテーションでフォームを追加します。

前回書いた記事　[EC-CUBE4] DateTimeTypeなフォームをEntityから自動生成→秒の入力をできるようにする方法 で、日時を入力できるフォームを追加しましたが…。

テスト日時というフォームが追加されたのですが、殺風景ですよね…。
form_theme を指定してフォームのデザインを変更してみましょう。

form_theme を指定する

管理の商品登録画面に日時の項目を追加する例です。

変更前

/app/Customize/Entity/ProductTrait.php

<?php
namespace Customize\Entity;

use Doctrine\ORM\Mapping as ORM;
use Eccube\Annotation as Eccube;
use Symfony\Component\Validator\Constraints as Assert;

/**
 * @Eccube\EntityExtension("Eccube\Entity\Product")
 */
trait ProductTrait
{
    /**
     * @ORM\Column(name="test_date_time", type="datetimetz", nullable=true)
     * @Eccube\FormAppend(
     *  auto_render=true,
     *  type="\Symfony\Component\Form\Extension\Core\Type\DateTimeType",
     *  options={
     *    "required": false,
     *    "label": "テスト日時",
     *    "input": "datetime",
     *    "placeholder": {"year":"----", "month": "--", "day": "--", "hour": "--", "minute": "--", "second": "--"},
     *    "with_seconds": true
     *  }
     * )
     */
    private $test_date_time;

殺風景だし、時分秒がどれに当たるかわからないしで入力ミスも起きてしまうかもしれませんね…。

変更後

{%- block form_row -%}...{%- endblock form_row -%} で囲んだ専用のTwigファイルを準備しましょう。
内容は form_widget などで日時の項目を表示させてください。その項目ごとに年月日時分秒をつけてあげてください。

app/Customize/Form/test_date_time.twig

{%- block form_row -%}
<div class="row">
    <div class="col-3">
        <div class="d-inline-block" data-tooltip="true" data-placement="top">
            <span>{{ form.vars.label|trans }}</span>
            <i class="fa fa-question-circle fa-lg ml-1"></i>
        </div>
    </div>
    <div class="col mb-2">
        <div class="form-inline">
            {{ form_widget(form["date"]["year"]) }}&nbsp;年&nbsp;
            {{ form_widget(form["date"]["month"]) }}&nbsp;月&nbsp;
            {{ form_widget(form["date"]["day"]) }}&nbsp;日&nbsp;
            &nbsp;
            {{ form_widget(form["time"]["hour"]) }}&nbsp;時&nbsp;
            {{ form_widget(form["time"]["minute"]) }}&nbsp;分&nbsp;
            {{ form_widget(form["time"]["second"]) }}&nbsp;秒&nbsp;
            {{ form_errors(form) }}
        </div>
    </div>
</div>
{%- endblock form_row -%}

@FormAppendで対象のEntityにフォームを自動生成している箇所に　form_theme　の設定を追加します。準備したTwigファイルを指定してあげてください。

/app/Customize/Entity/ProductTrait.php

    /**
     * @ORM\Column(name="test_date_time", type="datetimetz", nullable=true)
     * @Eccube\FormAppend(
     *  auto_render=true,
     *  form_theme="Form/test_date_time.twig",
     *  type="\Symfony\Component\Form\Extension\Core\Type\DateTimeType",
     *  options={
     *    "required": false,
     *    "label": "テスト日時",
     *    "input": "datetime",
     *    "placeholder": {"year":"----", "month": "--", "day": "--", "hour": "--", "minute": "--", "second": "--"},
     *    "with_seconds": true
     *  }
     * )
     */
    private $test_date_time;

     *  auto_render=true,
+    *  form_theme="Form/test_date_time.twig",
     *  type="\Symfony\Component\Form\Extension\Core\Type\DateTimeType",

いかがでしょうか、多少は見た目も良くなり入力しやすくなったのではないでしょうか。
ぜひお試しください。