Modèles web en tant que composants
Les modèles web peuvent être créés et utilisés comme composants dans les pages web pour permettre aux créateurs d’utiliser ces composants réutilisables et de fournir des paramètres pour répondre aux exigences.
En tant que développeur, vous pouvez créer un modèle web pour fournir des fonctionnalités spécifiques que les créateurs peuvent configurer lors de la conception de pages web.
Par exemple, vous pouvez créer les composants suivants (et d’autres) en tant que composants de modèle web configurables dans le studio de conception :
- Liste d’emplacements avec cartes
- Affichage du carrousel
- Galerie d’images ou de vidéos
Pour ajouter un composant à une page web, vous pouvez modifier la page en utilisant Visual Studio Code pour le web et en ajoutant un objet d’inclusion Liquid à la copie de la page :
{% include '<<web template name>>' <<parameter 1>>: '<<value>>' <<paramter 2>>: '<<value>>' %}
Exemple :
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Créer un composant de modèle web
Pour créer un composant de modèle web auquel vous pouvez autoriser un créateur à transmettre des paramètres, vous devez ajouter une balise {% manifest %} au modèle web. La section du manifeste décrit les paramètres que vous pouvez configurer pour être transmis et utilisés par le code du modèle web.
Le manifeste est un objet JSON qui définit les propriétés du modèle web affiché dans le studio de conception : type, nom complet, description, tables et paramètres. Ces propriétés du modèle web peuvent être utilisées pour combler le fossé entre les développeurs professionnels et la modification low-code. Les paramètres se rapportent aux variables que les développeurs utilisent dans leur code source, et les créateurs low-code peuvent configurer leurs valeurs.
Propriétés prises en charge par le manifeste
| Propriété du manifeste | Description |
|---|---|
| Type | Doit être défini sur Fonctionnel. Fonctionnel : ajoutez le composant de modèle web via le processus Ajouter un composant dans le studio de conception. |
| displayName | Nom convivial du composant de modèle web, à afficher dans le studio de conception. |
| description | Description du composant de modèle web. |
| tables | Matrice de tables Dataverse qu’un créateur peut utiliser pour accéder directement à l’espace de travail Données pour modifier la configuration des tables ou les enregistrements. Les tables doivent être répertoriées en utilisant leur nom logique. |
| paramètres | Paramètres avec des propriétés définies : id : correspond à la variable utilisée dans le code du modèle web et la balise d’inclusion Liquid. displayName : nom convivial dans le studio de conception. description : texte court affiché dans une info-bulle pour fournir un contexte aux créateurs qui utilisent le composant. |
Exemple :
{% manifest %}
{
"type": "Functional",
"displayName": "Data Cards",
"description": "This component displays data using a cards layout",
"tables": ["cards"],
"params": [
{
"id": "title",
"displayName": "Title",
"description": "Heading for this component"
},
{
"id": "count",
"displayName": "Count",
"description": "No. of items to be displayed"
}]
}
{% endmanifest %}
<!--additional web template code to use parameters to specialized functionality-->
Écrire le code du modèle web
Si vous souhaitez étendre un modèle web prédéfini existant, nous vous recommandons de créer une copie du modèle web et d’étendre la copie pour conserver le code source et éviter la perte de données.
Tous les paramètres sont transmis en tant que chaînes. Dans votre code, il est recommandé de convertir les valeurs des paramètres dans les types souhaités, selon les besoins. Pour convertir les paramètres, utilisez les Filtres Liquid.
Exemples :
{% assign posts_count = count | integer %}{% assign column_count = columns | integer %}
Configurer un composant de modèle web sur une page web
Lorsque le composant de modèle web (avec une section de manifeste) est créé, vous pouvez ajouter une référence Liquid correspondante à la copie de la page web (en utilisant Visual Studio Code pour le web, Visual Studio Code, l’application de gestion du portail ou d’autres méthodes) en transmettant les différents paramètres, comme illustré dans cet exemple :
{% include 'webTemplateName' name: 'Topics' count:'4' %}
Vous pouvez configurer les paramètres directement dans le studio de conception. Ainsi, un développeur professionnel peut créer des composants avancés en utilisant des modèles web que les créateurs low-code peuvent configurer à l’aide du studio de conception.
Limitations et problèmes connus
L’imbrication de composants de modèle web dans d’autres composants de modèle web n’est pas prise en charge.
Étape suivante
Comment créer un composant de modèle web