注意
自 2022 年 10 月 12 日起，Power Apps 入口網站為 Power Pages。 其他資訊：Microsoft Power Pages 現在已推出 (部落格)
我們很快就會遷移並將 Power Apps 入口網站文件與 Power Pages 文件併合。
在本教學課程中，您將使用 Power Apps Component Framework 建立範例元件。 Power Apps Component Framework 可讓專業開發人員和應用程式製作者為模型導向應用程式和畫布應用程式建立程式碼元件。 這些程式碼元件可為使用表單、檢視和儀表板資料的使用者提供增強體驗。 詳細資訊：在入口網站中使用程式碼元件
注意
- 本教學課程是根據現有 Power Apps Component Framework 教學課程所建立，為您逐步解說空白頁面中清單與子格的 Power Apps 格控制項 (預覽版) 元件。 您也可以使用任何現有元件或新元件，將其新增至本教學課程的任何其他網頁。 在這種情況下，請務必在遵循此教學課程中的步驟時使用您的元件和網頁。 若要了解入口網站中支援哪些程式碼元件，請參閱在入口網站中使用程式碼元件。
在本教學課程中，您將了解如何：
- 使用 Power Apps Component Framework 建立範例元件
- 將元件封裝至 Microsoft Dataverse 環境
- 設定 Power Pages 以將元件新增至網頁
- 瀏覽 Power Pages 網頁以與元件進行互動
先決條件
- 入口網站 9.4.9.xx 版或更新版本。
- Dataverse 基底入口網站套件 9.3.2209.x 或更新版本。
步驟 1 - 建立您的第一個元件
完成建立您的第一個元件教學課程。
注意
在建立您的第一個元件的最後，您將會封裝名為 TSLinearInputComponent 的元件並將其上傳至 Dataverse 環境。
步驟 2 - 將程式碼元件新增至模型導向應用程式中的檢視表或子格
若要將元件新增至 客戶資料表、檢視表和子格，請依照將檢視表和子格轉換為可編輯的網格 (預覽版) 這裡的步驟進行
步驟 3 - 將程式碼元件新增至入口網站中的清單和子格
在此步驟中，您會在入口網站中建立新的基本表單，然後將元件新增至已建立的基本表單。 您也可以改用現有的基本表單。
步驟 3.1 - 將程式碼元件新增至清單
開啟入口網站管理應用程式。
在左窗格的 內容下方，選取 清單。
選取 新增。
輸入 名稱。 例如， 包含程式碼元件的客戶清單。
對於 資料表名稱，選取稍早在本教學課程中將程式碼元件新增到的資料表。
選取您的 入口網站。
將使用已設定的程式碼元件選為是
步驟 3.2 - 將程式碼元件新增至清單上的檢視表
依照下列步驟，在 Dataverse 的實體檢視表上啟用控制項。
開啟入口網站管理應用程式。
輸入 名稱。 例如， 包含程式碼元件的客戶清單。
對於 資料表名稱，選取稍早在本教學課程中將程式碼元件新增到的資料表。
選取您的 入口網站。
在進階設定網格下新增檢視表。
將使用已設定的程式碼元件選為是
步驟 3.3 - 將程式碼元件新增至子格
開啟入口網站管理應用程式。
在左窗格的內容下，選取基本表單。
選取您在上一個步驟中建立的基本表單。
選取相關。
選取基本表單中繼資料
選取新增基本表單中繼資料。
選取子格做為類型。
選取子格名稱。
對於 控制項樣式，選取 程式碼元件。
使用 Liquid 標籤新增資料集程式碼元件
可以使用 codecomponent Liquid 範本標籤新增資料集程式碼元件。 表示需要載入程式碼元件的索引鍵是使用 name 屬性傳入。 該索引鍵可以是 GUID (程式碼元件識別碼)，也可以是在 Microsoft Dataverse 中匯入的程式碼元件名稱。
程式碼元件預期的屬性值必須做為以「:」(冒號) 分隔的索引鍵/值組來傳遞，其中索引鍵是屬性名稱，而值是 JSON 字串值。
{% codecomponent name: <ID or name> <property1:value> <property2:value> %}
如需詳細資訊，請參閱程式碼元件的 Liquid 範本標籤。
限制
在 Power Apps grid 控制項不支援清單和子格上的動作與中繼資料篩選設定。