行動端入門

1. 我們平時會遇到製作了 PC 端報表，想在行動端展示的場景，PC 端報表在特定場景下可以透過設定 行動端屬性 實現與行動端共用範本，但在某些場景下是不適合轉換成行動端報表的，譬如：

   ① PC 端決策報表用到的組件/絕對畫布塊的寬度大於手機熒幕（一般寬度是375像素）；

   ②普通報表只能被整體縮放，不一定能完美適配行動端熒幕；

   ③ PC 端報表設定了一些儲存格屬性、超連結中的部分功能點時，行動端不支援，具體行動端不支援的功能點請參考 行動端不支援的功能點。

注：複合式報表不支援行動端。

1

普通報表。

1. 點選【%FR_HOME%\webroot\WEB-INF\reportlets\GettingStartedTW.cpt】，打開已經製作好的一張PC端範本。

2. 點選【範本】→【行動端屬性】，在範本設定中勾選【設定為手機範本畫布大小】，在【自我調整】中勾選【雙向自動調整】，點選【確定】，會另存為一份後綴名帶有【_mobile】的 cpt 檔案，點選【儲存】。如下圖1、2所示。

3. 點選【預覽】，選擇【行動端預覽】，彈出一個帶有QRCODE的頁面，使用行動裝置掃描QRCODE，即可查看這張行動端普通報表。如下圖3、4所示。

4. 行動端預覽效果如下圖5所示。

註：設定了行動端屬性後，會將範本設定適配手機範本的畫布大小，因此，在行動端預覽時，可能會發生資料擴展後超過了手機畫布大小，在行動端分頁展示的情況。

2

決策報表。

1. 轉換成行動端範本的設定方式同 cpt 檔，將已經製作好的 PC 端決策報表透過設定行動端屬性進行轉換，報表塊、組件等會重新佈局，轉換成功後，即可在行動端預覽。效果如下圖所示。

1

普通報表。

1. 報表擴展後資料較多時不建議直接轉換。因為cpt 檔設定了行動端屬性後，會將範本設定適配手機的畫布大小，因此，在行動端預覽時，可能會發生資料擴展後超過了手機畫布大小，在行動端分頁展示的情況。

2. 一般不推薦使用 cpt 來設計 PC 和行動端共用且組件較多的報表，cpt 只能被整體的縮放，組件過多的表格無法同時適配於 PC 和行動端的螢幕。

3. 如果是想把 PC 端已經設計好的報表移植到手機上來查看，需要注意以下問題：

   ①如果不想對範本本身做調整，可以設定表頭凍結顯示、豎屏縱向自我調整，透過左右滑動來查看。

   ②對於所有欄是同一維度的資料，比如是時間維度，一年 12 個月，可以採用橫屏查看，或者減少列數，或者可以設定表頭凍結顯示、 豎屏縱向自我調整，透過左右滑動來查看。

   ③對於不同的欄是不同維度的資料，是對“地區”、“供應商”、“僱員”三個維度的分析，可以採用 App 介面的設計思路，將分析維度與表格主體拆分開來，透過點選不同維度名稱查看不同維度的資料。

2

決策報表。

1. 轉換為行動端報表時，可能會因為組件/絕對畫布塊過大（寬度大於手機熒幕）、用到部分行動端不支援的功能點等，導緻行動端預覽顯示不正常。譬如：PC 端預覽效果如下圖1所示，設定完行動端屬性後，行動端預覽效果如下圖2所示。

註：顯示不正常是因為組件/絕對畫布塊的寬度大於手機熒幕（一般寬度是375像素），在行動端進行了縮放，適配了熒幕的寬度，組件/絕對畫布塊會按比例縮放，導緻高度變矮，顯示不全。

1. 在 PC 端和行動端不適合共用範本時，需要重新製作行動端範本。

1

普通報表。

製作一張行動端普通報表，詳細步驟參考 第一張行動端普通報表。

2

決策報表。

製作一張行動端決策報表，詳細步驟參考 第一張行動端大屏。

3

填報表。

製作一張行動端填報表，詳細步驟參考 第一張行動端填報表。

1

普通報表。

1. 打開一張 PC 端報表，譬如本文上述範例用到的 GettingStartedTW.cpt，點選【行動端預覽】，效果如下圖所示。

註：cpt 檔直接行動端預覽，僅進行報表的縮放，不會適配手機的熒幕進行展示，譬如本例，資料集中在熒幕上方，並未進行橫向、縱向的自我調整。

2

決策報表。

1. 打開一張 PC 端決策報表，點選【行動端預覽】，效果如下圖1所示。

註：frm 檔直接行動端預覽，仍會進行手機重佈局，進而在行動端進行展示，適配問題也會因為組件/絕對畫布快大小而不同，重佈局設定後的相關組件排序，可以在範本的【行動設備】屬性下查看，如下圖2所示。