El motivo de esta entrada es para explicarles el porque ultimamente he dejado de colocar contenido en este blog y asi como también en la demoras en el responder a las preguntas y comentarios.

Quizas no lo sepan pero a partir de marzo del 2011 ingresé a trabajar en Microsoft como Premier Field Engineer o también conocido como PFE. Dentro de mis tareas tengo que ayudar a nuestros clientes con contratos premier a solucionar problemas que puedan encontrar en sus aplicaciones y servidores.

Si bien en este blog había colocado mucho material referente a SharePoint cabe señalar que siempre he sido un desarrollador .NET y es por eso que el contenido a puntaba más a desarrollo de componentes. Ahora en Microsoft, he vuelto a mi especialización principal la cual es desarrollo en tecnologías .NET, incluyendo desarrollo sobre SharePoint, y además de eso estoy viendo temas referentes a Internet Information Server (IIS).

Ahora muchos podrías pensar que debido a mi nuevo empleo dejaré de postear artículos, pero bueno eso no es así… en este momento estoy migrando poco a poco el contenido a mi nuevo blog el cual está localizado en MSDN sin embargo, una vez finalizada la migración del contenido comenzaré a publicar nuevos materiales tanto en este blog como en mi nuevo blog.

Si tienen un poco de tiempo, me gustaría que me escribieran sobre que otros temas les gustaría ver en mi blog.

Quería agradecerles por la paciencia y por el apoyo brindado a lo largo del tiempo, un abrazo y esten atentos para nuevas entradas

Existe una buena cantidad de temas disponibles, los cuales pueden ser vistos en “Acciones del Sitio” –> “Aspecto” –> “Tema del Sitio”. Hay que tener en cuenta que en SharePoint Server, podemos personalizar el tema en el navegador. En SharePoint Foundation, esta funcionalidad no está disponible. Aquí hay un pequeño screenshot de como se ve está página en SharePoint Server:

Para poder crear un tema podemos hacerlo de las siguientes maneras:

• Theme Builder
• PowerPoint

En el caso de este artículo veremos la opción de Theme Builder, la cual puede ser descargada desde aquí. En el cual tu puedes definir los diferentes colores que compondrán a tu tema o simplemente tomar uno existente y modificarlo a tu gusto:

Una vez guardado nuestro tema (en mi caso lo llamaré “Prueba”) tenemos varias formas de hacerle deploy hacia nuestro servidor SharePoint como por ejemplo:

• Subirla directamente hacia la librería de temas
• ó, generar un WSP e instalar el tema como característica

Si ustedes desean subirla directamente hacia la librería de temas, simplemente navegamos a la siguiente URL: http://tu-servidor/_catalogs/theme/Forms/AllItems.aspx

Para hacer deploy mediante una característica, abrimos nuestro Visual Studio 2010 y creamos un proyecto tomando como base la imagen colocada aquí abajo:

En la siguiente ventana, cuando se nos solicite especificar que tipo de deploy haremos seleccionamos la opción “Farm Solution”:

Cuando creemos nuestro proyecto veremos en la Solution Explorer, un item llamado “Module1” el cual lo renombraremos como “ModuloTema”  y al expandirlo veremos un archivo llamado “Sample.txt” el cual simplemente eliminaremos.

Ahora para incorporar nuestro archivo .thmx haremos clic con el botón derecho del mouse sobre el elemento “ModuloTema” y seleccionamos Add –-> Existing Item y escogemos nuestro archivo .thmx con lo cual nuestro “ModuloTema” quedará de la siguiente manera:

Ahora procederemos a editar nuestro archivo Elements.xml y deberá quedar de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Mi Tema" Url="_catalogs/theme">
    <File Path="ModuloTema\Prueba.thmx" Url="Prueba.thmx" />
  </Module>
</Elements>

Una vez que hacemos deploy de nuestra solución y acceder nuevamente a los temas del sitio (recuerden para acceder a esta página es mediante “Acciones del Sitio” –> “Aspecto” –> “Tema del Sitio”)

Si presionamos el botón “Aplicar” podremos ver nuestro tema, el cual en mi caso no es muy bonito que digamos

Si desean descargar el código fuente del ejemplo pueden hacerlo desde aquí.

Espero que este artículo haya sido de su utilidad, hasta la próxima

Además si desean descargar las demostraciones, lo pueden hacer aquí

En uno de los artículos que publique, les mostré como pueden hacer uso de la área de notificación para comunicar ciertas cosas a nuestros usuarios, teniendo como resultado lo siguiente:

Si ustedes revisan el artículo que les mencioné, existe un parámetro booleano que nos permite hacer que nuestro mensaje del área de notificación sea permanente para hacerlo visible mientras dure nuestra operación, y luego esconderlo cuando termine la operación.

Sin embargo al utilizar el área de notificación para mostrar mensajes de operaciones de larga duración, existen ciertos inconvenientes:

1. No puedes actualizar fácilmente el mensaje desplegado en la notificación. Para comunicar el progreso de una operación de larga duración tienes que esconder la notificación anterior y reemplazarla por la nueva.
2. Los mensajes en el área de notificación no bloquean la interfaz usuaria por lo cual, el usuario podría seleccionar alguna otra opción de la pantalla generando un conflicto con la operación que ya está siendo ejecutada.

Por suerte el framework de interfaz usuaria de SharePoint 2010 tiene una clase javascript llamada SP.UI.ModalDialog.showWaitScreenWithNoClose la cual despliega mensajes modales como el siguiente:

La función showWaitScreenWithNoClose, acepta los siguientes cuatro parámetros:

Veamos el siguiente ejemplo:

var ventanaModal = SP.UI.ModalDialog.showWaitScreenWithNoClose('Mostrando contenido', 'Estoy ejecutando una operación muy larga!', 76, 330);

Con lo que obtendríamos lo siguiente:

Si nosotros quisieramos actualizar la operación, simplemente tendríamos que agregar la siguiente línea:

ventanaModal.get_html().getElementsByTagName('TD')[1].innerHTML = 'Ya está terminando la operación...';

Obteniendo lo siguiente:

Como pudieron ver la línea anterior no es un método estándar para actualizar el mensaje mediante la API. Por lo cual podría variar en actualizaciones posteriores, asi que tengan cuidado al usarlo

Finalmente para cerrar el mensaje simplemente agregamos la línea

ventanaModal.close();

Como pudieron ver a lo largo de esta serie de artículos, el nuevo framework de UI de SharePoint 2010 nos provee muchas funcionalidad muy atractivas para nuestros sitios.

A continuación les dejo un listado con todos los artículos con tips de la UI que publiqué:

• Utilizando el área de notificación de SharePoint 2010 [Tip UI # 1]

• Utilizando la barra de estado de SharePoint 2010 [Tip UI # 2]

• Utilizando los Modal Dialogs de SharePoint 2010 [Tip UI # 3]

• Utilizando los mensajes de progreso modales [Tip UI #4]

¿Cuándo es? Este 25 de Enero a las 19:00 PM (GMT +1), es decir 15:00 PM hora de Santiago, Chile (GMT – 4)

¿Dónde me inscribo? En el siguiente link: http://tinyurl.com/2a48taw

Los espero!

Después de las fiestas de fin de año, recibí un correo de Microsoft diciendome que he sido premiado como Microsoft Most Valuable Professional (MVP) por mis contribuciones en la comunidad de SharePoint.

Quiero agradecer a Gonzalo Pérez y a Juan Valenzuela por su ayuda a lo largo de este año, a ustedes por darse el tiempo de leerme y asistir a los eventos.

Lo genial de este modal dialog es que podemos manejar todo desde JavaScript, desde su apertura hasta el cierre de el (detectando si fue por una acción de Aceptar o Cancelar).

Ahora bien, ¿cómo abrimos un nuevo diálogo? Simple, llamamos a la función SP.UI.ModalDialog.showModalDialog la cual acepta como parámetro las opciones de como será abierta nuestro diálogo. Si desean mayor información con respecto a las opciones que podemos utilizar, les recomiendo que vean el siguiente link.

Veamos la apertura de un diálogo que se direccione a una página que poseo en mi sitio SharePoint, basta ejecutar el siguiente código:

function crearDialogo() 
{ 
  var options = {
     url: '/SitePages/Ejemplo.aspx',
     title: 'Diálogo de Ejemplo',
     allowMaximize: true,
     showClose: true,
     width: 800,
     height: 600,
     dialogReturnValueCallback: CallbackCerrar
  };

  SP.UI.ModalDialog.showModalDialog(options); 
}

Con lo cual obtendremos el siguiente resultado:

Como podrán darse cuenta, en las opciones de la función JavaScript especifiqué un método llamado “CallbackCerrar” su propósito es que al momento de cerrar el diálogo podamos obtener información de que fue lo que ocurrió ya sea el usuario presionó el botón Aceptar o el botón Cancelar.

function CallbackCerrar(dialogResult, returnValue) 
{ 
  if(dialogResult == SP.UI.DialogResult.OK)
  { 
    SP.UI.Notify.addNotification('Presionaste OK o Guardar'); 
    document.title = returnValue; 
  }

  if(dialogResult == SP.UI.DialogResult.cancel) 
    SP.UI.Notify.addNotification('Presionaste Cancelar!'); 
}

Ahora viene lo entretenido, ¿Cómo hacemos que desde nuestra ventana modal podamos notificar a la ventana padre que acción sucedió en ella? Solamente tenemos que llamar a la función SP.UI.ModalDialog.commonModalDialogClose el cual acepta dos parámetros, el primero es una enumeración las posibles acciones invocadas y el segundo parámetro es un valor de retorno definido por el usuario. Si desean mayor información con respecto a la enumeración, sigan el siguiente link

A nuestro diálogo anterior le agregaremos dos botones: Aceptar y Cancelar, los cuales invocarían la función “fnAceptar” y “fnCancelar” respectivamente.

<input type="button" value="Aceptar" onclick="javascript:fnAceptar();" />
<input type="button" value="Cancelar" onclick="javascript:fnCancelar();" />

function fnAceptar() {
  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, "El usuario presiono aceptar");
}

function fnCancelar() {
  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel, "El usuario presiono cancelar")
}

Con lo cual obtendríamos lo siguiente:

Al presionar el botón aceptar, veremos como usando el área de notificación nos aparece un mensaje diciendo “Presionaste OK o Guardar”. Mientras que si presionamos el botón Cancelar veremos el mensaje “El usuario presiono cancelar”.

ó

respectivamente

Como puedes ver, manejar las ventanas modales de SharePoint 2010 no es nada complejo simplemente son unas funciones JavaScript y unos pocos parámetros ! Espero que este artículo haya sido de tu utilidad, hasta la próxima!

Barra de Estado

Para poder hacer uso de esta función basta con simplemente llamar a la función: “SP.UI.Status.addStatus”, la cual acepta tres parámetros:

• El primero, es el título del estado
• El segundo, es una string que acepta HTML en el cual irá la descripción del estado
• El tercero, es un booleano indicando si el mensaje debe ser desplegado como el primero o no.

Ahora veamos un simple ejemplo:

 var sid = SP.UI.Status.addStatus('Mi estado:', 'Este es un <b>ejemplo</b>', true); 

Con el cual obtendríamos:

Si se dan cuenta, esta barra muestra un color un poco azulado.. ¿cómo podemos cambiar el color de la barra?. Simplemente llamamos a la función JavaScript SP.UI.Status.setStatusPriColor, el cual acepta dos parámetros, el primero es el ID de la barra de estado a la cual le cambiaremos el color, y el segundo es el color que asignaremos. Tomando la barra que vimos anteriormente, el código sería el siguiente:

 
var sid = SP.UI.Status.addStatus('Mi estado:', 'Este es un <b>ejemplo</b>', true);
SP.UI.Status.setStatusPriColor(sid, 'red'); 

Lo cual quedaría así:

Espero que este tip haya sido de su utilidad, en un próximo artículo les mostraré como hacer uso del Ribbon. Hasta la próxima

La gracia de SharePoint es que nos permite hacer uso de todo este set de características, con solo llamar a algunas funciones JavaScript muy sencillas de usar.

Área de notificación

Como vimos en la imagen presentada anteriormente, la área de notificación nos indica información que se está realizando en el momento como por ejemplo: “Cargando contenido” o “Guardando contenido”, etc.

Para hacer uso de esta área, simplemente llamamos a la función: “SP.UI.Notify.addNotification”, la cual acepta dos parámetros, el primero es el mensaje HTML a ser mostrado y el segundo parámetro es un booleano en el cual TRUE, significa que el elemento siempre estará visible y false si deseamos que desaparezca después de cierto tiempo. Si por A, B o C motivo dejamos este segundo parámetro como TRUE, la única forma de deshacernos de la notificación es invocando a la función: “SP.UI.Notify.removeNotification” pasando como parámetro el ID de la notificación.

Veamos ahora un simple ejemplo de como llamar a la función “SP.UI. Notify.addNotification”:

var nid = SP.UI.Notify.addNotification("Hola desde el área de notificación!", true);

Obteniendo como resultado:

Lo genial de esta función, es que por ser el primer parámetro un string que acepta HTML podemos incluir una imagen para darle un mejor estilo a nuestra notificación, quedando de la siguiente manera:

var nid = SP.UI.Notify.addNotification("<img src='/_layouts/images/loadingcirclests16.gif' /> Hola desde el área de notificación!", true);

Obteniendo como resultado:

Espero que este artículo haya sido de su utilidad, en el próximo tip aprenderemos como utilizar la barra de estado