Componentes de la página

Completado

Después de crear una página, agregue componentes para compilar el diseño e incluir contenido estático y dinámico. Este enfoque de diseño sencillo agrega el código HTML, CSS o html correspondiente a la página sin necesidad de conocer la estructura o sintaxis de estos lenguajes.

Para agregar una sección, seleccione cualquier sección existente en la página, seleccione el signo más (+) o Agregar una sección y, a continuación, elija uno de los diseños de sección disponibles.

Tip

Puede cambiar el diseño de la sección más adelante.

Captura de pantalla de la edición de contenido de Power Pages.

Para agregar un componente, seleccione una sección vacía o un elemento existente donde le gustaría colocar el componente. Utilice el signo más (+) o el botón de desbordamiento (...) para mostrar todos los componentes disponibles y luego seleccione un componente para insertar.

Captura de pantalla de Inserción de una interfaz de componente.

Hay dos tipos de componentes:

  • Los componentes estándar crean el diseño de página y el contenido estático.

  • Los componentes conectados a datos muestran contenido dinámico e interactivo basado en Dataverse.

Todas las secciones y componentes admiten la edición en contexto. Puede editar cualquier sección o componente directamente desde el lienzo. Al seleccionar una sección o un componente, aparece un menú contextual. Puede ajustar las propiedades del elemento seleccionado, como alineación, estilo, color, tamaño, etc. Para obtener más información, vea Personalizar páginas web para obtener más información sobre los componentes disponibles y sus propiedades.

Código fuente

A menudo, necesita elementos que no están disponibles como parte de los componentes de estudio de diseño. Es posible que una página necesite un diseño y un formato más complejos o que necesite más CSS o JavaScript. Puede crear estos requisitos en Visual Studio Code para la Web. Los creadores y desarrolladores profesionales pueden usar este editor para ver y modificar el código fuente de la página y CSS y JavaScript asociados.

Para ver el código fuente de la página, seleccione Editar código en la barra de comandos.

Captura de pantalla de Visual Studio Code para el acceso del editor web disponible en el estudio de diseño.

Al seleccionar Editar código, se le redirigirá a Visual Studio Code para la Web para que realice las modificaciones en la página HTML, CSS o JavaScript. Después de guardar el código fuente, los cambios se sincronizan y aparecen en el lienzo.

Captura de pantalla de un mensaje para sincronizar el contenido de la página una vez completada la edición en Visual Studio Code para web

Advertencia

Es posible que el diseño de la página se vea dañado al introducir sintaxis incorrecto en el código de origen. Cree una copia del código original antes de realizar cambios significativos.

Copilot en el espacio de trabajo Páginas

Copilot se integra en el área de trabajo Pages para ayudarle a crear y rellenar el contenido con mayor rapidez.

Texto generado por IA

Seleccione cualquier componente de texto en el lienzo y, a continuación, seleccione el botón Copilot de la barra de herramientas. Describa el texto que desee y Copilot genere una copia automáticamente. Esta característica ya está disponible con carácter general.

Formulario generado por IA

Al agregar un componente, seleccione Form y, a continuación, elija crear el formulario con Copilot. Describir el formulario en lenguaje natural y Copilot crea automáticamente el componente de tabla, formulario y formulario básico de Dataverse. Esta característica está disponible con carácter general en todas las regiones, excepto DoD.

Formulario multistep generado por IA (versión preliminar)

También puede usar Copilot para crear un formulario de varios pasos. En el sidecar de Copilot, describa el formulario de varios pasos que necesita y Copilot cree un formulario con uno o varios pasos en función de la descripción. Aparece una vista previa del formulario en el lienzo para que lo revise antes de agregarlo a la página. Si las tablas pertinentes ya existen en Dataverse, Copilot sugiere usarlas; de lo contrario, se crea automáticamente una nueva tabla.

Asistencia para rellenar formularios de IA (versión preliminar)

Al agregar un componente de formulario a una página, puede habilitar la asistencia para rellenar formularios de IA para ayudar a los usuarios del sitio a rellenar formularios con mayor facilidad. Esta característica extrae información relevante de los datos adjuntos cargados y rellena automáticamente los campos de formulario. También permite a los usuarios reescribir entradas de texto de varias líneas mediante la asistencia de borrador de IA. Habilite esta opción en la configuración del componente de formulario.

Agregar una sección con Copilot

Usa el sidecar de Copilot para describir una sección y haz que Copilot la añada a la página.

Código generado por IA (versión preliminar)

Al abrir una página en Visual Studio Code para la Web mediante Edit code, puede usar Copilot para generar código HTML, JavaScript y CSS mediante lenguaje natural. Describir el comportamiento que desee en el panel de chat de Copilot y Copilot genera un fragmento de código que puede copiar o insertar directamente. También puede seleccionar código existente y usar la opción Explicar para obtener una explicación en lenguaje simple de lo que hace.

Note

Copilot para la generación de código está optimizado para lenguajes compatibles con Power Pages (HTML, JavaScript, CSS) y marcos como Bootstrap y jQuery. Compruebe que los nombres de tabla y columna generados son correctos antes de usar el código en el sitio.

Componente de búsqueda con IA generativa (versión preliminar)

Puede agregar un componente de búsqueda a cualquier página para permitir que los usuarios del sitio busquen el sitio mediante consultas de lenguaje natural. El componente incluye una barra de búsqueda y un resumen generado por IA de los resultados. Para usar la versión con tecnología de IA, primero debe habilitar La búsqueda de IA generativa para el sitio. Agregue el componente desde el panel de componentes en el área de trabajo Páginas.

Características de IA en una lista (versión preliminar)

Los componentes de la lista de datos admiten dos mejoras con tecnología de inteligencia artificial para los usuarios del sitio:

  • Resumen de IA : genera automáticamente resúmenes concisos y visualizaciones de gráficos de los datos de la lista. Habilite esta opción al agregar una lista nueva o actívela en una lista existente seleccionando Editar lista y activando Resumen de IA para la lista.

  • Búsqueda en lenguaje natural : permite a los usuarios filtrar y buscar datos en la lista mediante consultas conversacionales. Habilite esta opción en la configuración de lista en Más opciones>Habilitar búsqueda en esta lista>Buscar con lenguaje natural.

Para obtener más información, consulte Agregar características de IA en una lista en la documentación de Power Pages.