可視化編排頁面
頁面編排用于通過低代碼可視化方式搭建前端頁面，并通過邏輯編排、JS方法實現(xiàn)和用戶行為的交互。本文介紹如何新建、編排和管理頁面。
前提條件
當前應(yīng)用為輕應(yīng)用。
當前應(yīng)用處于開發(fā)版本，尚未發(fā)布。
當前賬號具有應(yīng)用開發(fā)權(quán)限。
可視化編排頁面
在頁面編排頁面，單擊目標頁面名稱或目標頁面名稱右側(cè)操作列下的編排頁面。
可選：在新打開的編排頁面畫布左上角，單擊
圖標，在頁面名稱下拉列表中，您可以選擇目標頁面。
說明您可以在頁面名稱的搜索文本框中輸入頁面名稱或編碼，單擊
圖標進行模糊查詢。您可以在下拉列表中新增頁面，新增完成后，頁面仍然停留在當前頁面。
切換頁面時，如果頁面做過修改，您需要先保存當前頁面后，再選擇新頁面。
在編排頁面畫布中，單擊畫布左側(cè)的
圖標，您可查看頁面內(nèi)各組件之間的層級關(guān)系。
如果您在創(chuàng)建輕應(yīng)用時應(yīng)用場景配置為PC端+H5端，您可以單擊
或
圖標切換端側(cè)。
說明本文以僅應(yīng)用場景配置為PC端為例說明如何編排頁面。
在編排頁面畫布中，單擊畫布左側(cè)的
圖標，在標準組件或自定義組件頁簽下，您可以拖拽目標組件至畫布右側(cè)然后進行頁面編排。
在組件面板區(qū)域，包括以下兩類組件。具體如下表所示：
組件面板
說明
標準組件
布局：布局容器、容器、選項卡、卡片、徽標數(shù)、自由節(jié)點。
基礎(chǔ)：表格、列表、視頻播放、文本、按鈕、彈窗、抽屜、圖片、按鈕組、鏈接、鏈接塊、圖標、分隔符。
表單（輸入組件）：拖拽上傳、表單容器、文本輸入框、下拉單選、下拉多選、數(shù)字輸入框、數(shù)字范圍、開關(guān)、日期、時間選擇、日期范圍、單選、多選、平鋪明細、表格明細、文件上傳、富文本輸入框、級聯(lián)單選、評分、級聯(lián)多選、滑塊、標簽。
高級：Iframe、氣泡提示、步驟、時間軸、搜索、折疊面板、面包屑、進度指示器、底部通欄、輪播、樹形控件、JSX。
圖表：折線圖、柱形圖、餅圖、漏斗圖、條形圖、儀表盤、面積圖、雷達圖、環(huán)形圖、水波圖、詞云。
說明您可以單擊組件分組標題（例如：布局）右側(cè)的
圖標，查看相應(yīng)組件分組的說明文檔。平臺支持直接將平鋪明細、表格明細拖至畫布右側(cè)，無需放在表單容器中。
自定義組件
如果在組件面板，沒有自定義組件頁簽，您可以單擊
圖標，頁面自動跳轉(zhuǎn)至自定義組件頁面。
關(guān)于如何新增自定義組件，請參見開發(fā)和管理自定義組件。如果自定義組件頁簽下已有自定義組件，您可以拖拽目標自定義組件至畫布右側(cè)，進行邏輯編排。
說明本文以將輸入組件數(shù)字輸入框拖拽至表單容器內(nèi)的場景為例，介紹如何編排頁面。
在標準組件的表單組件區(qū)域，拖拽表單容器組件至畫布右側(cè)。
在配置表單對話框中，您可以參考下圖配置表單。本文以您直接單擊跳過為例說明，介紹如何編排頁面。
說明拖拽表單容器和表格組件至畫布右側(cè)時，界面都會彈出配置表單或配置表格對話框，您可以選擇單擊跳過，也可以選擇完成表單或表格配置。
在標準組件的表單組件區(qū)域：
如果您拖拽輸入組件至表單容器內(nèi)，則還需要設(shè)置對象字段。
如果您拖拽輸入組件至表單容器外，則還需要設(shè)置綁定變量。
您也可以右鍵表單容器，在選項列表選擇目標操作（例如：克隆、刪除、添加父容器、選中父組件和選中子組件）
設(shè)置組件屬性、樣式和事件。
組件屬性設(shè)置支持使用公式表達式。單擊
圖標，在綁定變量對話框完成相關(guān)設(shè)置。
在事件頁簽下，新建動作。新建動作的具體操作如下：
單擊新建動作。
選擇您需要新建的目標動作，例如onChange值發(fā)生變化。
在onChange值發(fā)生變化對話框中，您可以選擇頁面JS（如下圖：支持添加新動作和helloPage），完成后單擊確定。
您可以選擇全局JS，完成選擇目標全局JS后，單擊確定。
說明全局JS可以在當前應(yīng)用的所有頁面以及導航框架中使用。
您可以選擇邏輯編排，頁面會自動跳轉(zhuǎn)至邏輯流面板頁面，在該頁面您可以根據(jù)具體需要進行邏輯編排。具體操作，請參見編排邏輯流。
您可以單擊
圖標，頁面會跳轉(zhuǎn)至編排畫布且定位至對應(yīng)組件，畫布右側(cè)默認顯示事件頁簽的內(nèi)容。
創(chuàng)建模板組件。
單擊目標組件右側(cè)的
圖標。
在創(chuàng)建模板組件對話框中，設(shè)置名稱、編碼和描述（可選填）。
單擊確定。
說明在同一應(yīng)用的同一版本內(nèi)的不同頁面都可以使用同一模板組件。
模板組件一旦創(chuàng)建后就不支持修改，如果您需要修改，請您刪除后再重新創(chuàng)建目標模板組件。
您可以對拖入至頁面編排畫布中的模板組件按需做修改，而不會改變原模板組件。
如果要創(chuàng)建復雜的模板組件（包含多個組件），您可以將多個基礎(chǔ)組件拖到一個容器組件中，然后將容器組件創(chuàng)建為模板組件，即該模板組件中將包括其自身以及其內(nèi)部的其他子組件，而不是在設(shè)計器中選中多個組件再創(chuàng)建。
界面提示創(chuàng)建模板成功。在區(qū)塊面板區(qū)域，您可以查看所創(chuàng)建的模板組件。
單擊畫布左側(cè)的
圖標。在變量面板區(qū)域，您可以看到所創(chuàng)建的頁面變量和頁面入?yún)?/b>，您也可以單擊新增，后續(xù)操作，您可以參考以下步驟。
如果在新增下拉列表中，選擇變量。
在新增變量對話框中，設(shè)置變量名稱、變量類型、描述（可選填）、分類和示例值（可選填）。
說明新增變量時支持新增頁面變量和頁面入?yún)?/b>。
單擊保存。
可選：單擊目標頁面變量右側(cè)
圖標、
圖標或
圖標，編輯、復制或刪除變量。
可選：單擊目標變量，在變量管理區(qū)域下側(cè)，查看變量信息。
如果變量的變量類型為集合類型或對象類型，您可以單擊詳情，在詳情對話框中，查看變量的詳細信息。
如果在新增下拉列表中，選擇服務(wù)調(diào)用。
在新增服務(wù)調(diào)用對話框中，設(shè)置名稱和描述（可選填），選擇調(diào)用方式。如果您選擇服務(wù)編排調(diào)用方式，則還需選擇服務(wù)方法，您也可以選擇設(shè)置示例值（可選填），完成后單擊保存。
如果您選擇頁面內(nèi)服務(wù)調(diào)用的調(diào)用方式，則還需選擇數(shù)據(jù)源（如果沒有可選項，您可以新增服務(wù)調(diào)用），完成相關(guān)配置項設(shè)置后，單擊保存。
編排邏輯流。單擊畫布左側(cè)的
圖標。
說明畫布中已經(jīng)默認添加好開始節(jié)點（例如：點擊時、請求表格數(shù)據(jù)等）和結(jié)束節(jié)點。
如果您沒有創(chuàng)建過流程實例，頁面會提示您暫無邏輯編排。關(guān)于如何創(chuàng)建邏輯編排，請參見創(chuàng)建邏輯編排。
如果您已經(jīng)新建過動作，則在畫布右側(cè)的流程圖中單擊
圖標。在彈出的編排節(jié)點框中，選擇目標編排節(jié)點進行邏輯編排，完成后單擊保存。
關(guān)于節(jié)點的更多信息，請參見頁面編排設(shè)計器內(nèi)節(jié)點說明。
說明以下枚舉的配置項都支持新增變量：
變量賦值節(jié)點的變量賦值。
調(diào)用后端服務(wù)節(jié)點的入?yún)①x值和結(jié)果輸出（出參）。
打開頁面節(jié)點的頁面入?yún)ⅰ?/p>
遍歷循環(huán)節(jié)點的集合變量。
可選：完成邏輯編排后，您可以進行如下操作。
單擊畫布左側(cè)的
圖標。在畫布左側(cè)彈出的動作面板，根據(jù)您的需求進行參數(shù)設(shè)置。
單擊畫布左側(cè)的
圖標。在畫布左側(cè)彈出的CSS面板，根據(jù)您的需求配置頁面CSS樣式。
可選：您可以單擊畫布右上角的預覽設(shè)置和應(yīng)用預覽，預覽應(yīng)用。
單擊預覽設(shè)置，在預覽設(shè)置對話框中，選擇預覽環(huán)境名稱，且聯(lián)系您的域名管理員配置DNS解析記錄，完成后單擊保存。
說明預覽環(huán)境名稱下拉列表中支持的選項為：已完成當前輕應(yīng)用及其依賴業(yè)務(wù)域在該環(huán)境的部署。
沒有添加DNS解析記錄時，可先用配置本機Host文件的方式訪問。
單擊應(yīng)用預覽。
您可以單擊前往預覽應(yīng)用，查看預覽頁面。
如果界面報錯，請您根據(jù)相應(yīng)報錯提示操作后，再重新預覽應(yīng)用。
完成邏輯編排后，單擊畫布右上角的保存。
您也可以回滾歷史服務(wù)編排版本。單擊畫布右上角
圖標，選擇目標歷史版本后，單擊回滾（如果無需回滾，單擊返回編輯即可）。