O designer de formulário no espaço de trabalho Dados é idêntico ao usado para aplicativos baseados em modelo. Embora opere com base no princípio "o que você vê é o que você obtém" (WYSIWYG), o que é exibido é a versão do aplicativo baseado em modelo, não a versão do Power Pages.
Outra consideração é que quando se trata de ajustar o formulário além do layout básico de 2 ou 3 colunas, você fica com escolhas restritas.
Power Pages se destaca como uma excelente solução low-code para construção de sites. Mas a sua versatilidade não para por aí; os desenvolvedores profissionais podem se aprofundar com melhorias usando HTML, CSS e a API da Web Power Pages.
Ao aproveitar essas tecnologias, torna-se viável criar um formulário HTML personalizado para leitura, gravação e atualização de dados no Microsoft Dataverse. Isso lhe dá autonomia para moldar e configurar o formulário de acordo com suas preferências, contornando as limitações inerentes à configuração do aplicativo baseado em modelo.
A metodologia pró-código é particularmente benéfica para situações que exigem especificações distintas ao inserir informações no Dataverse.
Para construir um formulário para geração de novos registros, siga estes passos:
-
Crie um modelo da Web personalizado : isso serve como base para o seu formulário.
-
Integrar um formulário HTML : Esta será a interface principal para os usuários inserirem dados.
-
Ajustar configurações do site : especifique a tabela e as colunas relevantes para sua captura de dados.
-
Implementar o código necessário :
- Como resposta à ação 'enviar' no formulário HTML, extraia os dados de entrada e molde-os em um objeto.
- Encaminhe este objeto para o Dataverse utilizando o Power Pages WebAPI.
-
Incorpore estilo CSS : refine a aparência visual do seu formulário para torná-lo mais amigável e esteticamente agradável.
Criando um modelo da web personalizado
Para criar um modelo da web personalizado, um modelo de página e uma página da web, confira minha postagem recente usando Código do Visual Studio ou confira a documentação oficial em modelos web .
Criando o formulário HTML para capturar dados
Neste exemplo, construiremos um modelo web personalizado empregando Visual Studio Code.
Inicialmente, precisamos estabelecer um formulário HTML básico, alinhando-o com os nomes lógicos dos campos da tabela do Dataverse destinados à criação ou atualização. Não é obrigatório que sejam iguais, mas contribui para a clareza e organização.
Quem precisa de um copiloto?
É aqui que ferramentas de IA como o ChatGPT são úteis. Você pode fornecer os parâmetros e solicitar que o ChatGPT gere um formulário HTML regular para você.
Segue-se um exemplo de formulário HTML utilizado para criar um novo formulário de entidade para uma tabela na tabela do Dataverse.
<form id="myForm">
<label for="docs_name">Name:</label>
<input type="text" id="docs_name" name="docs_name" required><br>
<label for="docs_description">Description:</label>
<textarea id="docs_description" name="docs_sessiondescription" required></textarea><br>
<label for="docs_dateandtime">Data e hora:</label>
<input type="datetime-local" id="docs_dateandtime" name="docs_sessiondateandtime" obrigatório><br>
<label for="docs_duration">Duração (minutos):</label>
<input type="number" id="docs_duration" name="docs_duration" obrigatório><br>
<input type="submit" value="Enviar">
</form>
Defina as configurações do site para usar a API Web
De acordo com a documentação da Microsoft, você precisará adicionar o apropriado configurações do site para permitir que a API Web crie novos registros no Dataverse. Você também precisará certificar-se de que as permissões de tabela corretas também estejam configuradas. No meu exemplo, escolho * para todos os campos, em um ambiente de produção, escolha apenas os campos necessários nas chamadas WebAPI, além de limitar o acesso aos dados usando permissões de tabela.
Crie código Javascript para criar registros usando API Web em Power Pages
Agora que temos nosso formulário, como podemos enviar as informações para o Microsoft Dataverse? É aqui que WebAPI de páginas avançadas vem a calhar.
Você precisará adicionar o código auxiliar ( wrapper AJAX ) ao seu site e referenciá-lo no seu modelo da web (o código-fonte completo mostra isso).
Aqui está um código da API Web do Power Pages que pegará os dados adicionados ao formulário e criará um novo registro no Dataverse quando a ação de envio do formulário for chamada:
$('#myForm').submit(function(event) {
event.preventDefault(); // Prevent the default form submission
// Create a new record object from form data
var record = {};
record.docs_name = $('#docs_name').val(); // Text
record.docs_description = $('#docs_description').val(); // Multiline Text
record.docs_dateandtime = $('#docs_dateandtime').val(); // Date Time
record.docs_duration = parseInt($('#docs_duration').val()); // Whole Number
// Call the WebAPI helper function to create the record
webapi.safeAjax({
type: "POST",
contentType: "application/json",
url: "/_api/docs",
data: JSON.stringify(record),
success: function (data, textStatus, xhr) {
var newId = xhr.getResponseHeader("entityid");
console.log(newId);
// Reset the form after successful submission
$('#myForm')[0].reset();
alert("Registro adicionado com sucesso."); //Adicione alertas porque eles são muito elegantes :)
},
erro: função (xhr, textStatus, errorThrown) {
console.log(xhr);
}
});
}
Embora o ChatGPT possa produzir prontamente esse código, o Construtor REST do Dataverse oferece atualmente um método mais preciso para essa finalidade, garantindo que o código seja formatado corretamente.
Você pode acessar o arquivo de código completo do modelo da web, chamado webapi-create-example.webtemplate.source.html, na minha página do GitHub .
A função do código é ativada quando o formulário é enviado. Ele captura os dados de entrada e os incorpora em um novo objeto de registro.
Esse objeto é então enviado ao Dataverse por meio da API Web. Se for bem-sucedido, o formulário será redefinido.
Pode parecer um processo extenso apenas adicionar um registro ao Dataverse, mas esse método oferece um controle incomparável. Ele permite uma série de funcionalidades personalizadas que não são alcançáveis com os formulários padrão baseados em modelos.
Um toque de CSS para fazer o formulário parecer
O código de estilo deve ser adicionado (de preferência como um arquivo CSS personalizado, mas eu o incorporei no modelo da web por preguiça).
Costurando tudo junto
Depois que o código for escrito, crie um modelo de página e use-o para criar uma página da web. Lembre-se de criar e atribuir permissões de tabela para permitir que os usuários criem novos registros.
O formulário deverá aparecer no site e os usuários com as permissões apropriadas deverão poder adicionar registros.
Este exemplo mostra o poder disponível para desenvolvedores profissionais para estender o Power Pages além dos recursos de baixo código.
