Partager via

Procédure : créer un composant de modèle web

  • Article

La création d’un composant de modèle web vous permet de créer un composant configurable et reproductible qui peut être personnalisé pour chaque instance spécifique utilisée.

Dans cette procédure, vous apprenez à :

  • Définir un manifeste et spécifier les paramètres à transmettre à un composant de modèle web
  • Créer un composant de modèle web
  • Ajouter le composant de modèle web à une page web
  • Configurer les paramètres en utilisant le studio de conception

Conditions préalables

Créer un composant de modèle web

Dans les étapes ci-dessous, nous créons un composant de modèle web qui affiche les enregistrements de commentaire d’une table Microsoft Dataverse au format de disposition de carte, avec un bouton pour fournir une révision. Vous pouvez définir le nombre de cartes configurables.

Créer une table Dataverse à utiliser dans le composant de modèle web

Dans notre exemple, nous créons une table Dataverse appelée Révision pour notre processus. Pour plus d’informations sur la façon de créer des tables Dataverse, consultez Comment créer et modifier des tables Dataverse à l’aide de l’espace de travail Données. Vous pouvez modifier ces étapes pour refléter vos propres processus métier.

  1. Accéder à Power Pages.

  2. Sélectionnez un site où vous souhaitez ajouter le composant de modèle web et sélectionnez Modifier.

  3. Dans le studio de conception, sélectionnez l’espace de travail Données.

  4. Créez une table Dataverse appelée Révision avec les propriétés suivantes :

    Astuce

    • La table suivante n’est qu’un exemple, n’hésitez pas à créer des tables correspondant à vos propres processus d’entreprise.
    Nom de colonne Type de données de colonne
    Nom  Texte (colonne nom existante)
    Contenu Plusieurs lignes de texte
    Rating Nombre entier (valeur minimale : 1, valeur maximale : 5)

    Créez une table à utiliser dans la procédure.

  5. Ajoutez des exemples d’enregistrements à la table.

  6. Dans l’espace de travail Configurer, ajoutez une autorisation de table pour autoriser l’accès en lecture et l’attribuer aux rôles web appropriés.

Créer un modèle web avec un manifeste

  1. Dans l’application de gestion du portail, dans la section Contenu, choisissez Modèles web et sélectionnez Nouveau dans le menu principal pour créer un nouveau modèle web.

  2. Saisissez révisions pour le Nom (ou une autre valeur qui reflète vos exigences).

  3. Copiez et collez le code suivant dans le champ Source de l’enregistrement du modèle web, remplacez les valeurs précédées de cr54f par le préfixe utilisé dans votre propre environnement.

    {% fetchxml postsQuery %}
<fetch mapping='logical'>   
   <entity name='cr54f_review'>  
        <attribute name='cr54f_name'/>   
        <attribute name='cr54f_content'/>   
        <attribute name='cr54f_rating'/>   
        <attribute name='createdon'/>  
        <order attribute='createdon' descending='false'/>   
   </entity>   
</fetch>
{% endfetchxml %}
{% assign posts_count = count | times: 1 %}
{% assign col_div = columns | integer %}
<h2>({{postsQuery.results.entities.size}}) {{name | default:"Feedback entries (default)"}} </h2>
{% if postsQuery.results.entities.size > 0 %}
    <div class="col-sm-12">
      <ul style="list-style: none;">
          {% for post in postsQuery.results.entities limit:count %}
              <li class="col-md-{{ 12 | divided_by: col_div }}">
                  <div class="panel panel-{% if post.cr54f_rating < cutoff %}danger{% else %}default{% endif %}">
                      <div class="panel-heading">{{post.cr54f_name}} <span class="badge" style="float:right">{{post.cr54f_rating}}</span></div>
                      <div class="panel-body">
                          <p>{{post.cr54f_content}}</p>
                      </div>
                      <div class="panel-footer">{{post.createdon}}</div>
                  </div>
            </li>
          {% endfor %}
      </ul>
    </div>
    {% if postsQuery.results.entities.size > count %}
      <hr/>
      <button onclick="alert('Not yet implemented :)')" class="button1" style="margin: 0 auto; display:block">{{load_more_label | default: "Load More"}}</button>
    {% endif %}
{% endif %}

{% manifest %} 
{
  "type": "Functional",
  "displayName": "Posts",
  "description": "Shows all posts",
  "tables": ["cr54f_review"],
  "params": [
    {
      "id": "name",
      "displayName": "Title",
      "description": "Let's give it a title"
    },
    {
      "id": "count",
      "displayName": "Count",
      "description": "No. of items"
    },
    {
      "id": "columns",
      "displayName": "# of Columns",
      "description": "less than 12"
    },
    {
      "id": "cutoff",
      "displayName": "Limit for review",
      "description": "Number between 1 and 5"
    },
    {
      "id": "load_more_label",
      "displayName": "Load more label",
      "description": ""
    }
  ]
}
{% endmanifest %}

Ajouter le composant de modèle web à une page web

Une fois que vous avez créé le composant de modèle web, vous pouvez l’ajouter à une page web.

  1. Dans le studio de conception Power Pages, sélectionnez la page à laquelle vous souhaitez ajouter le composant de modèle web.

  2. Sélectionnez Modifier le code qui ouvre Visual Studio Code pour le web pour la page web.

  3. Saisissez l’instruction d’inclusion suivante qui fait référence au modèle web que vous avez créé précédemment. Vous pouvez remplacer le nom par celui de votre propre modèle web :

    {% include "reviews" %}

  4. Sélectionnez CTRL-S pour enregistrer le code. Retournez dans le studio de conception et sélectionnez Synchroniser. Un aperçu du composant sur votre page web s’affiche.

  5. Sélectionnez Modifier le composant personnalisé pour pouvoir configurer les paramètres définis dans le manifeste du composant de modèle web que vous avez créé ci-dessus.

    Comment ajouter des paramètres à un composant personnalisé.

  6. Prévisualisez le site pour voir la disposition, retournez dans le studio de conception et expérimentez différentes options de disposition.