Escrever um componente pop-up do Power Apps

Ocasionalmente, pode ser necessário exibir uma janela pop-up para o usuário do aplicativo. A Power Apps component framework expõe uma API de pop-up que permite atender a esse requisito. O exemplo a seguir mostra como criar uma janela pop-up que mostre um gráfico de carregador. Esse método pode auxiliar na obtenção de uma experiência de usuário satisfatória em operações de longa execução, em que a IU subjacente está impedida de executar operações.

Inicializar o projeto do seu componente

Para inicializar o projeto do seu componente, siga estas etapas:

1. Inicie o Visual Studio Code.

2. Selecione Terminal e, depois, Novo Terminal.

3. Altere o diretório para sua pasta de origem.

   cd source
   

4. No diretório de origem, crie um diretório denominado Popup-Component.

   md Popup-Component
   

5. Execute o comando a seguir a fim de mudar para o novo diretório.

   cd Popup-Component
   

6. Inicialize o projeto executando o comando a seguir.

   pac pcf init --namespace SampleNamespace --name PopupComponent --template field
   

7. Execute npm install para carregar bibliotecas dependentes no seu projeto.

   npm install
   

8. Abra o projeto no Visual Studio Code executando o comando a seguir.

   code -a .
   

Implementar a lógica do seu componente de código

Para implementar a lógica do seu componente de código, siga estas etapas:

1. Expanda a pasta PopupComponent e abra o arquivo ControlManifest.Input.xml.

2. Substitua todo o manifesto pelo XML a seguir.

   <?xml version="1.0" encoding="utf-8" ?>
   <manifest>
     <control namespace="SampleNamespace" constructor="PopupComponent" version="0.0.1" display-name-key="PopupComponent_Display_Key" description-key="PopupComponent_Desc_Key" control-type="standard">
       <!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
       <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> 
       <resources>
         <code path="index.ts" order="1"/>
         <css path="css/loader.css" order="1" />
       </resources>
     </control>
   </manifest>
   

   Você adiciona os arquivos de suporte encontrados nesse manifesto posteriormente.

3. Abra o arquivo Index.ts.

4. Acima do método de classe de exportação, insira o método de interface a seguir para que você possa expor outros métodos fornecidos pela API pop-up (popupStyle e shadowStyle).

       interface Popup extends ComponentFramework.FactoryApi.Popup.Popup {
       popupStyle: object;
       shadowStyle: object;
   }
   

5. Adicione a variável particular a seguir acima do construtor.

   private _container: HTMLDivElement;
   private _popUpService: ComponentFramework.FactoryApi.Popup.PopupService;
   

6. Adicione a lógica a seguir ao método init do componente.

   this._container = document.createElement('div');
   //============ content of our popup =============
   let popUpContent = document.createElement('div');
   popUpContent.setAttribute("class", "loader");
   
   //============ our Popup object =============
   let popUpOptions: Popup = {
       closeOnOutsideClick: true,
       content: popUpContent,
       name: 'loaderPopup', // unique popup name
       type: 1, // Root popup
       popupStyle: {
           "width": "100%",
           "height": "100%",
           "overflow": "hidden",
           "backgroundColor": "transparent",
           "display": "flex",
           "flexDirection": "column",
           "position": "absolute",
           "margin-top": 28 + "px"
       },
       shadowStyle:{
           position: "absolute",
           width: "100%",
           height: "100%"
       }
   };
   
   this._popUpService = context.factory.getPopupService();
   
   this._popUpService.createPopup(popUpOptions);
   
   container.appendChild(this._container);
   this._popUpService.openPopup('loaderPopup');
   

Adicionar estilo ao seu componente de código

Para adicionar estilo ao seu componente de código, siga estas etapas:

1. Crie uma nova subpasta css na pasta PopupComponent.

2. Crie um novo arquivo loader.css na subpasta CSS.

3. Adicione o conteúdo de estilo a seguir ao arquivo loader.css.

   .loader {
       border: 16px solid #f3f3f3; /* Light grey */
       border-top: 16px solid #3498db; /* Blue */
       border-radius: 50%;
       position: fixed;
       width: 120px;
       height: 120px;
       top:40%;
       left:50%;
       animation: spin 2s linear infinite;
     }
   
     @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
     }
   

4. Selecione Arquivo e Salvar Tudo para suas alterações.

Compilar e executar seu componente

Para compilar e executar seu componente, siga estas etapas:

1. Crie sua solução executando o comando a seguir.

   npm run build
   

2. Após a compilação bem-sucedida, você pode testar o novo componente Popup executando npm start.

   npm start
   

3. Feche a janela do navegador do agente de teste.

4. Retorne ao terminal e interrompa o observador pressionando [CONTROL] + C.

5. Digite Y e pressione [ENTER].

Para testar a funcionalidade de popup, você precisa publicar e hospedar o componente em um ambiente Microsoft Power Platform. Para obter mais informações sobre como publicar componentes de código, consulte "Criar um pacote de solução de componente de código" no módulo Criar um componente do Power Apps.