Compartir vía


Tutorial: usar componentes de código en portales

Nota

A partir del 12 de octubre de 2022, los portales de Power Apps son Power Pages. Más información: Microsoft Power Pages ya está disponible para el público en general (blog)
Pronto migraremos y fusionaremos la documentación de los portales de Power Apps con la documentación de Power Pages.

En este tutorial, creará un componente de ejemplo utilizando Power Apps component framework. Empaquetará este componente en un entorno de Dataverse y agregará el componente a una aplicación basada en modelo. Luego configurará portales de Power Apps para agregar el componente a un formulario básico y agregar el formulario básico a una página web. Finalmente, visitará la página web de los portales e interactuará con el componente.

Requisitos previos

  • La versión de su portal debe ser 9.3.3.x o superior.
  • Su paquete del portal de inicio debe ser 9.2.2103.x o superior.

Nota

Este tutorial se basa en el tutorial de Power Apps component framework que lo guía a través de la creación de TSLinearInputComponent para la tabla Oportunidad del formulario Principal. También puede utilizar cualquier componente nuevo o existente y cualquier otra tabla para este tutorial. En este caso, asegúrese de utilizar su componente y formulario cuando siga los pasos de este tutorial.

Paso 1. Crear el primer componente

Para crear un componente de ejemplo, siga los pasos del tutorial Crear su primer componente. Al final de este tutorial, tendrá el componente llamado TSLinearInputComponent empaquetado y cargado en su entorno de Dataverse.

Paso 2. Agregar el componente de código a un campo en una aplicación basada en modelos

Ahora que tiene TSLinearInputComponent cargado en su entorno de Dataverse, siga los pasos del tutorial Agregar un componente de código a un campo en aplicaciones basadas en modelo para agregar el componente a la tabla Oportunidad del formulario Principal.

Paso 3. Verificar la aplicación basada en modelo con el nuevo componente

Puede actualizar una aplicación existente basada en modelos o crear una nueva aplicación con el formulario al que agregó el componente. Por ejemplo, la siguiente imagen muestra cómo el formulario Principal de la tabla Oportunidad se ve cuando se usa el componente de código en este tutorial.

Control deslizante agregado al campo Importe del presupuesto en un formulario de la aplicación basada en modelo.

Paso 4. Agregar componente de código a un formulario básico en portales

En este paso, creará un nuevo formulario básico en portales y luego agregará el componente al formulario básico creado. En su lugar, también puede utilizar un formulario básico existente.

Paso 4.1. Crear un formulario básico nuevo

  1. Abra la aplicación Administración del portal.

  2. En el panel izquierdo, en Contenido, seleccione Formularios básicos.

  3. Seleccione Nuevo.

  4. Escriba el Nombre. Por ejemplo, Formulario básico de oportunidades con componente de código.

  5. Seleccione Nombre básico como Oportunidad.

  6. Para Nombre del formulario, seleccione el formulario de la aplicación basada en modelo al que agregó el componente de código anteriormente en este tutorial.

  7. Seleccione el Nombre de pestaña.

  8. Seleccione el Sitio web del portal.

    Configurar un formulario básico usando la aplicación Administración de portales.

  9. Seleccione Guardar y cerrar.

Paso 4.2. Agregar un componente de código al formulario básico

  1. Abra la aplicación Administración del portal.

  2. En el panel izquierdo, en Contenido, seleccione Formularios básicos.

  3. Seleccione el formulario básico que ha creado en el paso anterior.

  4. Seleccione Relacionadas.

  5. Seleccione Metadatos del formulario básico.

  6. Seleccione Nuevos metadatos del formulario básico.

  7. Seleccione Tipo como Atributo.

  8. Seleccione Nombre lógico del atributo como Importe presupuestado (budgetamount).

    Nombre lógico del atributo Importe del presupuesto.

  9. Escriba Etiqueta. Por ejemplo, Importe del presupuesto.

  10. Para Estilo del control, seleccione Componente de código.

    Estilo del control.

  11. Seleccione Guardar y cerrar.

Paso 5. Crea una página web en portales con el formulario básico

  1. Abra el portal en Power Apps portals Studio.

  2. En la esquina superior izquierda, seleccione Nueva página.

  3. Seleccione En blanco.

  4. En el panel de propiedades del lado derecho, actualice el nombre de la página web. Por ejemplo, Oportunidades.

  5. Actualice la dirección URL parcial. Por ejemplo, Oportunidades.

  6. Expanda Permisos.

  7. Deshabilite Página disponible para todos.

  8. Seleccione los roles web a los que se les debe permitir el acceso a esta página.

  9. En el editor de página, debajo de la sección Encabezado, seleccione la sección Columna.

  10. En el panel izquierdo, seleccione Componentes.

  11. En Componentes del portal, seleccione Formulario.

  12. En el panel de propiedades del lado derecho, seleccione Utilizar existente.

  13. En Nombre, seleccione el formulario básico que creó anteriormente en este tutorial.

    Sugerencia

    Si no ve el formulario disponible, pruebe Configuración de sincronización para sincronizar cambios desde Dataverse.

  14. En la esquina superior derecha, seleccione Examinar sitio web.

La página web ahora mostrará el formulario básico para la tabla Oportunidades con el componente de código como el control deslizante, similar a cómo aparece usando la aplicación basada en modelo para el mismo formulario.

Ejemplo de vista previa del control deslizante Importe del presupuesto en la página de portales.

Pasos siguientes

Información general: Usar componentes de código en portales

Consultar también

Información general sobre Power Apps component framework
Crear el primer componente
Agregue componentes de código a un campo o tabla en aplicaciones basadas en modelos

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).