[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",

어떻습니까, 다소는 외형도 좋아지고 입력하기 쉬워진 것이 아닐까요.
꼭 시험해 주세요.