Balise de modèle Liquid pour les composants de code

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

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>%}

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

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.

É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