最適化表格

使用表格是呈現複雜資料的有效、簡化且有組織的方式。 它幫助用戶輕鬆地識別資訊並以行和列的有序排列提供輸入。 金融服務和政府機構的大多數表格都需要大型資料表，才能填入數字並執行計算。

AEM Forms在元件瀏覽器的邊欄中提供「表格」元件，可讓您在最適化表格中建立表格。 它提供的一些關鍵功能包括：

• 行動裝置上的互動式版面
• 可配置的行和列
• 在執行時期動態新增和刪除列
• 合併或合併及分割儲存格
• 螢幕閱讀程式可存取
• 使用CSS自訂版面
• 與XDP表元件相容並映射
• 支援使用XSD複雜類型元素新增列或儲存格
• 從XML檔案合併資料

建立表

若要建立表格，請從最適化表單的sidekick中，從元件瀏覽器拖放表格元件。 依預設，表格包含兩欄和三列，包括標題列。

關於標題和內文儲存格

標題儲存格是文字欄位。 要更改標題的標籤，請按一下右鍵標題單元格，然後按一下​編輯。 在「編輯」對話框中，更新​Value​欄位中的標籤，然後按一下「確定」。​

依預設，內文儲存格是文字方塊。 您可以使用sidekick中可用的任何其他最適化表單元件來取代主體儲存格，例如數值方塊、日期選擇器或下拉式清單。

例如，下表中的第一個內文列包含文字方塊、日期選擇器和下拉式清單元件做為儲存格。

通過選擇要合併的單元格，按一下右鍵並選擇​合併，可以合併兩個或更多主體單元格。 此外，您也可以通過按一下右鍵合併的單元格並選擇「拆分單元格」來拆分合併的單元格。

添加、刪除、移動行和列

您可以新增和刪除行或列，以及在表格中上下移動行。

要添加或刪除行或列或移動行，請按一下行或列中的任何單元格。 下拉式功能表會出現在欄的頂端和列的左側。 頂部的菜單提供添加或刪除列的選項，而左側的菜單允許添加、刪除或移動行。

• 「添加」操作將在選定行或列的右側添加一行或列。
• 「刪除」操作將刪除選定的行或列。
• 「上移和下移」操作將上移和下移選定行。

行的下拉菜單還提供了「編輯」操作，以編輯行屬性、設定和樣式選項。

添加表說明

您可以新增表格說明如何組織資訊，讓螢幕閱讀程式解譯及讀出。 要添加說明：

1. 選擇表並點選以在側欄中查看其屬性。
2. 在「協助工具」標籤中指定摘要。
3. 按一下​Done。

對表中的列進行排序

您可以根據表格中任何欄在最適化表單中排序資料。 列中的值可以按升序或降序排序。

排序可套用至包含：

• 靜態文字
• 資料模型對象屬性
• 靜態文字與資料模型物件屬性的組合

要對表列應用排序，表列單元格必須包含以下任何元件：數值方塊、數值步進器、日期輸入欄位、日期選擇器、文字或文字方塊。

要啟用排序：

1. 選取表格並點選（設定）。 您也可以使用「互動式通訊」的側鍵中的​Content​瀏覽器來選取表格。

2. 選擇​啟用排序。

3. 點選以儲存表格屬性。 欄標題中的排序圖示（向上和向下箭頭）表示已啟用排序。

   

4. 切換至​預覽​模式以檢視輸出。 表格會根據表格的第一欄自動排序。

5. 按一下欄標題，以根據欄排序值。

   帶有向上箭頭的列標題表示表基於該列進行排序。 此外，欄中的值會以升序顯示。

   

   同樣地，帶有向下箭頭的列標題表示列中的值以降序顯示。

   您也可以在​預覽​模式的表格中進行變更，然後再按一下欄標題以排序欄值。

設定表的列寬

執行以下步驟以設定表的列寬：

1. 在​Content​標籤中，點選​Table​元件並點選「設定」()圖示。

2. 在​欄寬​欄位中輸入值的逗號分隔清單，以指定表格中各欄的比例寬度。 例如，對於包含3列的表，在​列寬​欄位中指定2,4,6作為值會導致將列寬度設定為第一列的2/12、第二列的4/12和第三列的6/12。 「2/12」：第一列的寬度是指表寬度的六分之一。 同樣地，4/12將第二列寬度設定為表寬度的三分之一，6/12將第三列寬度設定為表寬度的一半。

配置表樣式

可使用頁面工具欄中的「樣式」(Style)模式定義表的樣式。 執行以下步驟以切換到樣式模式並編輯表樣式

1. 在頁面工具列的「預覽」之前，點選「 > Style」。

2. 在側欄選擇表格中，點選編輯按鈕。
   您可以在側欄中看到樣式屬性。

動態地添加或刪除行

表格提供立即可用的支援，可在執行時期動態新增或刪除列。

1. 選取表格列，然後點選。
2. 在「重複設定」索引標籤中，指定表格中限制列數的最小和最大計數。
3. 按一下​Done。

在執行時期，您會看到​+​和​-​按鈕，以新增或刪除列。

表中的表達式

使用最適化表單的表格，您可以在JavaScript中編寫運算式來引發行為，例如顯示或隱藏表格或列、加總所有數字並顯示儲存格中的總數、啟用或停用儲存格、驗證使用者輸入等。 這些運算式使用最適化表單指令碼模型API。

雖然表和行僅支援可見性表達式，以便根據表達式返回的值控制其可見性，但單元格支援以下表達式：

• 初始化腳 本：對欄位的初始化執行操作。
• 值提交腳 本：在更改欄位值後更改表單的元件。

• 計算表達式:自動計算欄位的值。
• 驗證運算式:來驗證欄位。
• 存取運算式:啟用／停用欄位。
• 可見度運算式:以控制欄位和面板的可見度。

表或行的可見性表達式可在其對應的「編輯」元件對話框的「面板屬性」(Panel properties)頁籤中定義。 儲存格的運算式可在其「編輯」元件對話方塊的「指令碼」索引標籤中定義。

如需最適化表單類別、事件、物件和公用API的完整清單，請參閱最適化表單的JavaScript程式庫API參考。

行動版面

自適應表單的表格提供無與倫比的體驗行動裝置，因為它的版面流暢且回應速度快。 AEM Forms為表格提供兩種行動版面——左側的標題和可收合的欄。

您可以從表格的「編輯」元件對話方塊的「樣式」索引標籤，為表格設定行動版面。

左側的標題

在左側版面的「標題」中，表格中的標題會在左側轉置，只有一個儲存格會出現在標題上。 此版面中的每一行都會以不同區段顯示。 以下影像會比較桌上型電腦和行動裝置上的表格。

左側版面具有標題的表格案頭檢視

左側版面具有標題的表格的行動檢視

可收合的欄版面

在「可折疊」欄版面中，表格中的欄會收合，以顯示一或兩欄（視裝置大小而定），而其他欄則會收合。 可以按一下折疊／展開表徵圖來查看表格中的其他列。

以下影像會比較表格在具有收合和展開欄的裝置上的外觀。

表格的收合欄，行動裝置上只顯示兩欄

行動裝置上表格的擴充欄

合併表中的資料

使用可調式表單中的表格，您可以在執行時期使用XML檔案的資料填入表格。 資料XML檔案可以駐留在執行AEM Forms伺服器的機器的本機檔案系統或CRX儲存庫中。

讓我們舉下列銀行交易摘要表為例，其中我們要填入XML檔案中的資料。

在此示例中，Element name屬性用於：

• 行是​行1
• 事務處理日期下的主體單元格為​tableItem1
• 「說明」(Description)下的body儲存格為​tableItem2
• 事務類型下的主體單元格為​type
• 以USD表示的body儲存格為​tableItem3

包含下列格式資料的XML檔案：

<?xml version="1.0" encoding="UTF-8"?><afData>
  <afUnboundData>
    <data>
 <typeSelect>0</typeSelect>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Purchase laptop</tableItem2>
      <type>0</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Transport expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-01-08</tableItem1>
      <tableItem2>Laser printer</tableItem2>
      <type>0</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2014-12-08</tableItem1>
      <tableItem2>Credit card payment</tableItem2>
      <type>0</type>
      <tableItem3>300</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-06</tableItem1>
      <tableItem2>Interest earnings</tableItem2>
      <type>1</type>
      <tableItem3>12000</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-05</tableItem1>
      <tableItem2>Payment from a client</tableItem2>
      <type>1</type>
      <tableItem3>500</tableItem3>
 </Row1>
 <Row1>
      <tableItem1>2015-01-08</tableItem1>
      <tableItem2>Food expense</tableItem2>
      <type>0</type>
      <tableItem3>120</tableItem3>
 </Row1>
 </data>
  </afUnboundData>
  <afBoundData>
    <data/>
  </afBoundData>
  <afBoundData/>
</afData>

在示例XML中，行的資料由<Row1>標籤定義，該標籤是表中行的元素名稱。 在<Row1>標籤中，每個儲存格的資料會在標籤中定義其元素名稱，例如<tableItem1>、<tableItem2>、<tableItem3>和<type>。

要在運行時將這些資料與表合併，我們需要將包含表的自適應表單指向禁用wcmmode的絕對XML位置。 例如，如果最適化表單位於​https://localhost:4502/myForms/bankTransaction.html，而資料XML檔案儲存於​C:/myTransactions/bankSummary.xml，則您可以在下列URL中檢視含有資料的表格：

https://localhost:4502/myForms/bankTransaction.html?dataRef=file:/// C:/myTransactions/bankSummary.xml&wcmmode=disabled

使用XDP元件和XSD複雜類型

如果您根據XFA表單範本建立最適化表單，XFA元素可在AEM Content Finder的「資料模型」索引標籤中使用。 您可以以最適化形式拖放這些XFA元素，包括表格。

XFA表元素會映射至Table元件，並在最適化表單中立即使用。 XDP表的所有屬性和功能在移動到自適應表單時都會保留，而且您可以像使用本地自適應表單表一樣對其執行任何操作。 例如，如果XDP表中的行被標籤為可重複，則在自適應表單中刪除時也會重複該行。

此外，還可以拖放XDP子表單，在表中添加新行。 不過，請注意，刪除巢狀子表單並不有效。

此外，您還可以拖放一組XSD複雜類型元素以建立表格列。 在您放置元素的列正下方建立新列。 使用XSD複雜類型元素建立的儲存格會維護XSD的系結參考。 您也可以將元素拖放至儲存格，以XSD複雜類型元素取代主體儲存格。

主要考量事項

• 如果您在製作以XSD為基礎的表格時上下移動列，表格列中會出現一些資料遺失的情況，會顯示在提交表格時產生的資料XML中。

• 預設表中的每個主體單元格都具有與其相關聯的預定義元素名稱。 如果在最適化表單中添加另一個表，則新表中的預設主體單元格將具有與第一個表中相同的元素名稱。 在這種情況下，提交表單時產生的資料將僅包含其中一個表格的預設內文儲存格中的資料。 因此，請確保更名預設主體單元格的元素名稱，以使它們在各表中保持唯一，並避免資料丟失。

  請注意，這僅適用於預設的內文儲存格。 如果向表中添加更多行或列，將自動為非預設主體單元格生成唯一的元素名稱。