程式碼元件的 Liquid 範例標籤

注意

自 2022 年 10 月 12 日起，Power Apps 入口網站為 Power Pages。 其他資訊：Microsoft Power Pages 現在已推出 (部落格)
我們很快就會遷移並將 Power Apps 入口網站文件與 Power Pages 文件併合。

Power Apps Component Framework 可讓專業開發人員和應用程式製作者為模型導向應用程式和畫布應用程式建立程式碼元件。 這些程式碼元件可為使用表單、檢視和儀表板資料的使用者提供增強體驗。 詳細資訊：在入口網站中使用程式碼元件

重要

程式碼元件的 Liquid 範本標籤需要入口網站版本 9.3.10.x 或更新版本。

在此版本中，我們引入了在網頁上使用 Liquid 範本標籤新增程式碼元件的功能，和使用 Web API 為入口網站中表單上的欄位層級元件啟用元件。

可以使用 codecomponent Liquid 範本標籤新增程式碼元件。 表示需載入程式碼元件的索引鍵是使用 name 屬性傳入。 該索引鍵可以是 GUID (程式碼元件識別碼)，也可以是在 Microsoft Dataverse 中匯入的程式碼元件名稱。

程式碼元件預期的屬性值必須做為以「:」(冒號) 分隔的索引鍵/值組來傳遞，其中索引鍵是屬性名稱，而值是 JSON 字串值。

{% codecomponent name: <ID or name> <property1:value> <property2:value> %}

例如，若要新增需要名為 controlValue 之輸入參數的程式碼元件，請使用以下 Liquid 範本標籤：

{% codecomponent name:abc_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value>%}

提示

此範例使用名為 controlvalue 和 controlApiKey 的參數，但您使用的元件可能需要不同的參數名稱。

您可以使用範例地圖控制項和將程式碼元件封裝為解決方案與入口網站一起使用。

注意

Microsoft 不支援此社群所建立的資源。 如果您對社群資源有疑問或問題，請連絡該資源的發行者。 在使用這些資源之前，必須確保它們符合 Power Apps Component Framework 指導方針，並應僅用於參考目的。

教學課程：在包含 Liquid 範本標籤的頁面上使用程式碼元件

在此教學課程中，您將設定 Power Apps 入口網站以將元件新增至網頁。 然後，您將造訪入口網站網頁並與元件互動。

開始之前

如果您使用此教學課程中所用的範例程式碼元件，請務必在開始之前先將範例解決方案匯入環境。 若要瞭解解決方案匯入，請移至匯入解決方案。

先決條件

有關先決條件和瞭解入口網站中支援/不支援的程式碼元件，請移至在入口網站中使用程式碼元件。

注意

本教學課程使用以 Power Apps Component Framework 建立的範例程式碼元件，在網頁上示範地圖控制項。 您也可以使用自己的任何現有元件或新元件，和本教學課程的任何其他網頁。 在此案例中，請務必在遵循此教學課程中的步驟時使用您的元件和網頁。 有關如何建立程式碼元件的詳細資訊，請移至建立您的第一個元件。

步驟 1。 將程式碼元件新增至工作室的網頁

1. 在  Power Apps 入口網站工作室中開啟您的入口網站。

2. 選取左上角的 新頁面。

3. 選取 空白。

4. 在右側的屬性窗格上，更新網頁名稱。 例如「地圖檢視器」。

5. 更新部分 URL。 例如「地圖檢視器」。

6. 展開權限。

7. 停用頁面可供所有人使用。

8. 選取應該允許存取此頁面的 Web 角色。

9. 選取頁面上的可編輯區域，以編輯 Liquid 來原始程式碼。

10. 開放工作室程式碼編輯器。

11. 使用以下語法新增具有 Liquid 範本標籤的控制項：

    {% codecomponent name:abc\_SampleNamespace.MapControl controlValue:'Space Needle' controlApiKey:<API Key Value> %}
    

    提示

    若要擷取所有匯入元件的詳細資料和搜尋元件名稱，請參閱 CustomControl Web API。

    例如:

    • 若要搜尋元件：

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$select=ContosoCustomControlName

    • 若要擷取元件的輸入參數：

      https://contoso.api.crm10.dynamics.com/api/data/v9.2/customcontrols?$filter=name eq 'ContosoCustomControlName' &$select=manifest

12. 儲存後關閉程式碼編輯器。

13. 在右上角選取 瀏覽網站。

14. 現在網頁會顯示新增的控制項。

後續步驟

概觀：在入口網站中使用程式碼元件

請參閱

程式碼元件 Dataverse 實體標籤
程式碼元件範本標籤
Power Apps Component Framework 概觀
建立您的第一個元件
將程式碼元件新增到模型導向應用程式中的資料行或資料表
執行範例入口網站 Web API 元件

注意

是否能請您告知您偏好的慣用文件語言？ 請填寫問卷。 (請注意，本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。