HTML和CSS的工作知識
AEM Forms使用者介面可讓您將中繼資料新增至任何表單。 自訂中繼資料可增強使用者在列出和搜尋組織表單時的體驗。
Forms入口網站可讓您在表單清單中使用自訂中繼資料。 建立資產的自訂範本時,您可以修改其版面配置,並在CSS樣式集中使用自訂中繼資料。
執行以下步驟,為各種Forms Portal元件建立自訂範本。
在/apps下建立sling:Folder節點
新增「fpContentType」屬性。 根據您為其定義自訂範本的元件,指定適當的屬性值。
搜尋和清單產生器元件:"/libs/fd/fp/formTemplate"
草稿和提交元件:
連結元件: /libs/fd/fp/linkTemplate
新增您要在選取版面配置範本時顯示的標題。
標題可以不同於您建立的sling:Folder的節點名稱。
以下影像說明「搜尋和製表器」元件的設定。
在此資料夾中建立檔案template.html作為自訂範本。
撰寫自訂範本並使用自訂中繼資料,如下所述。
以下為自訂範本的範例實作,其中Forms入口網站為「搜尋與清單程式」元件取得自訂Geometrixx政府卡配置。
<div class="__FP_boxes-container __FP_single-color">
<div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
<div class="__FP_boxes-thumbnail">
<img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
</div>
<h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
<p>${description}</p>
<div class="boxes-icon-cont __FP_boxes-icon-cont">
<div class="op-dow">
<a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
<a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
</div>
</div>
</div>
</div>
任何Forms Portal元件的自訂範本包含可重複及不可重複的專案。 可重複專案是列出清單的基本實體。 可重複專案的範例包括「搜尋和製表人」、「草稿和提交」以及「連結」元件。
Forms Portal提供預留位置語法,用於顯示自訂/OOTB中繼資料。 顯示表單、草稿或提交的結果之後,就會填入預留位置。
若要包含可重複的專案,請設定屬性的值 data-repeatable 至 true.
在所討論的範例中,自訂範本的頂端存在兩個Div元素。 第一個具有「__FP_boxes-container」CSS類別,可作為所清單單的容器元素。 第二個是「__FP_boxes」CSS類別,是基本實體的範本,在此例中是表單。 此data-repeatableDiv元素中存在的屬性具有值true.
每個預留位置都有一個專屬的OOTB中繼資料集。 若要在表單上的特定位置顯示自訂中繼資料,請新增 ${metadata_prop}屬性 在原處。
在此範例中,中繼資料屬性用於多個執行個體。 例如,它被用於說明,名稱,formUrl,htmlStyle,pdfUrl,pdfStyle、和路徑以規定的方式進行。
各種Forms Portal元件提供您可用於列出的專用OOTB中繼資料集。
標題: 表單標題
名稱:表單名稱(大多與標題相同)
說明:表單說明
formUrl:將表單轉譯為HTML的URL
pdfUrl:將表單轉譯為PDF的URL
assetType:資產型別。 有效值包括 表單,PDF表單, 列印表單、和 最適化表單
htmlStyle和 pdfStyle:分別用於呈現的HTML和PDF圖示的顯示樣式。 有效值為"__FP_display_none」或空白。
請記得在自訂樣式表中使用__FP_display_none類別。
支援本地化、排序和使用使用者介面上的設定屬性(僅限搜尋和製表人):
本地化支援:若要本地化任何靜態文字,請使用屬性 ${localize-YOUR_TEXT}
並讓當地語系化的值可供使用(如果尚未存在)。
在所討論的範例中,屬性 ${localize-Apply}
和 ${localize-Download}
用於本地化「套用」和「下載」文字。
排序支援:按一下HTML元素可對搜尋結果進行排序。 若要在表格版面配置中實作排序,請在特定表格標頭上新增「data-sortKey」屬性。 此外,將其值新增為要排序的中繼資料。
例如,對於網格檢視中的「Title」標頭,「data-sortKey」標頭的值為「title」。 按一下標題可對特定欄中的值進行排序。
使用設定屬性:搜尋和清單元件有多個可在使用者介面上使用的設定。 例如,若要顯示透過編輯對話方塊儲存的HTML工具提示文字,請使用 ${config-htmlLinkText}
屬性。 同樣地,對於PDF工具提示文字,請使用 ${config-pdfLinkText}
屬性。
注意:
針對「草稿和提交」元件下「草稿」區段中的刪除選項,將CSS類別命名為「__FP_deleteDraft」。 此外,將屬性「draftID」與值納入 ${draftID},即對應草稿的草稿識別碼。
建立開啟草稿和提交專案的連結時,您可以指定 ${path}.html 作為 href 錨點標籤的屬性。
A. 容器元素
B. 具有固定階層的「路徑」中繼資料,可取得針對每個表單儲存的縮圖。
C. 用於每個表單的範本區段的資料可重複屬性
D. 將「套用」字串當地語系化
E. 使用設定屬性pdfLinkText
F. 使用「pdfUrl」中繼資料