Balise de modèle Liquid pour les composants de code

Notes

À compter du 12 octobre 2022, le portail Power Apps devient Power Pages. Plus d’informations : Microsoft Power Pages est maintenant généralement disponible (blog)
Nous allons bientôt migrer et fusionner la documentation des portails Power Apps avec la documentation de Power Pages.

Power Apps component framework permet aux développeurs professionnels et aux créateurs d’applications de créer des composants de code pour des applications pilotées par modèle et canevas. Ces composants de code peuvent fournir une expérience améliorée des utilisateurs travaillant avec des données sur des formulaires, des vues et des tableaux de bord. Pour plus d’informations : Utiliser des composants de code dans les portails

Important

La balise de modèle Liquid pour les composants de code nécessite la version de Portals 9.3.10.x ou version ultérieure.

Avec cette version, nous avons introduit la fonctionnalité d’ajout de composants de code créés à l’aide d’une balise de modèle Liquid sur les pages Web et les composants activés à l’aide de l’API Web qui sont activés pour les composants au niveau du champ sur les formulaires dans les portails.

Les composants de code peuvent être ajoutés à l’aide de la balise de modèle Liquid codecomponent. La clé pour désigner le composant de code qui doit être chargé est passée en utilisant l’attribut name. La clé peut être le GUID (qui est l’ID du composant de code) ou le nom du composant de code importé dans Microsoft Dataverse.

Les valeurs des propriétés attendues par le composant de code doivent être transmises sous forme de paire clé/valeur séparées par ":" (signe deux-points), où clé est le nom de la propriété et la valeur est la valeur de la chaîne JSON.

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

Par exemple, pour ajouter un composant de code attendant un paramètre d’entrée nommé controlValue, utilisez la balise de modèle Liquid suivante :

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

Conseil

Cet exemple utilise des paramètres appelés controlvalue et controlApiKey, cependant le composant que vous utilisez peut nécessiter des noms de paramètres différents.

Vous pouvez utiliser l’exemple de contrôle de mappage et emballer le composant de code en tant que solution pour utiliser les portails.

Notes

Les ressources créés par la communauté ne sont pas prises en charge par Microsoft. Si vous avez des questions ou des problèmes avec les ressources communautaires, contactez l’éditeur de la ressource. Avant d’utiliser ces ressources, vous devez vous assurer qu’elles répondent aux directives du cadre de Power Apps Component Framework, et elles ne doivent être utilisées qu’à des fins de référence.

Tutoriel : Utiliser des composants de code sur les pages avec la balise de modèle Liquid

Dans ce didacticiel, vous allez configurer les portails Power Apps pour ajouter le composant à une page Web. Ensuite, vous visiterez la page Web des portails et interagirez avec le composant.

Avant de commencer

Si vous utilisez l’exemple de composant de code utilisé dans ce didacticiel, assurez-vous d’importer d’abord les exemples de solutions dans l’environnement avant de commencer. Pour en savoir plus sur l’importation de solutions, accédez à Importer des solutions.

Conditions préalables

Pour les conditions préalables et pour connaître les composants de code pris en charge/non pris en charge dans les portails, accédez à Utiliser des composants de code dans les portails.

Notes

Ce didacticiel utilise un exemple de composant de code créé à l’aide de Power Apps Component Framework pour faire la démonstration d’un contrôle de carte sur une page Web. Vous pouvez également utiliser n’importe quel composant existant ou nouveau, ainsi que toute autre page Web pour ce didacticiel. Dans ce cas, assurez-vous d’utiliser votre composant et votre page Web lorsque vous suivez les étapes de ce didacticiel. Pour plus d’informations sur la création de composants de code, accédez à Créer votre premier composant.

Étape 1. Ajouter le composant de code à une page Web à partir de Studio

1. Ouvrez votre portail dans le  studio de portails Power Apps.

2. En haut à gauche, sélectionnez Nouvelle page.

3. Sélectionnez Vierge.

4. Dans le volet des propriétés de droite, mettez à jour le nom de la page web. Par exemple, "Visionneuse de carte".

5. Mettez à jour l’URL partielle. Par exemple, "mapviewer".

6. Développez Autorisations.

7. Désactivez Page disponible pour tout le monde.

8. Sélectionnez les rôles Web qui doivent être autorisés à accéder à cette page.

9. Sélectionnez la zone modifiable sur la page pour modifier le code source Liquid.

10. Ouvrez l’éditeur de code Studio.

11. Ajoutez un contrôle avec la balise de modèle Liquid en utilisant la syntaxe suivante :

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

    Conseil

    Pour récupérer les détails de tous les composants importés et rechercher un nom de composant, reportez-vous à l’API Web CustomControl.

    Par exemple :

    • Pour rechercher un composant :

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

    • Pour récupérer les paramètres d’entrée d’un composant :

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

12. Enregistrez et fermez l’éditeur de code.

13. Dans le coin en haut à droit, sélectionnez Parcourir le site web.

14. La page Web affichera maintenant le contrôle qui y est ajouté.

Étapes suivantes

Présentation : utiliser des composants de code dans les portails

Voir aussi

Balise d’entité Codecomponent Dataverse
Balise de modèle Codecomponent
Vue d’ensemble de Power Apps component framework
Création de votre premier composant
Ajouter des composants de code à une colonne ou une table dans des applications pilotées par modèle
Implémenter un exemple de composant de l’API web du portail

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).