ウィジェットテンプレートの作成

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

ウィジェットテンプレートは、 FreeMarker を使用して、サイトページでウィジェットがどのようにレンダリングされるかを決定します。各テンプレートは、特定のウィジェットタイプ用に設計されており、ページ内のウィジェットを設定する際に選択できます。

注

Liferay DXP/Portal 7.4+では、ウィジェットテンプレートはFreeMarkerにのみ対応しています。 Velocityへのサポートは終了しました。

以下の手順でウィジェットテンプレートを作成します。

ウィジェットテンプレートを作成する目的のサイトに移動します。
サイトメニュー ( ) を開き、 デザイン → テンプレート → ウィジェットテンプレートに移動します。

注

グローバルサイトでは、サンプルのウィジェットテンプレートを表示できます。これらのサンプルテンプレートは、すでにアプリに設定されているデフォルトのテンプレートとは異なります。
追加 ( ) をクリックし、作成するテンプレートの種類を選択します。
テンプレートの名前を入力します。
エディターでテンプレートをデザインします。

要素サイドパネル ( ) では、使用可能なウィジェットフィールド、変数、およびユーティリティを選択できます。すべてのウィジェットに共通する要素もあれば、選択したウィジェットタイプに特化した要素もあります。
(オプション) 詳細サイドパネル () で、テンプレートの説明を入力し、画像を選択します。
[保存]をクリックします。

テンプレートエディター

テンプレートエディターの右側には、テンプレートの作成によく使われる変数がパレットで表示されています。テンプレートを作成する際の参考にしてください。テンプレートエディターに変数を配置するには、配置したい場所にテキストカーソルを置き、変数名をクリックします。

また、各変数には、詳細な説明を表示するツールチップがあります。ウィジェットテンプレートには複数の種類があるため、ウィジェットテンプレートごとに異なる変数も存在します。したがって、各テンプレートには、その特定のテンプレートにのみ適用可能な異なる変数のセットがあります。

また、オートコンプリート機能を使って、テンプレートに変数を追加することもできます。 ${ と入力すると、利用可能な変数のドロップダウンメニューが表示され、呼び出すことができます。変数の一つをクリックすると、エディターにその変数が挿入されます。

また、同じ種類のテンプレートを他のテンプレートに埋め込むことも可能です。例えば、既存のWikiウィジェットテンプレートがあり、別のWikiウィジェットテンプレートをもう1つ作成したいとします。ゼロから始めるのではなく、既存のWikiウィジェットテンプレートを新しいものにインポートして、それを元に構築することができます。つまり、システム内のVelocityやFreeMarkerのテンプレートで取り込んだコードを再利用するための汎用テンプレートとしてウィジェットテンプレートを使用できます。

テンプレートエディターでヘッドレス API を呼び出す

Liferay のヘッドレス API サービスをテンプレートエディターで直接呼び出すことができます。 API エンドポイントの相対 URL を持つ restClient オブジェクトを使用して、テンプレートにヘッドレスリソースを挿入します。

GET エンドポイントは restClient オブジェクトでのみ呼び出すことができることに注意してください。

たとえば、 restClient を使用してサイトのブログ投稿を取得し、次の FreeMarker スクリプトで見出しを印刷できます。

<#assign
	blogPostings = restClient.get("/headless-delivery/v1.0/sites/{siteId}/blog-postings").items
/>

<#list blogPostings as blogPosting>
	<h1>${blogPosting.headline}</h1>
</#list>

標準の cURL リクエストと同じように、API レスポンスをフィルタリング、並べ替え、検索、ページ分けすることができます。以下に例を示します。

<#assign
	blogPostings = restClient.get("/headless-delivery/v1.0/sites/{siteId}/blog-postingssort=dateCreated:asc&filter=creatorId+eq+20126").items
/>

<#list blogPostings as blogPosting>
	<h1>${blogPosting.headline}</h1>
</#list>

API のフィルタリングの詳細については、 API クエリパラメータを参照してください。

API エクスプローラーを使用して、ヘッドレスリソースの API エンドポイントとスキーマを見つけます。

ウィジェットテンプレートを保存したら、アクションボタン () を使用して管理できます。これにはいくつかのオプションがあります。

編集：ウィジェットテンプレートの設定プロパティを変更します。
権限: ウィジェットテンプレートの権限更新、権限、削除、および表示を管理します。
コピー: ウィジェットテンプレートのコピーを作成します。
削除: ウィジェットテンプレートを削除します。

さらに、ウィジェットテンプレートは、静的URLとWebDAV URLを生成します。これらの値は、テンプレートのXMLソースにアクセスします。これらのURLは、メニューからウィジェットテンプレートをクリックし、［詳細］セクションを展開することで見つけることができます。 WebDAV URLにより、サイト管理者はリモートサーバー上のウィジェットテンプレートを追加、参照、編集、削除することができます。 WebDAV URL の機能について詳しくは、「 WebDAV アクセス」を参照してください。

注

ウィジェットテンプレートにウィジェットを埋め込むことは可能ですが、他のウィジェットとの競合や予期せぬ動作（例：パンくずリストへのデータ集計ウィジェットの埋め込み）を引き起こす可能性があるため、推奨されません。ウィジェットテンプレートにウィジェットを埋め込むしかない場合、他のウィジェットと干渉しないことを確認してください。

次に、新しいウィジェットテンプレートを使用するようにウィジェットを設定します。

修正したいウィジェットの ［Configuration］ ページを開き、 ［表示設定］を開いてください。
［Display Template］で、ドロップダウンメニューからウィジェットテンプレートを選択します。

また、アプリのサイト別表示テンプレートを管理することもできます。管理するには、 表示テンプレート ドロップダウンメニューの横にある［[SPECIFIC_SITE] の表示テンプレートを管理する］リンクをクリックします。設定されたテンプレートのリストが表示され、新しいテンプレートを追加したり、既存のテンプレートを編集したりすることができます。