嘿夥計們，新年快樂！

?
我知道你們中的一些人想知道過去幾個月我去了哪裡。通過雲(yún)端架構師考試後，我決定深入研究這個大家都在談論的閃亮的新 Web 介面：UI Builder！

什麼是 UI 產(chǎn)生器？

UI Builder 是一個 Web 介面，用於為工作區(qū)和入口網(wǎng)站建立和設定自訂頁面。它是 Now Experience UI 框架 的一部分，讓您：
?建置頁面。
?設定佈局和元件。
?定義操作的事件處理程序。
?使用資料綁定取得和顯示資料。
?建立客戶端腳本和客戶端狀態(tài)參數(shù)（也稱為變數(shù)）以在元件內(nèi)使用。

它本質(zhì)上是一個一站式商店，用於創(chuàng)建自訂網(wǎng)路體驗。讓我們來分解 UI Builder 的關鍵部分以及如何開始。

UI 產(chǎn)生器的工作原理

1. 體驗和頁面

體驗是使用者可以管理工作、尋找資訊或取得協(xié)助的頁面集合。每個頁面均由其 URL 定義，並定義該 URL 中的內(nèi)容。它由兩個關鍵元素組成：佈局和組件。
2.版面
佈局組織內(nèi)容在頁面上的顯示方式。它們是建立頁面的第一步，可以使用：
?基本列佈局：最多六列的預先定義結構。
?進階佈局：Flexbox 或基於CSS 網(wǎng)格的設計可實現(xiàn)更多自訂。
佈局還附帶一些工具，例如簡化的內(nèi)容樹以及用於配置和樣式設定的面板。
3.組件
元件是頁面的建構塊，例如表單、按鈕、資料清單、圖表、圖像或選單。設定佈局後，您可以為頁面新增元件。您可以使用配置面板自訂每個元件，其中包括：
?設定選項卡： 使用靜態(tài)值、資料綁定或 JavaScript 編輯屬性。
?樣式標籤： 新增自訂 CSS。
?事件標籤： 設定由使用者互動觸發(fā)的操作。

最佳實務是先新增佈局，然後再加入元件。

頁面變體和條件

UI Builder 中的所有頁面都是變體。您建立的第一個頁面是預設變體?？紤]諸如表單視圖之類的變體：相同的記錄，但根據(jù)上下文以不同的方式顯示。您可以為不同的受眾或條件建立其他變體。
條件決定頁面變體何時可見。這些可以使用以下方式設定：
?使用條件產(chǎn)生器設定規(guī)則。
?透過編碼查詢指定條件。
為了使條件起作用，它們依賴頁面參數(shù)傳遞的數(shù)據(jù)，我們將在下一篇文章中詳細介紹這些數(shù)據(jù)。

接下來是什麼？

讓我們在 UI Builder 中建立簡單的體驗！
我們將建立一種允許使用者查看記錄頁面的體驗。

1.入門。

.登入您的 ServiceNow 實例。
.導航至現(xiàn)在體驗框架> UI Builder 在過濾器導航器中開啟 UI Builder 介面。

2.創(chuàng)造體驗

.點選右上角的建立按鈕。

.從下拉清單中選擇體驗。將出現(xiàn)一個模式視窗。
。填寫以下詳細資料：
?名稱： 任何名稱。例如“預設工作空間”
?應用程式外殼 UI： 工作區(qū)應用程式外殼
?登陸路徑：保留預設 - 首頁
?角色： 暫時刪除預設角色。

.點選建立，然後選擇開啟體驗繼續(xù)。

3.建立頁面

。在新體驗中，按一下 建立新頁面 或頁面和變體旁的 圖示。

我們將使用範本
選擇標準記錄範本

.輸入範本的頁名。 URL 路徑將自動填入。

.點選繼續(xù)，
.我們的記錄範本帶有預先配置的必要（表和sys_id）和可選（查詢，extraParams視圖，selectedTab）參數(shù)，查看它然後選擇看起來不錯。

4.創(chuàng)建變體

.命名您的頁面變體，然後暫時跳過受眾和條件。點選繼續(xù)。
.熟悉變體編輯器：
?左面板： 用於新增版面配置和組件的內(nèi)容樹。
?右面板： 配置面板，帶有用於自訂組件的選項卡。
?左下： 用於動態(tài)資料的工具，例如資料資源、客戶端狀態(tài)參數(shù)和客戶端腳本。

就是這樣！

在下一篇文章中，我們將透過向頁面變體添加頁面參數(shù)來擴展我們的經(jīng)驗，以允許我們傳遞要在頁面內(nèi)使用的資料值。

本概述介紹了 UI Builder 的基礎知識，從佈局和元件到頁面和變體。在接下來的文章中，我們將透過探索以下內(nèi)容更深入地建立動態(tài)、互動式頁面：
?頁面參數(shù)。
?數(shù)據(jù)資源。
?客戶端狀態(tài)參數(shù)。
?客戶端腳本。
?活動。
在本系列結束時，您將牢牢掌握 UI Builder 以及如何創(chuàng)建資源豐富、用戶友好的體驗！ ！

了解更多關於 UI 建構器的資訊
?立即參加 UI Builder 的免費學習課程
https://nowlearning.servicenow.com/lxp/en/now-platform/ui-builder-fundamentals-washington?id=learning_course_prev&course_id=7ba080d447fdd65076e07884f16d435e?UI Builder 上的 ServiceNow 文件

https://www.servicenow.com/docs/bundle/xanadu-application-development/page/administer/ui-builder/concept/ui-builder-overview.html

以上是ServiceNow UI 產(chǎn)生器的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！