Sådan gør du: Oprette en webskabelonkomponent

Når du opretter en webskabelonkomponent, kan du oprette en komponent, der kan konfigureres, og som kan tilpasses for hver enkelt anvendt forekomst.

I dette selvstudium lærer du, hvordan du kan:

• Definere et manifest og angive de parametre, der skal overføres til en webskabelonkomponent
• Oprette en webskabelonkomponent
• Tilføje en webstedsskabelonkomponent på en webside
• Konfigurere parametrene i designstudiet

Forudsætninger

• Power Pages-abonnement eller prøve. Få Power Pages-prøve her.
• Oprette et Power Pages-websted Oprette et Power Pages-websted.

Oprette en webskabelonkomponent

I trinnene nedenfor opretter vi en webskabelonkomponent, der viser feedbackposter fra en Microsoft Dataverse-tabel i kortlayoutformat, med en knap til gennemgang. Du kan definere det antal kort, der kan konfigureres.

Oprette en Dataverse-tabel, der skal bruges i webskabelonkomponenten

I eksemplet opretter vi en Dataverse-tabel med navnet Gennemse til vores proces. Du kan finde flere oplysninger om oprettelse af Dataverse-tabeller i Sådan opretter og redigerer du Dataverse-tabeller med arbejdsområdet Data. Du kan ændre disse trin, så de afspejler dine egne forretningsprocesser.

1. Gå til Power Pages.

2. Vælg et websted, hvor du vil tilføje webstedsskabelonkomponenten og vælge Rediger.

3. Vælg arbejdsområdet Data i designstudiet.

4. Opret en Dataverse-tabel kaldet Gennemse med følgende egenskaber:

   Tip

   • Følgende tabel er blot et eksempel. Du kan frit oprette tabeller, der passer til dine egne forretningsprocesser.

   Kolonnenavn	Kolonnedatatype
   Name	Tekst (eksisterende navnekolonne)
   Indhold	Flere linjers tekst
   Vurdering	Heltal (minimumværdi: 1, maksimumværdi: 5)

   

5. Tilføj nogle prøveposter i tabellen.

6. I arbejdsområdet Sikkerhed skal du tilføje en tabeltilladelse for at tillade læseadgang og tildele til rette webroller.

Oprette webskabelon med et manifest

1. I Portalstyring-appeni afsnittet Indhold skal du vælge Webskabeloner og vælge Ny i hovedmenuen for at oprette en ny webskabelon.

2. Angiv gennemsyn for Navn (eller en anden værdi, der afspejler dit behov).

3. Kopiér og indsæt følgende kode i kildefeltet i webskabelonposten. Erstat værdier, der er præfikset med cr54f med det præfiks, der bruges i dit eget miljø.

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

Tilføje en webstedsskabelonkomponent på en webside

Når du har oprettet webskabelonkomponenten, kan du føje den til en webside.

1. I Power Pages -designstudio vælges den side, du til tilføje til webskabelonkomponenten.

2. Vælg Rediger kode, der åbner Visual Studio Code til internettet for websiden.

3. Angiv følgende include-sætning, der henviser til den webskabelon, du har oprettet tidligere. Du kan erstatte navnet med navnet på din egen webskabelon:

   {% include "reviews" %}

4. Vælg CTRL-S for at gemme koden. Gå tilbage til designstudiet, og vælg Synkroniser. Der vises et eksempel på komponenten på websiden.

5. Vælg Rediger brugerdefineret komponent, og du kan konfigurere de parametre, der er defineret i manifestet for den webskabelonkomponent, du har oprettet ovenfor.

   

6. Gennemse webstedet for at få vist layoutet, vend tilbage til designstudiet, og prøv at eksperimentere med forskellige layoutindstillinger.