eZ Platform 1.x の管理画面をカスタマイズする

Platform UI Bundle

eZ Platform 1.x の管理画面のカスタマイズ事例を紹介します。

eZ Platform 1.x の管理画面は Platform UI Bundle によって YUI や Handlebars で実装されています。
（なお、 eZ Platform 2.x からはバンドルが eZ Platform Admin UI Bundle に変更され、ライブラリも React と Bootstrap 4 に変更されました。）

参考バンドル

ドキュメントが十分ではないため、以下のバンドルを参考にするとよいでしょう。

• ExtendingPlatformUIConferenceBundle
• EzContentOnTheFlyBundle

ファイルのコピー

mkdir -p src/AppBundle/Resources/public/templates/fields/{view,edit}
mkdir -p src/AppBundle/Resources/public/js/views/fields
cp -av {vendor/ezsystems/platform-ui-bundle,src/AppBundle}/Resources/public/templates/fields/view/relationlist.hbt 
cp -av {vendor/ezsystems/platform-ui-bundle,src/AppBundle}/Resources/public/templates/fields/edit/relationlist.hbt 
cp -av {vendor/ezsystems/platform-ui-bundle,src/AppBundle}/Resources/public/js/views/fields/ez-relationlist-editview.js

AppBundle 内にディレクトリを作成してファイルをコピーします。
Handlebars のテンプレートの拡張子は通常 .hbs ですが、eZ Platform では .hbt となっています。

ファイルの編集

view/relationlist.hbt

                    <ul>
                    {{#each relatedContents}}
                        <li class="ez-relationlistview-item" title="{{ name }}">
                            <a href="{{path "viewLocation" id=resources.MainLocation languageCode=mainLanguageCode}}">{{ name }}
                              <img src="{{ fields.image.fieldValue.uri }}" width="100 " alt=""></a>
                        </li>
                    {{/each}}
                    </ul>

edit/relationlist.hbt

src/AppBundle/Resources/public/templates/fields/edit/relationlist.hbt

                    <table class="pure-table pure-table-striped ez-relationlist-contents">
                        <thead>
                            <tr>
                                <th onclick="sortTable(0)">{{translate "relationlist.table.name" "fieldedit"}}</th>
                                <th onclick="sortTable(1)">ContentId</th>
                                <th>Image</th>
                                <th>{{translate "relationlist.table.published" "fieldedit"}}</th>
                                <th>{{translate "relationlist.table.modified" "fieldedit"}}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {{#each relatedContents}}
                                <tr class="ez-relation-content" data-content-id="{{id}}">
                                    <td class="ez-relation-content-name" data-icon="&#xe601;" title="{{ name }}">{{ name }}</td>
                                    <td class="ez-relation-property">{{ contentId }}</td>
                                    <td class="ez-relation-property"><img src="{{ fields.image.fieldValue.uri }}" width="100 " alt="{{ translate 'image.preview' 'fieldedit' }}"></td>
                                    <td class="ez-relation-property">{{ publishedDate }}</td>
                                    <td class="ez-relation-property">{{ lastModificationDate }}</td>
                                    <td class="ez-relation-remove-content">
                                        <button data-content-id="{{id}}" class=" ez-button ez-button-delete ez-font-icon pure-button" {{#if ../isNotTranslatable}}disabled="disabled"{{/if}}>
                                            {{translate "relationlist.remove" "fieldedit"}}
                                        </button>
                                    </td>
                                </tr>
                            {{/each}}
                        </tbody>
                    </table>

ez-relationlist-editview.js

src/AppBundle/Resources/public/js/views/fields/ez-relationlist-editview.js

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementsByClassName("ez-relationlist-contents")[0]; switching = true; dir = "asc";
  while (switching) {
    switching = false; rows = table.getElementsByTagName("TR");
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch= true; break; }
      } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch= true; break; } }
    }
    if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++;
    } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } }
  }
}

設定ファイル

app/config/ezplatform.yml

imports:
    - { resource: yui.yml }

app/config/yui.yml

ez_platformui:
    system:
        default:
            yui:
                modules:
                    relationlistview-ez-template:
                        type: 'template'
                        path: "bundles/app/templates/fields/view/relationlist.hbt"
                    relationlisteditview-ez-template:
                        type: 'template'
                        path: "bundles/app/templates/fields/edit/relationlist.hbt"
                    ez-relationlist-editview:
                        requires: ['ez-fieldeditview', 'relationlisteditview-ez-template', 'ez-asynchronousview', 'array-extras', 'transition', 'ez-translator']
                        path: "bundles/app/js/views/fields/ez-relationlist-editview.js"

アセットリンク

app/console assets:install --symlink

キャッシュクリア

app/console c:c --env=prod

設定ファイルを読み込ませるためにキャッシュクリアします。

chmod g+s /var/www/app/cache

設定状況によってはキャッシュクリア後にパーミッションが戻ってしまう場合があるので、その場合は SGID を設定して再度キャッシュクリアします。