Skip to main content

自訂頁面介紹

路徑：【後台管理】⇒【應用管理】⇒【應用】⇒【自訂頁面】

【自訂頁面】 是在應用中用於整合應用內所有資訊的功能模組。

在應用中，自訂頁面可以將表單列表數據、儀錶板圖表或是快捷按鈕等元素，整合成一個應用內的工作台。

1. 新增自訂頁面​

在 【應用管理】 中開啟應用後，點選左側選單下方的 『新增』 按鈕，並點選 『自訂頁面』，即可新增一個自訂頁面。

點選『自訂頁面』

點選『自訂頁面』

輸入【自訂頁面】基本資訊

輸入【自訂頁面】基本資訊

  • 名稱：自訂頁面在應用選單中顯示的名稱，設定後仍可依據需求修改。
  • 編號：用於首頁之間的唯一性辨識，以字母開頭，僅支援字母、數字、底線，設定後不可再修正。
  • 分組：應用內資料夾分組，預設為應用內的根資料夾。
  • 頁面類型：可選擇網頁版、手機版，獨立設定以符合使用者體驗，設定後不可再修正。
  • 備註說明：自訂頁面補充說明。
  • 圖示：顯示在前台應用選單的圖示。

完成基本資訊填寫後，即可進入自訂頁面的編輯畫面，開始設計頁面版面。

2. 頁面設計介面​

自訂頁面的編輯畫面與 【後台管理】⇒【首頁管理】 的首頁設計器幾乎相同，同樣採用「左側挑元件、中間排版面、右側調屬性」的操作邏輯。熟悉首頁管理的管理員，可以直接沿用相同的設計思維來建置自訂頁面。

整個編輯畫面可分為四個區域：

  • 頂部工具列：左側顯示自訂頁面名稱與發布狀態；中間可切換 【畫布】、【JS動作】、【CSS 樣式】 三種編輯模式；右側提供 『預覽』、『儲存』 與 『發布』。
  • 元件選擇區（左側）：依用途分類的元件清單，將元件拖曳至畫布即可加入頁面。
  • 畫布（中央）：頁面版面的編輯區，可在此調整元件的位置與大小。右上角提供 自適應 與 實際大小 兩種畫布縮放檢視方式。
  • 屬性設定區（右側）：分為 ［元件屬性］ 與 ［頁面屬性］ 兩個頁籤。點選畫布上的元件後，［元件屬性］ 會顯示該元件的設定項目；若未選取任何元件，則顯示「請在畫布選擇元件」。

自訂頁面編輯畫面

自訂頁面編輯畫面

3. 版面設計​

📌 加入與調整元件​

自訂頁面的版面是由一個個 元件 組合而成，設計流程如下：

  1. 從左側 ［元件選擇區］ 將需要的元件 拖曳 到中央畫布。
  2. 點選畫布上的元件，於右側 ［元件屬性］ 調整該元件的設定與樣式。
  3. 直接在畫布上拖曳元件，調整其擺放位置與大小，完成版面配置。

將元件拖曳至畫布並調整版面

將元件拖曳至畫布並調整版面

📌 元件分類​

自訂頁面提供的元件與 【首頁管理】 網頁版設計完全相同，依用途分為 基礎元件、業務元件、佈局元件、導覽列元件 四大類：

元件分類具體元件
基礎元件文字、按鈕、多頁籤文字列表、輪播圖、圖表、文字列表
業務元件模型列表、我的待辦、我的常用、最近使用
佈局元件網頁嵌入、分隔線、容器、頁籤
導覽列元件樹形、橫向導覽列、縱向導覽列、宮格導覽列

各元件的適用情境、專屬設定，以及 背景樣式、邊框樣式、文字樣式、標題設定 等共通屬性，設定方式皆與首頁管理一致，詳細說明請參閱 首頁元件 與 首頁管理介紹 章節。

tip

上表為 頁面類型為網頁版 時提供的元件。若自訂頁面在新增時選擇 手機版，元件清單會依行動裝置的版面需求調整，規則可參考 ［首頁元件］ 一文中的手機版說明。

📌 頁面背景​

在右側切換到 ［頁面屬性］ 頁籤，即可設定整個自訂頁面的底層外觀。

  • 背景顏色：設定頁面的底色，預設為 #f6f7f9。
  • 背景圖片：上傳圖片作為整個頁面的背景。
info

這是自訂頁面與首頁管理的主要差異之一：首頁管理的 ［首頁屬性］ 另外包含 【權限設定】 與 【主導覽列設定】；而自訂頁面的 ［頁面屬性］ 僅提供頁面背景設定，因為自訂頁面本身即隸屬於應用之下，透過應用的選單與權限機制呈現給使用者。

4. JS 動作與 CSS 樣式​

除了以拖曳方式完成版面設計外，自訂頁面另外提供 【JS動作】 與 【CSS 樣式】 兩個程式碼編輯區，供有進階需求的管理員自訂頁面的行為與外觀。

📌 JS 動作​

切換到 【JS動作】 頁籤，系統會提供一段預設的程式碼範本：

/**
 * 使用者自訂JS區域，會在頁面事件載入完成時呼叫
 * 自訂事件需要寫在 onPageEnter 方法中
 * 請不要刪除 onPageEnter 方法，否則自訂事件不會執行
 * */
function onPageEnter() {

}
  • 自訂的 JS 程式碼會在 頁面元件載入完成時 被呼叫。
  • 所有自訂事件都必須寫在 onPageEnter() 方法中。
  • 請勿刪除 onPageEnter() 方法，否則自訂事件將不會執行。

JS動作編輯區

JS動作編輯區

📌 CSS 樣式​

切換到 【CSS 樣式】 頁籤，可自行撰寫樣式來微調頁面與元件的外觀：

  • 在此區域撰寫的樣式，系統會自動在樣式選擇器前面新增 .ui-page，避免影響到系統其他畫面。
  • 頁面層級 的樣式，可使用 頁面 ID 作為選擇器（例如自訂頁面 ID 為 defaultPortalDashboard）。
  • 元件層級 的樣式，可使用 元件 ID 作為選擇器（例如 ［我的待辦］ 元件 ID 為 MyUnfinished1）。元件 ID 會顯示在右側 ［元件屬性］ 面板的最上方。

CSS 樣式編輯區

CSS 樣式編輯區

5. 預覽、儲存與發布​

自訂頁面採用「先儲存、後發布」的機制，設計過程中的異動不會立即影響前台使用者。

  • 『預覽』（眼睛圖示）：在正式發布前，先確認頁面的實際呈現效果。
  • 『儲存』：保存目前的設計內容，但尚未套用到前台。
  • 『發布』：將設計正式套用到前台，使用者才會看到最新的頁面內容。

頁面的發布狀態會顯示在工具列上，方便管理員隨時掌握：

  • 頁面名稱旁的 ［未發布］：表示此自訂頁面尚未發布過。
  • 工具列中央的 「頁面有內容未發布」：表示目前的設計內容已有異動，但尚未發布到前台。

預覽、儲存與發布

預覽、儲存與發布

warning

完成設計並儲存後，務必再點選 『發布』，前台的使用者才會看到更新後的自訂頁面。