Extensibilidade da experiência do usuário

  • 5 minutos

É comum envolver os desenvolvedores quando a experiência de usuário desejada é difícil ou impossível de ser obtida com o uso de uma abordagem low code. Duas das abordagens mais comuns para um desenvolvedor aperfeiçoar a experiência do usuário são criar um componente de código do Power Apps Component Framework ou implementar um script de cliente. Os componentes de código permitem implementar um visual personalizado que pode ser usado por aplicativos de tela ou baseados em modelo, assim como qualquer controle pronto para uso. O script de cliente não pretende ser visual, mas foi criado para implementar regras de negócios de forma programática. Os scripts de cliente só se aplicam a aplicativos baseados em modelo. Ambas as técnicas seguem padrões e modelos de objetos prescritivos que você deve conhecer ao usar uma das duas para extensibilidade. No restante deste tópico, exploraremos mais detalhadamente as duas opções.

Power Apps Component Framework

Os componentes do código são implementados usando HTML, CSS e TypeScript. Embora não seja necessário usar uma estrutura de interface do usuário específica, o React é uma opção popular.

Diagrama de uma coleção de componentes de exemplo.

Para criar um componente de código, você precisa implementar uma interface que forneça uma maneira consistente para o aplicativo de hospedagem interagir com seu componente. Para começar a desenvolver um componente de código que implemente essa interface, use a ferramenta CLI (interface de linha de comando) do Power Platform para inicializar os arquivos de componente com base em um modelo de uma coluna ou um conjunto de dados. Esse modelo contém espaços reservados para a implementação de interface necessária.

A ferramenta CLI cria um arquivo de manifesto que descreve quais arquivos fazem parte do componente como recursos. O manifesto também identifica propriedades disponíveis para uso pelo aplicativo que hospeda o componente. No exemplo a seguir, uma propriedade companyName foi definida.

Captura de tela da propriedade no manifesto.

Quando este componente for usado por criadores de aplicativos, eles terão opções para definir estaticamente um valor para o nome da empresa ou associá-lo de forma dinâmica a uma das colunas de dados disponíveis no aplicativo. As propriedades permitem que o aplicativo e o componente se comuniquem sobre os dados sem que o aplicativo precise entender a implementação do componente.

O manifesto também permite habilitar recursos. Quando um recurso é habilitado, marcando-o como obrigatório no manifesto, a lógica do componente do código pode usar a API nativa associada ao recurso. Por exemplo, a habilitação do recurso Device.captureAudio permite que o controle de código invoque o microfone do dispositivo para gravar áudio.

<feature-usage> <uses-feature name="Device.captureAudio" required="true" /> <uses-feature name="Device.captureImage" required="true" /> <uses-feature name="Device.captureVideo" required="true" /> <uses-feature name="Device.getBarcodeValue" required="true" /> <uses-feature name="Device.getCurrentPosition" required="true" /> <uses-feature name="Device.pickFile" required="true" /> <uses-feature name="Utility" required="true" /> <uses-feature name="WebAPI" required="true" /> </feature-usage>

O runtime do aplicativo gerencia o ciclo de vida e a comunicação com o componente de código hospedado. Isso é realizado pela classe de componente de código que implementa a interface StandardControl.

export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}

Essa interface exige a implementação dos seguintes métodos:

  • init: usado para inicializar a instância do componente. Os componentes podem iniciar chamadas de servidor remoto e outras ações de inicialização.

  • updateView: esse método será chamado quando um valor do conjunto de propriedades for alterado. Isso inclui valores de coluna, conjuntos de dados, valores globais, como altura e largura do contêiner, status offline, valores de metadados de componente, como rótulo, visível etc.

  • destroy: esse método é invocado quando o componente precisa ser removido da árvore DOM. Use-o para a limpeza e para liberar memória que o componente esteja usando.

  • getOutputs (opcional): ele é chamado pela estrutura antes de um componente receber os novos dados. Retorna um objeto baseado na nomenclatura definida no manifesto, esperando objetos para a propriedade marcada como limitada.

Os componentes de código só exigem a implementação do mínimo necessário para permitir a comunicação consistente e a experiência com o aplicativo de hospedagem.

Script de cliente

O script de cliente permite que você use JavaScript em aplicativos baseados em modelo do Power Apps para implementar regras de negócios. O script de cliente deve ser usado como uma alternativa quando as regras de negócios declarativas não atendem aos requisitos. O script de cliente é executado em um formulário baseado em modelo em resposta aos seguintes eventos do formulário:

  • Carregamento de formulário

  • Alterações de dados em uma coluna

  • Salvamento de formulário

É possível também configurar um botão na barra de comandos para invocar um script de cliente quando pressionado.

Apesar de você estar escrevendo a sua lógica no JavaScript, lembre-se de que, embora o formulário seja apenas HTML, você não tem permissão para manipular diretamente o conteúdo do formulário. O script de cliente fornece um modelo de objeto com chamadas de método para interagir com os vários componentes do formulário. Isso garante que a lógica de negócios seja isolada de alterações no layout ou HTML específico usado na renderização do formulário.

Este é um exemplo de script de cliente que processa o carregamento de formulários e a alteração de coluna.

// A namespace defined for the sample code
// As a best practice, you should always define 
// a unique namespace for your libraries
var Sdk = window.Sdk || {};
(function () {
    // Define some global variables
    var myUniqueId = "_myUniqueId"; // Define an ID for the notification
    var currentUserName = Xrm.Utility.getGlobalContext().userSettings.userName; // get current user name
    var message = currentUserName + ": Your JavaScript code in action!";

    // Code to run in the form OnLoad event
    this.formOnLoad = function (executionContext) {
        var formContext = executionContext.getFormContext();

        // display the form level notification as an INFO
        formContext.ui.setFormNotification(message, "INFO", myUniqueId);

        // Wait for 5 seconds before clearing the notification
        window.setTimeout(function () { formContext.ui.clearFormNotification(myUniqueId); }, 5000);
    }

    // Code to run in the attribute OnChange event 
    this.attributeOnChange = function (executionContext) {
        var formContext = executionContext.getFormContext();

        // Automatically set some column values if the account name contains "Contoso"
        var accountName = formContext.getAttribute("name").getValue();
        if (accountName.toLowerCase().search("contoso") != -1) {
            formContext.getAttribute("websiteurl").setValue("https://www.contoso.com");
            formContext.getAttribute("telephone1").setValue("425-555-0100");
            formContext.getAttribute("description").setValue("Website URL, Phone and Description set using custom script.");
        }
    }

    // Code to run in the form OnSave event 
    this.formOnSave = function () {
        // Display an alert dialog
        Xrm.Navigation.openAlertDialog({ text: "Record saved." });
    }
}).call(Sdk);

Você pode seguir a orientação completa deste exemplo para obter especificações sobre como ele se conecta ao formulário.

Com os scripts de cliente, um desenvolvedor pode tornar um formulário mais acessível por um usuário ocultando e mostrando colunas apropriadas, validando dados e outras tarefas comuns necessárias para melhorar a experiência do usuário.