Escribir un componente Power Apps emergente

Completado

De vez en cuando, puede que tenga que mostrar una ventana emergente al usuario de su aplicación. Power Apps Component Framework muestra una API emergente que permite cumplir este requisito. El siguiente ejemplo mostrará cómo crear una ventana emergente que muestre un gráfico del cargador. Este método puede ayudarle a lograr una experiencia de usuario satisfactoria en operaciones de larga duración en la que la IU subyacente no puede realizar operaciones.

Nota

El servicio emergente de Power Apps Component Framework solo es compatible con aplicaciones basadas en modelo de Power Apps.

Inicializar su proyecto de componente

Para inicializar el proyecto de componente, siga estos pasos:

1. Inicie Visual Studio Code.

2. Seleccione Terminal y, luego, Nuevo terminal.

3. Cambie el directorio a su carpeta de origen.

   cd source
   

4. Desde el directorio de origen, cree un directorio llamado Popup-Component.

   md Popup-Component
   

5. Ejecute el siguiente comando para cambiar al directorio nuevo.

   cd Popup-Component
   

6. Inicialice el proyecto ejecutando el comando siguiente.

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

7. Ejecute npm install para cargar bibliotecas dependientes en su proyecto.

   npm install
   

8. Abra el proyecto en Visual Studio Code mediante la ejecución del comando siguiente.

   code -a .
   

Implementar la lógica del componente del código

Para implementar su lógica de componente de código, siga estos pasos:

1. Expanda la carpeta PopupComponent y abra el archivo ControlManifest.Input.xml.

2. Reemplace todo el manifiesto con el siguiente XML.

   <?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>
   

   Puede agregar los archivos de soporte que se encuentran en este manifiesto más adelante.

3. Abra el archivo index.ts.

4. Encima del método de export class, inserte el siguiente método de interfaz para que pueda mostrar otros métodos adicionales proporcionados por la API emergente (popupStyle y shadowStyle).

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

5. Agregue la siguiente variable privada sobre el constructor.

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

6. Agregue la lógica siguiente al método init de sus componentes.

   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');
   

Agregar estilo al componente de código

Para agregar estilo al componente de código, siga estos pasos:

1. Cree una nueva subcarpeta css en la carpeta PopupComponent.

2. Cree un nuevo archivo loader.css en la subcarpeta CSS.

3. Agregue el siguiente contenido de estilo al archivo 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. Seleccione Archivo y Guardar todo para guardar todos los cambios.

Crear y ejecutar el componente

Para crear y ejecutar el componente, siga estos pasos:

1. Compile su solución ejecutando el comando siguiente.

   npm run build
   

2. Después de realizar la compilación correctamente, puede probar su nuevo componente emergente ejecutando npm start.

   npm start
   

3. Cierre la ventana del explorador de la herramienta de ejecución de pruebas.

4. Vuelva al terminal y presione [CONTROL] + C para detener el monitor.

5. Escriba Y y, luego, presione [ENTER].

Nota

Este componente del cargador está vinculado a un campo de texto. Para usar el componente en una aplicación basada en modelo, puede resultar útil marcar este campo como oculto si desea usarlo en un formulario.

Para probar la funcionalidad emergente, deberá publicar y alojar el componente en un entorno de Microsoft Power Platform. Para obtener más información sobre cómo publicar componentes de código, consulte "Crear un paquete de soluciones de componente de código" en el módulo Construir un componente de Power Apps.

Continuar