Liferayカスタマイズに欠かせないApplication Display Template(ADT)の紹介

とたにです。

今回はLiferayのカスタマイズでは欠かせないApplication Display Template(ADT)について紹介しようと思います。

 ADTとは

Liferayのアセットエンティティを表示する標準ポートレット（ナビゲーションメニューやアセットパブリッシャーなど）の見た目を変更するためのテンプレートのことです。

「見た目を変更する」と書いているのは表示対象となるエンティティ（ナビゲーションメニューの場合にはページ階層）は変えずに、表示形式のみを変更するためです。

 ADTに対応したポートレット

Liferay標準のポートレットでは以下がADTに対応しています。

• RSSアセットパブリッシャー
• Wiki
• アセットパブリッシャー
• カテゴリナビゲーション
• サイトマップ
• タグナビゲーション
• ナビゲーションメニュー
• パンくずリスト
• ブログ
• メディアギャラリー 

実際に作ってみる

説明だけではイメージしずらいので、今回はナビゲーションメニューを使ってカード形式のナビゲーションを作ってみようと思います。
今回はLiferay DXP 7.2を使用します。

ADTの登録方法

サイト→サイトビルダー → アプリケーションディスプレイテンプレート をクリックします。

+アイコンからナビゲーションメニューテンプレートを選択します。

以下のように入力して保存します。

• 名前: card menu ADT
• 詳細はデフォルトままでOKです。（フォーマットはFreeMarkerが選択されます）
  
• スクリプトとして以下を記述して保存します。

<#if preview>
  <div class="alert alert-info">
   <@liferay.language key="there-are-no-pages-to-display-for-the-current-page-level" />
  </div>
 </#if>
<#else>
 <#assign
  portletDisplay = themeDisplay.getPortletDisplay()
  navbarId = "navbar_" + portletDisplay.getId()
 />
 <div id="${navbarId}">
  <ul aria-label=<@liferay.language key="site-pages" />" class="display-style-icon list-unstyled row navigation-menu-portlet" role="menubar">
   <h1 class="hide-accessible"><@liferay.language key="navigation" /></h1>
   <#assign navItems = entries />
   <#list navItems as navItem>
    <#assign showChildren = (displayDepth != 1) && navItem.hasBrowsableChildren() />
    <#if navItem.isBrowsable() || showChildren>
     <#assign
      nav_item_attr_selected = ""
     />
     <#if navItem.isSelected()>
      <#assign
       nav_item_attr_selected = "aria-selected='true'"
      />
     </#if>
     <li  class="entry-card lfr-asset-item" id="layout_${navItem.getLayoutId()}" ${nav_item_attr_selected} role="presentation">
      <div class="card">
       <div class="card-header" style="background-color: #ececec;">
        <a href=${navItem.getURL()} ${navItem.getTarget()}>${navItem.getName()}</a>
       </div>
       <div class="card-body" >
        <p class="card-text" style="background-image: url('${navItem.iconURL()}');
        background-position:center center; background-repeat: no-repeat;background-size:cover; min-height: 200px;">
        </p>
       </div>
      </div>
     </li>
    </#if>
   </#list>
  </ul>
 </div>
</#if>

ADTの適用 

準備として、サイトページにナビゲーションメニューを配置します。（ウィジェットからナビゲーションメニューをドラッグ＆ドロップします。）

ここでは適当にトップページと同レベルに複数ページを作成しておきました。

初期状態は上記のようになっているはずです。

適用されているADTを変更するには、ポートレットメニューから設定をクリックします。
テンプレートを表示する、をクリックして先ほど作成したcard menu ADTを選択します。

保存後にページを参照すると以下のようにナビゲーションメニューの見た目が変更されていることがわかります。

今回はカードの中身にページに設定できるアイコンを表示できるように作成したので、ページにアイコンを設定してみると以下のように表示されます。

まとめ

今回はナビゲーションポートレットにADTを適用して簡単なカード形式メニューを作ってみました。

ADTを使いこなすには、表示対象であるアセットエンティティ（今回の例であればページ）について

どのような属性がありどのような値が格納されているか、を把握しておく必要がありますが、

簡単なテンプレートを定義するだけで劇的に見た目をカスタマイズできるとても強力なツールです。

すべてゼロベースでポートレットを作るよりも簡単にLiferayをカスタマイズできるので、積極的に活用してみてください。