PCF – Ejemplo Inicial

Guía de creación del Proyecto

Partimos de un entorno vacío, solo necesitaremos una tabla con una columna tipo Texto.

1. Crea una carpeta para el proyecto local y ábrela con VSCode desde el menú contextual.
2. Abre la terminal en VSCode.
3. Inicializa el componente con el comando pac pcf init --namespace --name --template.
4. Instala las dependencias del proyecto con npm install.
5. Ahora tendrás la estructura inicial creada. Vamos a revisar cómo está formado el archivo de manifiesto del control:
   • Etiquetas de control en la parte superior.
   • Propiedades.
6. En el archivo index.ts, crea la clase que implementa un control estándar. Observa las cuatro funciones básicas y los parámetros de init.
7. Una vez creado el proyecto, ya estarías listo para publicarlo, pero estará vacío. Antes, vamos a visualizarlo localmente; al guardar, se recompilarán los cambios y se reflejarán directamente en la pantalla.
8. Crea un elemento HTML y agrégalo dentro del contenedor del PCF.
9. Dentro del método init, asigna un valor a la variable texto que acabamos de definir usando context.parameters.nombrepropiedad.raw.
10. Crea un elemento HTML de tipo DIV y modifica su contenido para que tenga el valor de la variable texto.
11. Finalmente, añade el DIV al contenedor usando append, ya que el INIT recibe un control estándar.
12. El método init se ejecuta solo al inicio, por lo que no es posible cambiar el valor del texto en tiempo real. Para eso, tenemos el método updateView, que se llama cuando cambia algún valor en el conjunto de propiedades del componente.
13. En updateView, iguala el valor de la variable a la propiedad y asigna nuevamente su contenido al innerHTML del DIV.
14. Ya estamos listos para compilar, publicar y usar el componente.
15. Ejecuta npm run build para compilar. Luego, crea el perfil de publicación, para lo cual necesitarás la URL del entorno e iniciar sesión (pac auth create --url <url-entorno>).
16. Para visualizarlo, añádelo tanto a un formulario de un model-driven como a una aplicación de canvas.
17. En este caso, agrégalo a una columna de tipo texto llamada «COMENTARIO» y recuerda que si el valor de la propiedad está vacío, se mostrará «COMENTARIO POR DEFECTO».
18. Para poder añadir cualquier PCF a una aplicación de canvas, habilita una característica del entorno: ve al Centro de administración > Entorno > Configuración.
19. Verás que es muy similar al componente de texto de Microsoft, en el que editamos la propiedad «TEXTO» y añadimos «HOLA MUNDO», como en nuestro PCF. Si presionas «PLAY», habrás alcanzado el objetivo.