テンプレート処理中にエラーが発生しました。
Java method "com.liferay.portal.json.JSONFactoryImpl.createJSONObject(String)" threw an exception when invoked on com.liferay.portal.json.JSONFactoryImpl object "com.liferay.portal.json.JSONFactoryImpl@2ad66ae2"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: navigationJSONObject = jsonFactoryUti...  [in template "17855804202317#32484267#LEARN-ARTICLE-NAV" at line 4, column 9]
----
1<#assign 
2	groupFriendlyURL = themeDisplay.getScopeGroup().getFriendlyURL() 
3	groupPathFriendlyURLPublic = themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL 
4	navigationJSONObject = jsonFactoryUtil.createJSONObject(navigation.getData()) 
5	navigationMenuItems = 
6
7			"Analytics Cloud": { 
8				"image": "/documents/d${groupFriendlyURL}/analytics_c-svg", 
9				"title": "Analytics Cloud", 
10				"url": "analytics-cloud" 
11			}, 
12			"Commerce": { 
13				"image": "/documents/d${groupFriendlyURL}/commerce_product-svg", 
14				"title": "Commerce", 
15				"url": "commerce" 
16			}, 
17			"DXP": { 
18				"image": "/documents/d${groupFriendlyURL}/dxp_p-svg", 
19				"title": "DXP / Portal", 
20				"url": "dxp" 
21			}, 
22			"Liferay Cloud": { 
23				"image": "/documents/d${groupFriendlyURL}/dxp_c-svg", 
24				"title": "Liferay Cloud", 
25				"url": "liferay-cloud" 
26			}, 
27			"Reference": { 
28				"image": "/documents/d${groupFriendlyURL}/reference-svg", 
29				"title": "Reference", 
30				"url": "reference" 
31
32
33 
34	breadcrumbJSONArray = navigationJSONObject.getJSONArray("breadcrumb") 
35	childrenJSONArray = navigationJSONObject.getJSONArray("children") 
36	parentJSONObject = navigationJSONObject.getJSONObject("parent") 
37	productJSONObject = breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self") 
38	siblingsJSONArray = navigationJSONObject.getJSONArray("siblings") 
39/> 
40 
41<div class="learn-article-nav"> 
42	<#if productJSONObject?has_content && productJSONObject.getString("title")?has_content && navigationMenuItems[productJSONObject.getString("title")]?has_content && navigationMenuItems[productJSONObject.getString("title")].title?has_content> 
43		<div 
44			class="dropdown learn-article-nav-root learn-dropdown" 
45
46			<div class="learn-article-nav-item"> 
47				<div class="d-flex"> 
48					<div class="learn-article-nav-image"> 
49						<img 
50							class="lexicon-icon lexicon-icon-caret-bottom product-icon" 
51							role="presentation" 
52							src='${navigationMenuItems[productJSONObject.getString("title")].image}' 
53							viewBox="0 0 512 512" 
54						/> 
55					</div> 
56 
57					<span class="learn-article-nav-text">${navigationMenuItems[productJSONObject.getString("title")].title}</span> 
58				</div> 
59 
60				<div id="dropdown-icon"> 
61					<svg 
62						class="lexicon-icon lexicon-icon-caret-bottom" 
63						role="presentation" 
64						viewBox="0 0 512 512" 
65
66						<use xlink:href="/o/admin-theme/images/clay/icons.svg#caret-bottom"></use> 
67					</svg> 
68				</div> 
69			</div> 
70 
71			<ul class="dropdown-menu learn-dropdown-menu"> 
72				<#list navigationMenuItems as key, value> 
73					<li> 
74						<a 
75							class="dropdown-item learn-article-nav-item" 
76							href="/w/${navigationMenuItems[key].url}/index" 
77							tabindex="4" 
78
79							<span class="d-flex"> 
80								<span class="learn-article-nav-image"> 
81									<img 
82										class="lexicon-icon lexicon-icon-caret-bottom product-icon mt-0 mr-2" 
83										role="presentation" 
84										src="${value.image}"height: 25px; margin-left: 5px; max-width: none; width: 25px; 
85										viewBox="0 0 512 512" 
86									/> 
87								</span> 
88								<span class="learn-article-nav-text">${value.title}</span> 
89							</span> 
90 
91							<#if navigationMenuItems[productJSONObject.getString("title")].url == value.url> 
92								<span> 
93									<@clay["icon"] symbol="check" /> 
94								</span> 
95							</#if> 
96						</a> 
97					</li> 
98				</#list> 
99			</ul> 
100		</div> 
101	</#if> 
102 
103	<div class="learn-article-nav-content"> 
104		<#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content> 
105			<div class="learn-article-nav-item learn-article-nav-parent liferay-nav-item p-2"> 
106				<div class="mr-2"> 
107					<a 
108						href='${parentJSONObject.getString("url")}' 
109
110						<svg 
111							class="lexicon-icon lexicon-icon-angle-left" 
112							role="presentation" 
113							viewBox="0 0 512 512" 
114
115							<use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use> 
116						</svg> 
117					</a> 
118				</div> 
119 
120				<span>${parentJSONObject.getString("title")}</span> 
121			</div> 
122		</#if> 
123 
124		<#if childrenJSONArray.length() gt 0> 
125			<ul class="m-0 p-2"> 
126				<#list 0..childrenJSONArray.length()-1 as i> 
127					<li class="learn-article-nav-item"> 
128						<a 
129							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}' 
130							href="${childrenJSONArray.getJSONObject(i).url}" 
131
132							<span>${childrenJSONArray.getJSONObject(i).getString("title")}</span> 
133						</a> 
134					</li> 
135				</#list> 
136			</ul> 
137		<#elseif siblingsJSONArray.length() gt 0> 
138			<ul class="m-0 p-2"> 
139				<#list 0..siblingsJSONArray.length()-1 as i> 
140					<li class="learn-article-nav-item"> 
141						<a 
142							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}' 
143							href="${siblingsJSONArray.getJSONObject(i).url}" 
144
145							<span>${siblingsJSONArray.getJSONObject(i).getString("title")}</span> 
146						</a> 
147					</li> 
148				</#list> 
149			</ul> 
150		</#if> 
151	</div> 
152</div> 

表示テンプレートの作成

データ定義ごとに、必要な数のディスプレイを作成することができます。 データリストのフォームビューに特定のデータ定義のすべてのフィールドを表示しないフォームテンプレートを作成した場合は、それらのフィールドをリストビューにも表示したくない場合があります。 表示テンプレートを使用してリストビューを変更します。

注: ウェブコンテンツテンプレートに慣れている方は、ディスプレイテンプレートも同じようにリストの表示をカスタマイズします。 ディスプレイテンプレートはFreeMarkerやVelocityで書かれており、Webコンテンツテンプレートが構造体からデータを引き出すのと同じように、データ定義からデータを引き出します。 また、Webコンテンツのテンプレートと同様に、ディスプレイテンプレートを他のディスプレイテンプレートに埋め込むことができます。 これにより、再利用可能なコード、JavaScriptライブラリのインポート、またはVelocityやFreeMarkerのテンプレートでインポートされたマクロをシステムに組み込むことができます。 表示テンプレートを埋め込むことで、似たようなデータ定義が多数ある場合に、より効率的な処理が可能になります。 埋め込まれた表示テンプレートをインポートして、それを元に新しい表示テンプレートを作成します。

フォームテンプレートと同様に、サイト管理または動的データリスト表示ウィジェットから表示テンプレートを作成できます。

サイト管理から新しい表示テンプレートを作成するには

  1. コンテンツとデータ] → [動的データリスト] へ行きます。

  2. 右上のオプションアイコン(Options)をクリックし、 [データ定義の管理] をクリックします。

  3. データ定義のリストで、定義の[アクション]アイコン(Actions)をクリックし、 [テンプレートの管理] をクリックします。

  4. 追加 アイコンをクリックし(Add)、 ディスプレイテンプレートの追加 をクリックします。

  5. テンプレートに名前をつけ、フォームの[詳細]セクションを展開して、説明をつけます。 フォームの詳細セクションで、使用するテンプレート言語を言語セレクタから選択します。 FreeMarker または Velocity を選択できます。

  6. フォームのスクリプトセクションで、前のステップで選択したテンプレート言語を使って、エディタでテンプレートを作成します。  エディターの左にあるパレットには、共通の変数が入っています。 変数をクリックすると、エディターに挿入されます。 エディターもオートコンプリートしています。 FreeMarkerのテンプレートでは、 ${と入力すると、一般的な変数のオートコンプリートリストが表示されます。 エディターに挿入する変数を選択します。 また、エディターの下にある ファイルを選択 ボタンをクリックして、完全なスクリプトファイルをアップロードすることもできます。

    スクリプトセクションを使用してテンプレートを作成します。

    テンプレートエディター用のヘルパー変数については、以下を参照してください。

  7. テンプレートの作成が完了したら、 保存 をクリックします。

また、[動的データリスト表示]ウィジェットから表示テンプレートを作成することもできます。

  1. サイトページでウィジェットを追加および構成するには、[データリストの作成] 記事の手順に従ってください。 テンプレートを作成するリストを表示するようにウィジェットを構成してください。

  2. ウィジェットの 表示テンプレートの追加 リンクをクリックします。 これにより、リスト定義のフォームテンプレートを作成するための上記と同じフォームが開きます。

表示テンプレート

ヘルパー変数は、テンプレートエディターで使用できます。 これらのデータは、ディスプレイテンプレートを作成する際に使用するほとんどのデータにアクセスできます。 [データリスト変数]の見出しの下にある変数は、テンプレートの作成対象となるデータ定義に関する特定の情報を注入することができます。

データ定義ID: reserved_ddm_structure_idとなります。

データリストの説明: reserved_record_set_descriptionとなります。

データリストID: reserved_record_set_idとなります。

データリスト名: reserved_record_set_nameとなります。

テンプレートID: reserved_ddm_template_idとなります。

テンプレート内では、これらの変数によってレコードセットのID、名前、説明、データ定義が与えられます。

レコード 変数に割り当てることにより、レコードのリストを表示します。 リストのレコードを DDLDisplayTemplateHelperから取得しますが、この中には以下の関数が含まれています。

getDocumentLibraryPreviewURL

getHTMLContent

getLayoutFriendlyURL

getRecords

renderRecordFieldValue

DDLDisplayTemplateHelper は一般的なタスクを実行します。 getRecords メソッドを使用して、データ定義のエントリにアクセスし、 records 変数に割り当てます。

<#assign records = ddlDisplayTemplateHelper.getRecords(reserved_record_set_id)>

これは、関連するデータリストのレコードを取得します。 まだ何もしていないので、ディスプレイは空のままです。 すべてのレコードをリストアップするには、テンプレートエディターのサイドバーにある[データリストレコード]ヘルパーを使います。 テンプレートエディターウィンドウの適切な場所にカーソルを置き、[データリスト・レコード]をクリックしてください。 このコードはカーソルに表示されます。

<#if records?has_content>
    <#list records as cur_record>
        ${cur_record}
    </#list>
</#if>

このデフォルトのコードスニペットは、与えられたデータ定義に対するデータベース内のすべての情報を吐き出しますが、これはあまり人間が読めるものではありません。

{uuid=52c4ac1c-afe7-963c-49c6-5279b7030a99, recordId=35926, groupId=20126, companyId=20099, userId=20139, userName=Test Test, versionUserId=20139, versionUserName=Test Test, createDate=2018-07-26 14:31:51.056, modifiedDate=2018-07-26 14:31:51.058, DDMStorageId=35927, recordSetId=35922, recordSetVersion=1.0, version=1.0, displayIndex=0, lastPublishDate=null}

ここでは、埋め込まれた連絡先データ定義に基づくリストを使用し、[会社名]と[電子メール]フィールドのみを箇条書きで表示するシンプルなテンプレート例をご紹介します。

    <#assign records = ddlDisplayTemplateHelper.getRecords(reserved_record_set_id)>

    <h1>Here are contacts by company name and email address.</h1>

    <#if records?has_content>
        <#list records as cur_record>
            <ul>
                <li>
                    <#-- The below gets the Company field and wraps it in an <em> tag -->
                    Company Name: <em>${ddlDisplayTemplateHelper.renderRecordFieldValue(cur_record.getDDMFormFieldValues("company")?first, locale)}</em><br />
                    <#-- The below gets the Email field  and wraps it in an <em> tag -->
                    Email: ${ddlDisplayTemplateHelper.renderRecordFieldValue(cur_record.getDDMFormFieldValues("email")?first, locale)}
                </li>
            </ul>
        </#list>
    </#if>

次のようになります。

会社名とメールアドレスを表示する表示テンプレートの例。