SharePoint 2010: Cómo publicar código Javascript desde la interfaz web con un Content Editor Web Part

En este artículo quiero comentar cómo insertar código Javascript en nuestra página de un sitio de SharePoint desde la interfaz web de usuario, es decir, sin tener que editar el propio código de nuestra página.

Escenario:

Supongamos que creamos una página en nuestro sitio de SharePoint (del tipo que sea) y, el autor de contenidos encargado de esa página, quiere poder añadir, eliminar, modificar cierto código Javascript de una forma totalmente autónoma sin necesidad de tener que llamar al desarrollador para que haga las modificaciones en el código HTML de la página.

 

Solución:

Paso 1:

Lo primero que debemos hacer es insertar un Content Editor Web Part en la página, para que el usuario pueda interactuar con él.

Para ello, deberemos tener al menos una Zona de Web Parts o un Campo de Texto Enriquecido.

    • Zona de Web Parts: Editamos la página y, en la Zona de Web Parts, seleccionamos “Insertar Web Part” con lo que se abrirá la ventana para seleccionar el Web Part que queremos insertar.
    • Campo de Texto Enriquecido: Seleccionamos el campo y, en la Ribbon seleccionamos Insertar > Web Part

 

Una vez seguidas las instrucciones anteriores, deberíamos ver el siguiente bloque en la cabecera de la página.

Paso 2:

Seguidamente, seleccionamos el Content Editor WebPart, que hemos insertado en la página, como si fuéramos a escribir texto, pero, en vez de eso, seleccionamos HTML > Edit HTML Source, con lo que se nos abrirá una ventana emergente en la que podremos ver el código HTML que se ha generado para el contenido del Content Editor WebPart.

 

Paso 3:

Por último, debemos insertar el código Javascript que queremos que se ejecute en nuestra página, evidentemente, dentro de las etiquetas <script type=”text/javascript”>…</script>

En este caso, pondré un “alert” para mostrar una ventana emergente con el texto “Demostración de cómo insertar Javascript en el contenido de una página”

 

 

Resultado:

Como resultado de este proceso, obtendremos la ventana emergente que muestro a continuación.

Published 15/11/2011 17:05 por Santiago Porras Rodríguez
Comparte este post: