![\"SPFX](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/07\/SPFX-Extensions-Como-crear-un-Campo-Personalizado.png\")
<\/p>\n<\/p>\n
El SharePoint FrameWork<\/strong> ha venido para quedarse en nuestros desarrollos. Si el a\u00f1o pasado Microsoft ya dio un golpe sobre la mesa anunciando el SPFX<\/strong> y las herramientas a utilizar, este a\u00f1o en el Summit<\/em> empezaron a mostrar todas las novedades y algunas de ellas ya est\u00e1n en Preview P\u00fablicas, por lo que podemos empezar a probarlas y ver los escenarios en los que encajan.<\/p>\n Una de las novedades en las que m\u00e1s inter\u00e9s tenemos los desarrolladores, es la que Microsoft ha llamado:\u00a0\u00abSharePoint Framework Extensions\u00bb<\/a><\/p>\n <\/p>\n El SPFX lo \u00fanico que pod\u00eda realizar hasta la fecha, era la implementaci\u00f3n de WebParts en Cliente, pero aun hay muchos aspectos que no est\u00e1n abordando: Custom Actions, modificaci\u00f3n de campos personalizados (JSLink, XSLT, etc.. ) o c\u00f3mo a\u00f1adir nuestras personalizaciones en las listas.<\/p>\n Pues bien, todos estos elementos son los que han anunciado que se incorporar\u00e1n al SPFX. Como hemos dicho, de momento est\u00e1n en Preview y no se pueden utilizar en entornos productivos. En el art\u00edculo de hoy vamos a ver c\u00f3mo empezar con las Extensiones \u00abField Customizer\u00bb o Campos Personalizados.<\/strong><\/p>\n Todo desarrollador de SharePoint que se precie se ha topado con el requerimiento de modificar el estilo o el comportamiento de un campo de una lista de SharePoint. En versiones anteriores a 2013 se hacia de una forma \u00abartesanal\u00bb, entrando en el formulario y a\u00f1adiendo nuestro c\u00f3digo de la mejor manera posible.<\/p>\n En la versi\u00f3n 2013 se introdujo un nuevo concepto para intentar gobernar esta \u00abinyecci\u00f3n\u00bb de c\u00f3digo. El invento se llamo JSLink. <\/strong><\/p>\n Con JSLink se pueden hacer cosas muy chulas, pero en algunos escenarios su comportamiento no es el deseado y se producen errores que no se pueden controlar<\/strong>. Ahora, con la salida de las SPFX, el equipo de producto ha querido estandarizar en la medida de lo posible el desarrollo con el mismo tooling<\/em> de herramientas y lenguaje de programaci\u00f3n: Visual Studio Code, NodeJS, TypeScript, Gulp, Yeoman, etc.<\/p>\n Manos a la obra\u00a0<\/strong><\/p>\n Utilizando la plantilla de Yeoman habilitada para ello pondremos la siguiente instrucci\u00f3n:<\/p>\n NOTA<\/strong>: En el equipo d Una vez ejecutamos la instrucci\u00f3n Yo seleccionaremos la opci\u00f3n Extensions(Preview). Dentro de esta pantalla tendremos tres opciones: Application Customizer, Field Customizer, ListView Command Set. En nuestro caso seleccionaremos Field Customizer<\/strong> (las otras dos opciones ya las veremos en los siguientes art\u00edculos).<\/p>\n A continuaci\u00f3n, nos indicar\u00e1n que vamos a utilizar ReactJS o ning\u00fan framework JavaScript. Este es uno de los primeros cambios respecto a los WebParts, en los que ten\u00edamos m\u00e1s frameworks JS disponibles.<\/p>\n Esto no quiere decir que no se puedan utilizar, sin embargo, todos los esfuerzos que el equipo de producto hace en SPFX, es utilizando ReactJS. Respecto a \u00a0los WebParts, mi opini\u00f3n es que ReactJS no es la \u00fanica alternativa posible, <\/strong>por lo tanto,\u00a0<\/strong>para equipos de desarrollo que est\u00e9n utilizando otro framework, no es necesario el aprendizaje de ReactJS.<\/p>\n En el caso de las Extensions, creo que \u00a0sobre una ingenier\u00eda de los mismos es perjudicial y por eso mismo, la utilizaci\u00f3n de librer\u00edas ligeras se adapta mejor a las necesidades que podamos tener<\/strong>. Por este motivo, ReactJS puede ser una opci\u00f3n mejor que utilizar otros frameworks \u00a0m\u00e1s pesados.<\/p>\n Una vez tenemos creada la plantilla, vamos a la ubicaci\u00f3n desde donde se ha creado la extensi\u00f3n, y observamos que se ha creado una carpeta con su nombre \u00a0y el de su fichero typescript.<\/p>\n Este fichero ts, tiene una clase que hereda de BaseFieldCustomizer<IProps> (esta es la clase que se ha creado para la inyecci\u00f3n de las extensions). En esta clase para nuestros desarrollo tendremos que sobreescribir tres m\u00e9todos onInit, onRenderCell y OnDisposeCell.<\/strong><\/p>\n En nuestro ejemplo, en el m\u00e9todo onRenderCell (cuando se renderice el campo) a\u00f1adiremos nuestro desarrollo. En nuestro campo vamos a renderizar un campo en formato de Slider.<\/p>\n Para ello pondremos este c\u00f3digo<\/strong><\/p>\n Este c\u00f3digo \u00a0obtiene el valor de la celda, consigue el identificador del elemento y crea un elemento de React llamado SliderField.<\/strong> Este componente tiene el siguiente c\u00f3digo:<\/p>\n Para los WebParts, uno de los grandes avances fue que dispon\u00edamos de un entorno en local en el cual pod\u00edamos hacer nuestras pruebas sin tener instalado un SharePoint, cosa que \u00a0facilita mucho la vida a los desarrolladores. Ahora bien, para las Extensions no disponemos de un entorno en local<\/strong>, por lo que tendremos que levantar el servidor NodeJS en local e ir a nuestro servidor de SharePoint Online, a la biblioteca donde queremos probar este campo y por \u00faltimo, \u00a0a\u00f1adir la siguiente url:<\/p>\n loadSPFX=true&debugManifestsFile=https:\/\/localhost:4321\/temp\/manifests.js&fieldCustomizers={\u00abField\u00bb:{\u00abid\u00bb:\u00bb0e3d8b71-56aa-4405-9225-f08a80fc1d71″,\u00bbproperties\u00bb:{\u00absampleText\u00bb:\u00bbHello!\u00bb}}}<\/p>\n De esta url tendremos que modificar el valor Field<\/strong> por el nombre de nuestra columna personalizada, y el id de la extensi\u00f3n dentro del Catalogo de Producto. Este identificador lo podemos obtener mirando el manifiesto de la propia soluci\u00f3n.<\/p>\n Para facilitar la depuraci\u00f3n de nuestras soluciones, varios miembros de la comunidad han creado una tarea de Gulp que nos genera esta url con los valores de nuestra soluci\u00f3n. Para m\u00e1s informaci\u00f3n sobre esta tarea os recomiendo \u00a0pinchar en este enlace<\/a>.<\/p>\n Ahora mismo, este es el aspecto m\u00e1s flojo y en el que m\u00e1s esfuerzo debemos hacer \u00a0antes de \u00a0ponerlo en entornos Productivos. Los pasos que hay que seguir, son:<\/p>\n 1.- Subir la App a nuestro cat\u00e1logo de aplicaciones. El equipo de producto est\u00e1 trabajando en una API para poder tener un ciclo de vida m\u00e1s acorde a un desarrollo moderno y que no se vuelva a incurrir en errores como en las primeras versiones de SharePoint.<\/p>\n Las SPFX Extensions<\/strong> son un gran avance para la incorporaci\u00f3n de los Modern Site en las nuevas Intranet y un espaldarazo definitivo para volver a incorporar a SharePoint Online como uno de los productos esenciales en las organizaciones.<\/p>\n En posteriores art\u00edculos abordaremos los otros tipos de \u00abExtensions\u00bb de los que disponemos.<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" El SharePoint FrameWork ha venido para quedarse en nuestros desarrollos. Si el a\u00f1o pasado Microsoft ya dio un golpe sobre la mesa anunciando el SPFX y las herramientas a utilizar, este a\u00f1o en el Summit empezaron a mostrar todas las … Continue reading \u00bfQu\u00e9 son las SharePoint Framework Extensions?<\/strong><\/h2>\n
\u00bfQu\u00e9 es un \u00abField Customizer\u00bb?<\/strong><\/h2>\n
![\"SPFX](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/07\/SPFX-Extensions-Como-crear-un-Campo-Personalizado.jpg.png\")
<\/p>\n\r\nyo @microsoft\/sharepoint\r\n<\/pre>\n
![\"\"](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/07\/youpdate.png\" "\\"SPFX")
e producto de la primera versi\u00f3n hay un error en el versionado<\/strong>. Dependiendo de si ejecutas el comando en una carpeta que ya tiene node-modules instalados, es posible que no funcione. Mi consejo es que actualices la plantilla de @microsoft\/sharepoint desde el propio Yeoman. Para ello, pones el comando Yo<\/em> y seleccionas la opci\u00f3n de actualizar una de las plantillas<\/p>\n![\"SPFX](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/07\/yo-1024x452.jpg\")
<\/p>\n![\"\"](\"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/wp-content\/uploads\/sites\/8\/2017\/07\/slider.jpg\" "\\"SPFX")
<\/p>\n\r\n @override\r\n public onRenderCell(event: IFieldCustomizerCellEventParameters): void {\r\n\r\n const value: string = event.cellValue;\r\n const id: string = event.row.getValueByName('ID').toString();\r\n const hasPermissions: boolean = this.context.pageContext.list.permissions.hasPermission(SPPermission.editListItems);\r\n \r\n const sliderField: React.ReactElement&lt;{}&gt; =\r\n React.createElement(SliderField, { value: value, id: id, disabled: !hasPermissions, onChange: this.onSliderValueChanged.bind(this) } as ISliderFieldProps);\r\n ReactDOM.render(sliderField, event.cellDiv);\r\n }\r\n<\/pre>\n\r\nexport default class SliderField extends React.Component&lt;ISliderFieldProps, ISliderState&gt; {\r\nconstructor(props: ISliderFieldProps, state: ISliderState) {\r\n super(props, state);\r\n const intVal = parseInt(props.value);\r\n this.state = {\r\n value: isNaN(intVal) ? null : intVal\r\n };\r\n }\r\n @override\r\n public componentDidMount(): void {\r\n Log.info(LOG_SOURCE, 'React Element: SliderField mounted');\r\n }\r\n\r\n @override\r\n public componentWillUnmount(): void {\r\n Log.info(LOG_SOURCE, 'React Element: SliderField unmounted');\r\n }\r\n @override\r\n public render(): React.ReactElement&lt;{}&gt; {\r\n return ( \r\n\r\n\r\n&lt;div className={styles.cell}&gt;\r\n {this.state.value &amp;&amp;\r\n (\r\n &lt;ReactSlider value={this.state.value} max={100} onChange={this.onChange.bind(this)} disabled={this.props.disabled} \/&gt;\r\n )}\r\n &lt;\/div&gt;\r\n\r\n\r\n );\r\n }\r\n private onChange(value: number): void {\r\n if (this.props.onChange)\r\n this.props.onChange(value, this.props.id);\r\n }\r\n}\r\n<\/pre>\n\u00bfC\u00f3mo lo probamos?<\/strong><\/h2>\n
\u00bfC\u00f3mo lo desplegamos en nuestro tenant?<\/strong><\/h2>\n
\n2.- Subir el desarrollo al CDN
\n3.- Instalar la App en el Site Collection.
\n4.- Actualizar el CliendSideID en el campo que queremos aplicarle esta personalizaci\u00f3n. Esto mediante desarrollo.<\/p>\nResumen<\/strong><\/h2>\n