PCF – Slider

Guía de creación del Proyecto

Partimos de la misma tabla y una aplicación model-driven para interactuar luego con el formulario al que asignemos este PCF.

1. Crea la carpeta de proyecto local y ábrela con Visual Studio. Luego, abre la terminal.
2. Inicializa el proyecto con el nombre «PCFslider».
3. En esta ocasión, modifica las propiedades y añade dos más para controlar los valores mínimos y máximos que puede tomar el slider de manera dinámica. Ten en cuenta que el tipo de dato ahora es múltiple; para esto, define los posibles tipos con of-type-group.
4. Cambia el modo de uso de cada propiedad: la primera (el valor) estará vinculada a una columna, mientras que el resto se utilizarán exclusivamente como inputs.
5. Crea y añade el archivo CSS. Es importante mencionar que el renderizado de las aplicaciones de canvas ya incluye determinados archivos CSS que afectan a los elementos HTML que creemos. Por ello, tendrás que sobrescribir los valores CSS del elemento en cuestión, en este caso, un input:range.
6. Define las variables e inicializa los elementos HTML necesarios.
7. Si observas errores en las propiedades, es porque aún no has compilado el manifiesto con los cambios. Usa el comando npm run refreshtypes, que regenera las interfaces de inputs y outputs para utilizarlas en el código, sin necesidad de compilar.
8. Añade el resto de funciones para completar el PCF.
9. En updateView, actualiza el slider y el texto que indica su valor.
10. Usa la función heredada getOutputs, que se llama antes de recibir un nuevo dato tras mover el slider.
11. En destroy, es buena práctica eliminar todos los eventListeners, ya que se llama antes de que el elemento se elimine del DOM de la página actual.
12. Visualiza el componente localmente antes de publicarlo para asegurarte de que se ve como deseas. Ten en cuenta que puede haber diferencias entre las clases CSS en una aplicación de canvas y en el depurador local.
13. Finalmente, publica el componente y úsalo en un formulario de esta tabla.