使用自然語言建立使用 AI 建立的生成頁面。 生成頁面是一種 AI 驅動的體驗,旨在簡化、加速和改進模型導向應用程式中的應用程式設計流程。 透過與應用程式 Agent 互動,您可以用自然語言描述需求並指定要參照的 Microsoft Dataverse 資料表,在模型導向應用程式中建立完整可用的頁面。 您甚至可以附加您希望頁面呈現的影像。
在您描述頁面後,系統會處理您的需求和規範,並智慧地產生 React 程式碼,該程式碼透過選取正確的元件和確定最佳版面配置來涵蓋前端使用者體驗以及相應的商務規則。 透過互動式對話體驗,您可以即時最佳化頁面設計,調整元素、版面配置和功能,以完美配合您的願景。
先決條件
- Power Platform 環境必須位於美國區域。 此功能在其他地區尚不可用。
在模型導向應用程式中建立生成頁面
登入 Power Apps。
開啟模型導向應用程式進行編輯。
在應用程式設計工具中,選取新增頁面>描述頁面。
開啟全頁生成頁面體驗。
在文字方塊中,鍵入您想要建立的頁面類型的描述。 描述應包括功能要求以及可選的任何 UX 規格。 例如,您可以輸入建立頁面,以卡片庫的形式展示帳戶記錄,並採用現代風格的外觀和風格。頁面頂端包含名稱、實體影像,以及網站、電子郵件和電話號碼。使用帳戶表中的資料,使該卡片庫可捲動。
選取新增資料>新增資料表,以加入合適的資料表與影像。 您最多可以連結六個 Dataverse 資料表。 在螢幕擷取畫面中,新增了帳戶表。
可選擇上傳一張圖片,以引導所產生頁面的使用者介面,方法是選取新增資料>附加圖片。 這可以是餐巾紙上的草圖或高解析度影像。
完成頁面描述後,選取生成頁面。
代理程式將開始一個多步驟的建置過程,您可以即時觀察:
- 流式傳輸其想法:代理程式首先概述其對您所提供的提示的解釋,列出需求、假設和執行計劃。
- 程式碼產生:接下來,它根據計劃為您的頁面編寫底層程式碼。
- 轉譯:然後轉譯產生的程式碼以確保相容性和正確的渲染。
- 最終渲染:最後,展示完成的使用者體驗。
如果在此程式結束時未顯示使用者體驗,您可以選取 [預覽] 索引標籤來檢視它。
查看生成的程式碼、迭代並發佈
產生頁面後,您有數個選項來精簡和完成頁面:
檢視和編輯產生的程式碼 選取 [程式碼 ] 索引標籤,以檢視應用程式代理程式所產生的程式碼。
您可以透過兩種方式精簡輸出:
- 反覆與應用程式代理程式聊天,以修正錯誤、調整版面配置或新增功能。
- 選取 [程式碼] 索引標籤上的 [編輯] ,以手動編輯程式碼。進行一些編輯之後,您可以選取 [儲存] 以將變更認可為新的反覆專案,或選取 [取消] 以捨棄變更。
比較反覆專案 使用客服專員完成兩個或多個反覆專案後,您可以選取 [程式碼] 索引標籤上的 [比較] ,以檢視目前和上一個反覆專案之間的程式碼差異。
Note
此功能目前僅在當前工作階段中的第二次迭代開始提供使用。
附上截圖以供快速參考 在聊天體驗中,按一下 附加>新增螢幕擷取畫面 ,以在您下次與應用程式客服專員互動時包含目前預覽的螢幕擷取畫面。 這對於幫助調整頁面的視覺效果很有用。
儲存並發佈 在命令列中,選取 儲存以避免 遺失頁面上的進度。
當您對頁面感到滿意時,請選取 [儲存並發佈] 以發佈應用程式的所有擱置變更,包括任何生成式頁面。
重要
雖然智能代理會盡最大努力產生完整的可用於生產環境的程式碼,包括無障礙性和安全性最佳實務的考量,但您最終有責任驗證程式碼。 確保產生的程式碼符合您組織的標準和合規性要求。
將生成式頁面新增至解決方案
生成式頁面具備解決方案識別能力,可以透過應用程式新增至解決方案,以便在不同環境之間進行切換。 若要將生成式頁面新增至解決方案,請執行下列動作:
重要
如果您的生成式頁面是在預覽階段期間建立的,您必須在模型應用程式設計工具中載入生成式頁面,以啟動一次性移轉至新的解決方案感知資料模型。 當頁面載入設計工具時,您會看到「升級頁面」進度訊息。 在移轉完成之前,請勿關閉視窗。
- 將包含生成式頁面的應用程式新增至解決方案
- 在 Power Apps 中,選取左側導覽窗格中的 解決方案 ,然後開啟所需的解決方案。
- 選取 [新增現有 > 的應用程式 > 模型導向應用程式]。
- 選取包含生成式頁面的應用程式。
-
匯出解決方案 (以受控或不受控的形式)
- 請確定應用程式網站地圖已包含在解決方案中。 如果沒有,則應在相依性檢查期間要求。
- 生成式頁面 (顯示為UX Agent 專案資料列) 也會依據其在網站地圖中的相依性被要求。
Note
如果在相依性檢查期間未要求產生式頁面,請檢查下列項目:
- 在預覽期間建立的頁面只有在已遷移後才會顯示。 在設計工具中載入它們以觸發移轉。
- 如果解決方案中包含 Sitemap,且您的生成式頁面已移轉,請嘗試對 Sitemap 進行細微變更 (例如重新排序或重新命名頁面)、重新發佈應用程式,然後再次嘗試匯出。
匯出後,您可以將應用程式和生成式頁面匯入到另一個環境。 在目標環境的設計工具中開啟時,只有第一個提示和已發佈的程式碼可用。 完整的客服專員交談不會隨頁面傳輸。
限制
這些是生成頁面的目前限制:
- 您的頁面僅能連接至 Dataverse 資料表 (單一頁面最多可達六個)。 您可以對這些表執行建立、讀取、更新和刪除 (CRUD) 作業。 不能使用其他資料來源。
- 您的提示最多可以有 50,000 個字元。
- 僅支援美式英語。
- 不支援協作。 確保每次只有一個製作者在生成頁面上工作,以避免意外衝突。
- 僅支援以下資料類型:
- 選擇
- Currency
- Customer
- 日期和時間
- 只有日期
- 十進位數字
- 浮點數
- 影像
- 查閱
- 多行文字
- 執行狀態
- 狀態原因
- 文字
- 整數
- 是/否
- 唯一識別碼
常見問題
我可以在 Plan Designer 中開始設計我的應用程式,然後使用生成頁面嗎?
是,雖然方案和生成式頁面之間目前沒有直接整合,但您可以使用方案來定義資料表和應用程式,然後切換至應用程式設計工具來建立任何所需的生成式頁面。
使用產生頁面是否需要額外的費用或點數?
否,生成式頁面 (與計畫) 的建立者體驗不需要額外的 AI 或訊息點數。
什麼樣的影像最適合指導 UI 生成?
這取決於你的目標。 如果您確切地知道最終頁面的外觀,清晰詳細的草圖或線框圖(無論是手繪還是數位)是最有效的。 若您僅有一般概念並希望 Agent 補充細節,快速白板草圖甚至餐巾紙上的手繪圖都能發揮良好效果。
我可以將生成頁面與畫布應用程式或其他類型的應用程式一起使用嗎?
不,生成頁面目前僅受模型導向應用程式支援。
有沒有辦法跨環境重複使用或複製生成頁面?
是的,生成式頁面是具解決方案感知的元素,可以跨環境移動。 只有最後發佈的程式碼版本和第一個提示會與解決方案一起維護;完整的修訂歷程會保留在原始環境中。
我可以手動編輯產生的程式碼嗎?
是的。 您可以選取 [程式碼] 索引標籤上的 [編輯] 來手動編輯產生的程式碼。您的變更會儲存為新的疊代。 如果您選擇不保留編輯,請選取 [取消 ] 以取消編輯。
生成式頁面產生的程式碼是否保證可用於生產並符合我組織的標準?
號碼 雖然代理會盡全力產生高品質且適用於生產環境的程式碼,同時考慮無障礙性和安全性的最佳實務,但仍需由您負責驗證輸出結果。 請務必檢閱產生的程式碼,以確保其符合組織的標準、原則和合規性要求。
我如何對該功能提供意見反應?
對生成頁面提供意見反應的最佳方式是使用每次迭代後可用的聊天體驗中的讚/反對按鈕。 我們還強烈建議您在共用相關內容範例和其他記錄檔案上選取是,以便我們可以偵錯或嘗試重新建立您在使用該功能時遇到的任何問題。
如果在我的環境中沒有看到啟用的生成頁面,該怎麼辦?
確認您的環境位於美國區域。