自訂最適化表單的錯誤訊息的版面配置和位置

您可以自訂最適化表單的錯誤訊息的版面配置和位置。 您可以執行下列自訂:

  • 自訂欄位標題的位置和版面配置,而不需對對應的CSS屬性做任何變更
  • 自訂內嵌錯誤訊息的位置
  • 自訂動態說明指標的內容
  • 自訂欄位元件(標題、介面工具集、簡短說明、詳細說明和說明指示元件)的位置,而不需對對應的CSS屬性進行任何變更

自訂欄位的版面配置

您可以自訂單一欄位或所有欄位的版面配置,以變更標題和錯誤訊息的位置。 執行下列步驟,將自訂版面套用至欄位:

自訂單一欄位的版面配置

執行下列步驟,將自訂版面套用至單一欄位:

  1. 以​Style​模式開啟表單。 若要以樣式模式開啟表單,請在頁面工具列中點選canvas-drop-down > Style

  2. 在側欄的​Form Objects​下,選取欄位並點選編輯按鈕edit-button

  3. 選取您要自訂的欄位狀態,並指定該狀態的樣式。

    指定欄位的內嵌樣式

自訂表單中所有欄位的版面配置

有了AEM Forms,您現在可以建立主題並套用至表單。 主題編輯器可讓您在單一位置指定表單元件的樣式。 當您建立主題時,可在元件層級指定樣式。 如需主題的詳細資訊,請參閱「AEM Forms中的主題」。

使用主題編輯器建立主題,以自訂表單中所有欄位的版面配置。 建立主題後,請執行下列步驟,將其套用至表單:

  1. 在編輯模式下開啟表格。
  2. 在編輯模式中,選擇元件,然後點選field-level > 最適化表單容器,然後點選cmppr
  3. 在側欄的「最適化表單主題」下,選取您使用主題編輯器建立的主題。

建立自訂欄位配置

  1. 開啟CRXDE lite。 預設URL為https://[Server]:[Port]/crx/de

  2. 將欄位版面從/libs/fd/af/layouts/field節點(例如defaultFieldLayout)複製至/apps節點(例如/apps/af-field-layout)。

  3. 重新命名複製的節點和defaultFieldLayout.jsp檔案。 例如,errorOnRight.jsp。

  4. 更改複製節點的qtip和jcr:description屬性的值。 例如,將屬性的值更改為「右側出現錯誤」

  5. 若要新增樣式和行為,請在/etc節點中建立用戶端程式庫。

    例如,在/etc/af-field-layout-clientlib位置,建立節點client-library。 新增包含值af.field.errorOnRight和style.less檔案的類別屬性,並包含下列程式碼:

    .widgetErrorWrapper {
    
     height: 38px;
     margin: 5px;
    
     .guideFieldWidget{
     width: 60%;
     float: left; 
     }
    
     .guideFieldError{
     overflow:hidden;
     width:40%; 
     }
    
    }
    
  6. 若要增強外觀和行為,請將在版面檔案(errorOnRight.jsp)中建立的用戶端程式庫包含在內。

  7. 開啟欄位的編輯對話框,選擇​樣式​頁籤。 在​設定欄位配置​下拉式方塊中,選取新建立的配置,然後按一下​確定

ErrorOnRight.zip套件包含在欄位右側顯示錯誤訊息的程式碼。

取得檔案

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now