Como: Criar um componente de modelo web

Criar um componente de modelo web permite-lhe criar um componente configurável e repetível que pode ser personalizado para cada instância específica utilizada.

Neste tutorial, irá aprender a:

• Definir um manifesto e especificar os parâmetros a transmitir para um componente de modelo web
• Criar um componente de modelo web
• Adicionar o componente de modelo web a uma página web
• Configurar os parâmetros utilizando o estúdio do estruturador

Pré-requisitos

• Uma subscrição ou versão de avaliação do Power Pages. Obter uma avaliação gratuita do Power Pages.
• Um site do Power Pages criado. Criar um site do Power Pages.

Criar um componente de modelo web

Nos passos abaixo, criámos um componente de modelo web que apresenta os registos de comentários a partir de uma tabela do Microsoft Dataverse em formato de esquema de cartão, com um botão para fornecer uma revisão. É possível definir o número de cartões que podem ser configurações.

Criar uma tabela do Dataverse a utilizar no componente de modelo web

No nosso exemplo, criámos uma tabela do Dataverse chamada Revisão para o nosso processo. Para mais informações sobre como criar tabelas do Dataverse, consulte Como criar e modificar tabelas do Dataverse utilizando a área de trabalho Dados. Pode modificar estes passos para refletir os seus próprios processos de negócio.

1. Aceder a Power Pages.

2. Selecione um local onde pretende adicionar um componente de modelo web e selecione Editar.

3. No estúdio de design, selecione a área de trabalho Dados.

4. Crie uma tabela do Dataverse chamada Revisão com as seguintes propriedades:

   Gorjeta

   • A tabela seguinte é apenas um exemplo, pode criar tabelas para corresponderem aos seus próprios processos de negócio.

   Nome da coluna	Tipo de dados de coluna
   Nome	Texto (coluna nome existente)
   Conteúdo	Várias linhas de texto
   Rating	Número Intieor (valor mínimo: 1, valor máximo: 5)

   

5. Adicionar alguns registos de amostra à tabela.

6. Na área de trabalho Segurança, adicione uma permissão de tabela para permitir o acesso de leitura e atribuir funções da Web apropriadas.

Criar modelo web com manifesto

1. Na aplicação Gestão de Portais, na secção Conteúdo, escolha Modelos Web e selecione Novo no menu principal para criar um novo modelo web.

2. Introduza revisões para o Nome (ou outro valor que reflita a sua necessidade).

3. Copie e cole o seguinte código para o campo Origem do registo de modelo web, substitua os valores prefixados com cr54f com o prefixo utilizado no seu próprio ambiente.

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

Adicionar componente de modelo web a uma página web

Depois de criar o componente de modelo web, pode adicioná-lo a uma página web.

1. No estúdio do estruturador do Power Pages, selecione a página à qual pretende adicionar o componente de modelo web.

2. Selecione Editar Código que abre o Visual Studio Code para a web para a página web.

3. Introduza a seguinte declaração de inclusão que referencia o modelo web que criou anteriormente, pode substituir o nome pelo nome do seu próprio modelo web:

   {% include "reviews" %}

4. Selecione CTRL-S para guardar o código. Regresse ao estúdio do estruturador e selecione Sincronizar. Será apresentada uma pré-visualização do componente na sua página web.

5. Selecione Editar componente personalizado e pode configurar os parâmetros que estão definidos no manifesto do componente de modelo web que criou acima.

   

6. Pré-visualize o local para ver o esquema, regresse ao estúdio do estruturador e experimente com diferentes opções de esquema.