Så här skapar du en webbmallkomponent

När du skapar en webbmallskomponent kan du skapa en konfigurerbar, repeterbar komponent som kan anpassas för varje specifik instans som används.

I den här självstudien lär du dig att:

• Definiera ett manifest och ange parametrarna som ska skickas till en webbmallskomponent
• Skapa du en webbmallkomponent
• Lägg till webbmallskomponenten på en webbsida
• Konfigurera parametrar med designstudio

Förutsättningar

• En prenumeration på eller utvärdering av Power Pages. Skapa en Power Pages-utvärdering här.
• En Power Pages-webbplats har skapats. Skapa en Power Pages-webbplats.

Skapa du en webbmallkomponent

I stegen nedan skapar vi en webbmallskomponent som visar feedbackposter från en Microsoft Dataverse tabell i ett kortlayoutformat med en knapp för att skapa en granskning. Du kan ange hur många kort som kan konfigureras.

Skapa en Dataverse tabell som ska användas i webbmallkomponenten

I vårt exempel skapar vi en Dataverse-tabell kallad Granska för vår process. Mer information om hur du skapar Dataverse-tabeller finns i Så här skapar och ändrar du Dataverse-tabeller med arbetsytan Data. Du kan ändra de här stegen så att de återspeglar dina egna affärsprocesser.

1. Gå till Power Pages.

2. Välj en plats där du vill lägga till webbmallskomponenten och välj Redigera.

3. I designstudion väljer du arbetsytan Data.

4. Skapa en Dataverse-tabell kallad Granska med följande egenskaper:

   Dricks

   • Följande tabell är bara ett exempel - varsågod att skapa tabeller som överensstämmer med dina egna affärsprocesser.

   Kolumnnamn	Kolumndatatyper
   Name	Text (kolumn med befintligt namn)
   Innehåll	Flera textrader
   Rating	Heltal (minsta värde: 1, maxvärde: 5)

   

5. Lägg till några exempelposter i tabellen.

6. I arbetsytan Konfigurera, lägga till tabellbehörighet för att tillåta läsåtkomst och tilldela lämpliga webbroller.

Skapa webbmall med manifest

1. I programmet Portal Management, i avsnittet Innehåll, välj Webbmallar och välj Ny från huvudmenyn för att skapa en ny webbmall.

2. Ange granskningar för namnet (eller ett annat värde som återspeglar ditt krav).

3. Kopiera och klistra in följande kod i fältet Källa för webbmallsposten, ersätt värden som prefixet med cr54f prefixet som används i den egna miljön.

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

Lägg till webbmallskomponenten på en webbsida

När du har skapat webbmallskomponenten kan du lägga till den på en webbsida.

1. I Power Pages designstudio väljer du den sida där webbmallkomponenten ska läggas till.

2. Välj Redigera kod som öppnar Visual Studio Code för webben för webbsidan.

3. Ange följande inkludera utdrag som refererar till webbmallen du skapade tidigare, du kan ersätta namnet med namnet på din egen webbmall:

   {% include "reviews" %}

4. Välj CTRL-S för att spara koden. Gå tillbaka till designstudion och välj Synkronisering. En förhandsgranskning av komponenten på webbsidan visas.

5. Välj Redigera anpassad komponent och du kan konfigurera parametrarna som är definierade i manifestet för webbmallskomponenten du skapade ovan.

   

6. Förhandsgranska webbplatsen och visa layouten, gå tillbaka till designstudion och experimentera dig fram till olika layoutalternativ.