Adaptive Forms的版面配置功能 layout-capabilities-of-adaptive-forms

Adobe 建議使用新式且可擴充的資料擷取核心元件,用來建立新的最適化表單將最適化表單新增到 AEM Sites 頁面。這些元件代表最適化表單建立方面的重大進步,可確保令人印象深刻的使用者體驗。本文會介紹使用基礎元件編寫最適化表單的舊方法。

版本
文章連結
AEM 6.5
按一下這裡
AEM as a Cloud Service
本文章

Adobe Experience Manager可讓您建立簡單易用的最適化Forms,為使用者提供動態體驗。 表單版面配置會控制專案或元件在調適型表單中的顯示方式。

版面型別 types-of-layouts

調適型表單提供下列版面型別:

面板配置 ​控制面板內的專案或元件在裝置上的顯示方式。

行動佈局 ​控制行動裝置上表單的導覽。 如果裝置寬度為768畫素或以上,則配置會視為行動版面,且已針對行動裝置最佳化。

工具列配置 ​控制動作按鈕在表單工具列或面板工具列中的位置。

所有這些面板配置都定義於/libs/fd/af/layouts位置。

若要變更最適化表單的版面,請在Experience Manager中使用撰寫模式。

面板配置 panel-layout

表單作者可以將版面配置與調適型表單的每個面板建立關聯,包括根面板。

面板配置可在/libs/fd/af/layouts/panel位置使用。 選取面板並選取 cmppr1 以檢視面板屬性。

最適化表單根面板的面板配置清單

回應式 — 全部於單頁無需導覽 responsive-everything-on-one-page-without-navigation-br

使用此面板佈局可建立回應式佈局,此佈局會根據裝置的熒幕大小進行調整,而無需任何專門的導覽。

使用此版面,您可以將多個​ 面板最適化表單 ​元件逐一放置在面板內。

使用小熒幕上所見回應式配置的表單

精靈 wizard

使用此面板配置在表單內提供引導式導覽。 例如,當您想要在表單中擷取必要資訊,同時逐步引導使用者時,請使用此版面。

使用​ 面板最適化表單 ​元件,在面板內提供逐步導覽。 使用此版面配置時,使用者只會在目前步驟完成後才移至下一個步驟

window.guideBridge.validate([], this.panel.navigationContext.currentItem.somExpression)

使用精靈配置的表單

折疊式面板 layout-for-accordion-design

使用此版面,您可以將​ 面板最適化表單 ​元件放在具有摺疊式功能表樣式導覽的面板中。 使用此版面,您也可以建立可重複的面板。 可重複面板可讓您視需要動態新增或移除面板。 您可以定義面板重複的最小和最大次數。 此外,面板的標題可以根據面板專案中提供的資訊動態決定。

摘要運算式可用來顯示使用者在最小化面板標題中提供的值。

在最適化Forms中使用摺疊式佈局的 可重複面板

索引標籤版面配置 — 索引標籤顯示在左側 tabbed-layout-tabs-appear-on-the-left

使用此版面,您可以將​ 面板最適化表單 ​元件放置在具有索引標籤導覽的面板中。 標籤會放置在面板內容的左側。

在索引標籤版面配置中,索引標籤會出現在左側

出現在面板左側的索引標籤

索引標籤版面配置 — 索引標籤出現在頂端 tabbed-layout-tabs-appear-on-the-top

使用此版面,您可以將​ 面板最適化表單 ​元件放置在具有索引標籤導覽的面板中。 索引標籤會放置在面板內容的頂端。

最適化Forms中的 索引標籤版面,索引標籤在頂端

行動版面配置 mobile-layouts

行動版面配置可在熒幕較小之行動裝置上進行方便好用的導覽。 行動版面配置會使用索引標籤或精靈樣式來進行表單導覽。 套用行動版面配置可為整個表單提供單一版面配置。

此版面配置會使用導覽列和導覽功能表來控制導覽。 導覽列顯示​ < ​和​ > ​圖示,以表示表單中的​ 下一個 ​和​ 上一個 ​導覽步驟。

行動版面配置可在/libs/fd/af/layouts/mobile/位置取得。 下列行動版面預設可在Adaptive Forms中使用。

最適化Forms中的行動版面配置清單

選取​ 將回應式版面的可導覽專案新增至行動功能表 ​選項,以檢視適用於行動版面中面板的可導覽選項。 只有在您為面板選取​ Responsive ​配置時,才能看到可導覽選項。

使用行動版面配置時,點選 aem6forms_form_menu 圖示即可使用表單功能表來存取各種表單面板。

在表單標題中配置面板標題 layout-with-panel-titles-in-the-form-header

如名稱所建議,此版面會顯示面板標題以及導覽功能表和導覽列。 此版面配置也提供用於導覽的「下一個」和「上一個」圖示。

表單標題中含有面板標題的行動版面配置

在表單標題中配置不含面板標題 layout-without-panel-titles-in-the-form-header

如名稱所建議,此版面只會顯示導覽功能表與導覽列,而不會顯示面板標題。 此版面配置也提供用於導覽的「下一個」和「上一個」圖示。

表單標題中沒有面板標題的行動版面配置

另請參閱 see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab