自訂Forms Portal元件的範本 customizing-templates-for-forms-portal-components

先決條件 prerequisites

管理表單中繼資料

HTML和CSS的工作知識

概觀 overview

AEM Forms使用者介面可讓您將中繼資料新增至任何表單。 自訂中繼資料可增強使用者在列出和搜尋組織表單時的體驗。

Forms入口網站可讓您在表單清單中使用自訂中繼資料。 為資產建立自訂範本時,您可以修改其版面,並在CSS樣式集中使用自訂中繼資料。

請務必遵守下列步驟,以建立各種Forms Portal元件的自訂範本。

建立自訂範本 creating-a-nbsp-custom-template

  1. 在/apps下建立sling:Folder節點

    新增「fpContentType」屬性。 根據您為其定義自訂範本的元件,指定適當的屬性值。

    • 搜尋和清單元件: "/libs/fd/fp/formTemplate"

    • 草稿和提交元件:

      • 草稿區段: /libs/fd/fp/draftsTemplate
      • 提交區段:/libs/fd/fp/submissionsTemplate
    • 連結元件: /libs/fd/fp/linkTemplate

    新增您要在選取版面配置範本時顯示的標題。

    note note
    NOTE
    標題可以不同於您建立的sling:Folder的節點名稱。

    以下影像說明「搜尋和製表器」元件的組態。
    正在建立sling:Folder

  2. 在此資料夾中建立檔案template.html,以便用作自訂範本。

  3. 寫入自訂範本並使用如下所述的自訂中繼資料。

工作範例 working-example

以下是自訂範本的範例實作,其中Forms入口網站為Search & Lister元件取得自訂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>

自訂範本的技術規格 technical-specifications-for-custom-templates

任何Forms Portal元件的自訂範本包含可重複及不可重複的專案。 可重複專案是基本列示實體。 可重複專案的範例為「搜尋與清單製作者」、「草稿與提交」以及「連結」元件。

Forms Portal提供預留位置語法,以顯示自訂/現成可用的中繼資料。 顯示表單、草稿或提交的結果之後,就會填入預留位置。

若要包含可重複的專案,請將屬性​ data-repeatable ​的值設定為​ true

在所討論的範例中,自訂範本的頂端有兩個Div元素。 第一個具有「__FP_boxes-container」CSS類別,可作為所清單單的容器元素。 第二個是「__FP_boxes」CSS類別,是基本實體的範本,在此例中為「表單」。 Div元素中存在的​ data-repeatable ​屬性具有值​ true.

每個預留位置都有一個專屬的現成可用中繼資料集。 若要在表單的特定位置顯示自訂中繼資料,請在該位置新增​ ${metadata_prop}屬性

在此範例中,中繼資料屬性用於多個執行個體。 例如,它以規定的方式用於​ descriptionnameformUrlhtmlStylepdfUrlpdfStyle ​和​ path

現成可用的中繼資料 out-of-the-box-metadata

各種Forms Portal元件提供專屬的開箱即用中繼資料集,供您用於清單。

搜尋與清單元件 search-amp-lister-component

  • 標題: ​表單標題

  • name:表單的名稱(大多與標題相同)

  • description:表單的說明

  • formUrl:將表單轉譯為HTML的URL

  • pdfUrl:將表單轉譯為PDF的URL

  • assetType:資產的型別。 有效值包括​ 表單PDF表單列印表單 ​和​ 最適化表單

  • htmlStyle ​和​ pdfStyle:分別用於轉譯的HTML和PDF圖示的顯示樣式。 有效值為"__FP_display_none"或空白。

NOTE
請記得在自訂樣式表中使用__FP_display_none類別。
  • downloadUrl:下載資產的URL。

支援本地化、排序和使用使用者介面上的設定屬性(僅限搜尋和製表者):

  1. 本地化支援:若要本地化任何靜態文字,請使用屬性${localize-YOUR_TEXT},並讓本地化值可供使用(如果尚未存在的話)。
    在所討論的範例中,屬性${localize-Apply}${localize-Download}是用來當地語系化套用和下載文字。

  2. 排序支援:按一下HTML元素來排序搜尋結果。 若要在表格配置中實施排序,請在特定表格標頭上新增「data-sortKey」屬性。 此外,將其值新增為您要排序的中繼資料。
    例如,對於格線檢視中的「Title」標頭,「data-sortKey」標頭的值為「title」。 按一下標題,以便排序特定欄中的值。

  3. 使用組態屬性: Search & Lister元件有數個組態可供您在使用者介面上使用。 例如,若要顯示透過編輯對話方塊儲存的HTML工具提示文字,請使用${config-htmlLinkText}屬性。 同樣地,對於PDF工具提示文字,請使用 ${config-pdfLinkText}屬性。

  • 標題: ​表單標題
  • formUrl:將表單轉譯為HTML的URL
  • target:連結的目標屬性。 有效值為「_blank」和「_self」。
  • linkText:連結標題

草稿和提交元件 drafts-amp-submissions-component

  • 路徑:草稿/提交中繼資料節點的路徑。 將其與。HTML副檔名用作URL,以便您開啟草稿或提交。
  • contextPath: AEM執行個體的內容路徑
  • 第一個字母:最適化表單標題的第一個字母(大寫),已儲存為草稿或已提交。
  • formName:最適化表單的標題,已儲存為草稿或已提交。
  • draftID:所列出草稿的ID (僅用於草稿區段的範本中)。
  • submitID:列出之提交的ID (僅用於提交區段的範本)。
  • 狀態:已提交表單的狀態。 (僅用於「提交」區段的範本)。
  • description:與草稿或提交關聯的最適化表單的說明。
  • diffTime:目前時間與草稿的最後儲存動作之間的差異。 或者,也可以選擇目前時間與上次提交之提交動作之間的差異。
  • iconClass:用來顯示草稿/提交之第一個字母的CSS類別。 Forms Portal包含下列類別,提供各種不同色彩的背景。
  • 所有者:建立草稿/提交專案的使用者。
  • 今天:以DD:MM:YYYY格式建立草稿或提交的日期。
  • TimeNow:以HH:MM:SS 24小時格式建立草稿或提交的時間

附註:

  1. 針對「草稿與提交」元件下「草稿」區段中的刪除選項,將CSS類別命名為「__FP_deleteDraft」。 此外,請包含值為​ ${draftID} ​的屬性「draftID」,這是對應草稿的草稿ID。

  2. 建立連結以開啟草稿和提交時,您可以指定​ ${path}.html ​作為錨點標籤的​ href ​屬性值。

草稿與提交節點

A。 容器元素

B. ​具有固定階層的「路徑」中繼資料,以取得每個表單儲存的縮圖。

C. ​用於每個表單之範本區段的可重複資料屬性

D. ​本地化「套用」字串

E. ​使用組態屬性pdfLinkText

F. ​使用「pdfUrl」中繼資料

秘訣、技巧和已知問題 tips-tricks-and-known-issues

  1. 請勿在任何自訂範本中使用單引號(')。
  2. 對於自訂中繼資料,僅將此屬性儲存在​ jcr:content/metadata ​節點上。 如果您將其儲存在任何其他位置,Forms Portal將無法顯示中繼資料。
  3. 確認任何自訂中繼資料或現有中繼資料的名稱不含冒號( : )。 如果出現提示,您無法在使用者介面中顯示。
  4. 資料可重複 ​對​ 連結 ​元件沒有任何意義。 Adobe建議您避免在連結元件的範本中使用此屬性。

相關文章

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2