框架排版（FrameBlock）

框架排版，英文為 FrameBlock，是一種可容納多個控制項的容器，能夠有效組織與管理畫面中的元件，使版面配置更具彈性與結構性。

此章節包含主題:

適用時機

框架排版（FrameBlock）是一種用來容納多個控制項的容器，適用於需要組織相關元件、提升版面彈性與統一設計風格的情境。透過 框架排版，可以讓介面開發更具模組化與可維護性。

範例-框架排版（FrameBlock）

框架排版（FrameBlock）容器元件在儀表板 Dashboard 中無需設定資料來源，本範例僅示範如何在 DW（Data Warehouse）環境中應用框架排版容器。

可以按照以下步驟進行操作：

1. 新增頁面，可右鍵點選專案資料夾，或點選工具列上的「新增儀表板」選項，來新增頁面。



2. 可以在「標題」輸入框命名想要讓 user 看到的頁面名稱或是標題想要顯示的名稱，我們這邊顯示名稱命名:框架排版（FrameBlock），設定好點選右下角的「確定」。



接下來會跳到新增版面的設定畫面，可以選擇「空白版面」、「框架」，我們這邊選擇「空白版面」的版面，往下設計。



3. 此時可以選擇想要連結的資料來源，目前此範例是以 Data Warehouse 為資料來源，選擇設計好的 Data Warehouse 「InsurerDW」，點選右下角的「確定」。資料來源建置方式可以參考如何建置資料倉儲（Excel)



4. 雖然框架排版容器無需綁定資料，但我們仍可在容器中加入其他視覺化元件進行呈現。因此，請在左側的控制項清單中，選取「統計圖庫」下的「直條圖」控制項，並先設計直條圖的控制元件。



5. 請從 DW 資料來源中，將所需的量值與維度拖曳到 X 軸、Y 軸或資料欄位中。設定完成，並請點選左上角的「完成」。



6. 此時，畫面左手邊的控制項清單中找到「框架排版」容器元件，可以透過點選拖拉的方式，拖拉到中間的設計版面中。



7. 請點選剛新增的 直條圖視覺化元件，然後拖曳至 框架排版容器 中。此時，直條圖元件將顯示於框架排版容器內，如下圖所示。



8. 調整與設定建議

若需微調 直條圖的視覺化效果 或 框架排版容器的設定，但發現調整不易時，可點選 左上角的「大綱」頁籤，並選取欲調整的元件。此時，畫面上的元件四周會顯示 白色調整點，您可以拖曳這些調整點來變更 大小與位置，使其符合版面需求。完成後，請點選左上角的 「存檔」 並 「預覽」 以查看效果。



9. 執行與預覽畫面

執行後，畫面僅會顯示 視覺化元件，而 框架排版容器的虛線框 不會顯示。



10. 返回設計畫面時，仍可在版面上看到 框架排版容器的框線，並繼續拖曳其他視覺化元件至框架內。完成擺放後，再次點選 「存檔」 與 「預覽」，即可查看最終設計效果。



補充：刪除框架排版容器

在設計時，當滑鼠移至 框架排版容器 上時，右上角會顯示 「X」刪除按鈕。點選該按鈕後，將會刪除 選取的框架虛線。



並自動調整周圍的版面配置，使原本位於框架內的 視覺化元件顯示範圍更大，以優化畫面呈現。

版面

• 在該屬性中，主要提供設定元件的外型大小呈現。相關設定可參閱屬性中「版面」文件說明。

外觀

• 在該屬性中，主要提供設定元件的呈現方式。相關設定可參閱屬性中「外觀」文件說明。

• 橫向捲軸：啟用後，當表格內容超過容器的寬度時，會顯示橫向捲軸，讓使用者可以左右滾動查看所有內容。

• 縱向捲軸：啟用後，當表格內容超過容器的高度時，會顯示縱向捲軸，讓使用者可以上下滾動查看所有內容。