SharePoint 2013: Como añadir comportamiento a código HTML añadido con Designer!

Otra de las pequeñas novedades que trae SharePoint Designer 2013 (SPD 2013) es la de facilitar la adición de comportamiento a etiquetas HTML como puede ser <img>:

  • Editamos una página de nuestro sitio en “Modo avanzado” y añadimos una etiqueta <img> dentro del PlaceHolder principal de la misma.
  • En la cinta de SPD 2013 nos vamos a “Vista” y dentro de las opciones “Paneles de tareas” pulsamos sobre “Comportamiento” de modo que se muestra la sección del mismo nombre en Designer.
  • Para agregar una acción desplegamos las opciones disponibles en “Insertar” y pulsamos por ejemplo en “Mensaje emergente”.
image image image
  • En este caso, se muestra una ventana emergente en la que podemos indicar el mensaje a mostrar para el evento OnClick de la etiqueta <img> que es el que se va a añadir como consecuencia de pulsar la opción “Mensaje emergente” en la sección “Comportamientos” de Designer.
  • De echo, el HTML que genera Designer es el siguiente:
   1: <img alt="imagen" src="../SiteAssets/Logo_Ayuda.gif" onclick="FP_popUpMsg('TEst')">

  • Cómo veis, en el evento onclick se añade una llamada a la función JavaScript FP_popUpMsg().
  • Guardamos los cambios y comprobamos como al hacer clic en la imagen se muestra el típico mensaje de Alert.
image image