Liferay DXPでフラグメントにウィジェット（ポートレット）を埋め込む - Liferay DXPでフラグメントにウィジェット（ポートレット）を埋め込む - aegif Labo Blog Liferay

null Liferay DXPでフラグメントにウィジェット（ポートレット）を埋め込む

カスタマイズ 2022.09.06

こんにちは。おおたにです。

今回はLiferay DXPのフラグメントにウィジェット（ポートレット）を埋め込む方法を紹介します。

旧来のウィジェットページしか触ったことが無い方には馴染みの薄い機能かもしれませんので、まずはフラグメントの説明から始めようと思います。

フラグメントとは

フラグメントとはコンテンツページを構成する部品の1つで、デフォルトで様々な種類のフラグメントが用意されています。コンテンツページのドロップゾーンにこれらのフラグメントやウィジェットを配置することでWebページを自由に構成することができます。

また、カスタムのフラグメントを作成し、再利用可能な部品としてWebサイト内で使いまわすことも可能です。フラグメントはHTML、CSSおよびJavaScriptを使って定義されており、フラグメントを作成する際には以下のような機能を利用することができます。

編集可能な要素 : テキストや画像、リンク、リッチテキストなど、内容を編集可能な要素を追加できる
ドロップゾーン : フラグメントやウィジェットをドラッグアンドドロップできるドロップゾーンを追加できる
設定のオプション : フラグメントの色などのオプションを定義できる
FreeMarkerテンプレート : 代替構文を使うことができる
ウィジェットの埋め込み : フラグメントにウィジェットを埋め込むことができる（後述）

また、既存のフラグメントをコピーしてそれをベースに新たなフラグメントを作れるため、既存のフラグメントを少し弄るというような事も簡単にできます。

フラグメントにウィジェットを埋め込む2つの方法

では、本題に移ります。カスタムのフラグメントを作成する際に、検索や言語選択などの既存機能をフラグメント内で利用したいシチュエーションがあります。このような場合は、フラグメントにウィジェットを埋め込むことで要望を実現することができます。ウィジェットの埋め込みには2つの方法があるので、１つずつ紹介しようと思います。

ウィジェット埋め込みタグの利用

フラグメントでは予め定義されたlfr-widget-[name]タグを用いて特定のウィジェットを埋め込むことができます。こちらのドキュメントに利用可能なタグ一覧とカスタムのウィジェットをこの方式に対応させる方法の記載があるので参考にしてください。

FreeMarker @liferay_portletマクロの利用

ウィジェット埋め込みタグが定義されていないウィジェットについてはFreeMarkerの@liferay_portletマクロを利用して埋め込むことができます。具体的には、以下のコードをフラグメントHTMLに記載することで任意のウィジェットを埋め込めます。

[@liferay_portlet["runtime"]
portletName="ポートレット名"/]

実際に試してみよう

では実際に試してみましょう。今回は、以下のデフォルトのヘッダナビゲーションバーを、

以下のようにカスタマイズしてみます。

「Sign In」がただのリンクなので、デフォルトテーマで表示されるユーザパーソナルバーに変更する
言語選択を追加する

1. 適当なサイトに移動し、デザイン->ページフラグメント->フラグメントセットの＋アイコンをクリックしてフラグメントセット「custom」を作成する

2. デフォルト->ナビゲーションバー->ヘッダー（明るい）のアクションメニューの「コピー先」をクリックし、フラグメントセットcustomを選択する

3. フラグメントセットcustomに移動するとヘッダー（明るい）のコピーができているので、アクションメニューの「名前を変更する」から名前を「カスタムヘッダー」に変更する

4. 「カスタムヘッダー」をクリックする

5. フラグメントのHTMLを以下のように変更して「公開」をクリックする

<header
    class="bg-white border-bottom border-light navbar navbar-light py-4 section-header"
>
    <div class="container flex-column flex-lg-row justify-content-between text-break">
        <img alt="Logo Image" class="section-header-logo" data-lfr-editable-id="01-logo" data-lfr-editable-type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnSURBVHgB7cwxEQAACAOxgn8fHB7wBiK6MHwEJKpnZUiZCAgIvgQHmksDKxJ1SeoAAAAASUVORK5CYII=" />
        <div class="align-items-center d-flex flex-column flex-lg-row mt-3 mt-lg-0">
            <lfr-widget-nav></lfr-widget-nav>
            <span class="ml-lg-3 mt-4 mt-lg-0">
                [@liferay_portlet["runtime"]
        portletName="com_liferay_site_navigation_language_web_portlet_SiteNavigationLanguagePortlet"/]
            </span>
            <span class="ml-lg-3 mt-4 mt-lg-0">
        [@liferay_portlet["runtime"]
        portletName="com_liferay_product_navigation_user_personal_bar_web_portlet_ProductNavigationUserPersonalBarPortlet"/]
            </span>
        </div>
    </div>
</header>

ここで注目すべき点は以下のとおりです。

<lfr-widget-nav></lfr-widget-nav>でメニュー表示ウィジェットを埋め込んでいる（ウィジェット埋め込みタグ方式）
@liferay_portlet["runtime"]で言語選択ウィジェット(com_liferay_site_navigation_language_web_portlet_SiteNavigationLanguagePortlet)を埋め込んでいる（@liferay_portletマクロ方式）
Sign Inボタンを削除し、@liferay_portlet["runtime"]でユーザパーソナルバーウィジェット(com_liferay_product_navigation_user_personal_bar_web_portlet_ProductNavigationUserPersonalBarPortlet)を埋め込んでいる（@liferay_portletマクロ方式）

6. 公開したら、適当なコンテンツページでフラグメントにCUSTOM->カスタムヘッダーが追加されていることを確認し、カスタムヘッダーをドラッグアンドドロップして表示を確認する