Әдіс: веб-үлгі құрамдасын жасау

Веб-үлгі құрамдасын жасау әрбір пайдаланылған белгілі бір данаға теңшеуге болатын конфигурацияланатын, қайталанатын құрамдас құруға мүмкіндік береді.

Бұл әдістемеден әдісін үйренесіз:

• Манифестті анықтау және веб-үлгі құрамдасына өтетін параметрлерді көрсету
• Веб-үлгі құрамдасын жасау
• Веб-бетке веб-үлгі құрамдасын қосу
• Дизайн студиясын пайдаланып параметрлерді конфигурациялау

Алғышарттар

• Power Pages жазылымы немесе сынақ нұсқасы. Power Pages сынақ нұсқасын осы жерден алыңыз.
• Power Pages сайты жасалды. Power Pages сайтын жасау.

Веб-үлгі құрамдасын жасау

Төмендегі қадамдарда қарап шығуға берілген түймемен Microsoft Dataverse кестесіндегі пікір жазбаларын карта орналасуы пішімінде көрсететін веб-үлгіні жасаймыз. Конфигурациялауға болатын карталардың санын анықтауға болады.

Веб-үлгі құрамдасында пайдалану үшін Dataverse кестесін жасау

Біздің мысалда процесс үшін Қарап шығу деп аталатын Dataverse кестесін жасаймыз. Dataverse кестелерін жасау жолы туралы қосымша ақпаратты Деректер жұмыс кеңістігін пайдаланып Dataverse кестелерін жасау және өзгерту жолы бөлімінен қараңыз. Жеке бизнес процестеріңізді көрсету үшін осы қадамдарды өзгертуге болады.

1. Power Pages торабына өтіңіз.

2. Веб-үлгі құрамдасын қосқыңыз келетін сайтты таңдап, Өңдеу параметрін таңдаңыз.

3. Дизайн студиясында Деректер жұмыс кеңістігін таңдаңыз.

4. Қарап шығу деп аталатын Dataverse кестесін келесі сипаттармен жасаңыз:

   Шайпұл

   • Келесі кесте мысал ғана, жеке бизнес процестеріңізге сәйкес кестелер жасауыңызға болады.

   Баған атауы	Баған деректерінің түрі
   Аты	Мәтін (бұрыннан бар аты бағаны)
   Мазмұны	Мәтіннің көп жолы
   Баға	Бүтін саны (минималды мән: 1, максималды мән: 5)

   

5. Кестеге бірнеше үлгі жазба қосыңыз.

6. Реттеу жұмыс кеңістігінде қатынасты оқуға және тиісті веб-рөлдерге тағайындауға рұқсат ету үшін кесте рұқсатын қосыңыз.

Манифестпен веб-үлгі жасау

1. Порталды басқару бағдарламасындаМазмұн бөлімінде Веб-үлгілер параметрін таңдап, жаңа веб-үлгі жасау үшін негізгі мәзірден Жаңа параметрін таңдаңыз.

2. Аты үшін қарап шығуларды енгізіңіз (немесе талабыңызды көрсететін басқа мән).

3. Келесі кодты көшіріп, веб-үлгі жазбасының Көз өрісіне қойып, cr54f префиксі қосылған мәндерді жеке ортаңызда пайдаланылатын префикспен ауыстырыңыз.

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

Веб-бетке веб-үлгі құрамдасын қосу

Веб-үлгі құрамдасын жасағаннан кейін оны веб-бетке қосуға болады.

1. Power Pages дизайн студиясында веб-үлгі құрамдасына қосу қажет бетті таңдаңыз.

2. Веб-бет үшін Интернетке арналған Visual Studio Code бағдарламасын ашатын Кодты өңдеу параметрін таңдаңыз.

3. Бұрын жасалған веб-үлгіге сілтеме жасайтын келесі қосу мәлімдемесін енгізсеңіз, атын жеке веб-үлгі атымен ауыстыруға болады:

   {% include "reviews" %}

4. Кодты сақтау үшін CTRL-S параметрін таңдаңыз. Дизайн студиясына оралып, Синхрондау параметрін таңдаңыз. Веб-бетте құрамдастың алдын ала қарау нұсқасы көрсетіледі.

5. Реттелетін құрамдасты өңдеу параметрін таңдап, сіз жоғарыда жасаған веб-үлгі құрамдасының манифестінде анықталған параметрлерді теңшеуге болады.

   

6. Орналасуды көру, дизайн студиясына оралу және әртүрлі орналасу опцияларын қолданып көру үшін сайтты алдын ала қараңыз.