En anteriores post hemos visto como podemos hacer uso de elementos que utiliza SharePoint out of the box dentro de nuestros desarrollos. Por lo general, estos artefactos suelen ser «UserControls» y desarrollos en servidor, pero de la misma forma que en nuestros desarrollos cada vez tienen más peso la parte cliente haciendo uso de JavaScript, también podemos utilizar determinadas API/ funciones dentro de nuestros desarrollos.

En este post, vamos a ver cómo podemos mostrar diferentes notificaciones dentro de nuestros desarrollos y de esta forma darle un toque más profesional a éstos.

¿Qué son notificaciones dentro de SharePoint?

Seguro que cuando hemos arrancado alguna vez la Administración Central, hemos visto un «cartelito» (bien amarillo o bien rojo) indicando que nuestra granja tiene algunos errores que debemos de solucionar. ¿No es así?

Casos de uso

Este mensaje lo podemos utilizar en multitud de aspectos dentro de nuestro desarrollo, por ejemplo, cuando realizamos una inserción en una lista y dependiendo del estado se muestra el mensaje de un color u otro.

Para ello, en primer lugar, vamos a crear un fichero de JavaScript dónde vamos a hacer uso de la clase SP.UI.Notify y dependiendo de nuestros requisitos realizaremos una acción u otra.

var Enc={};
(function(app) {
    "use strict";
    var statusId = '';
    var notifyId = '';
    app.notificacion = {
        AddNotification: function(message) {
            notifyId = SP.UI.Notify.addNotification(message, true);
        },

        RemoveNotification: function() {
            SP.UI.Notify.removeNotification(notifyId);
            notifyId = '';
        },

        AddStatus: function(message, color) {
            statusId = SP.UI.Status.addStatus(message);
            SP.UI.Status.setStatusPriColor(statusId, color);
        },

        RemoveLastStatus: function() {
            SP.UI.Status.removeStatus(statusId);
            statusId = '';
        },
        RemoveAllStatus: function() {
            SP.UI.Status.removeAllStatus(true);
        }
    };
})(Enc)

De este JavaScript, en primer lugar indicar que hace uso del patrón «Módulo».  Su principal atractivo es que resulta extremadamente útil para conseguir código reusable y, sobre todo, modular. Su estructura básica es sencilla: se trata de una función que actúa como contenedor para un contexto de ejecución. Esto quiere decir que en su interior, se declaran una serie de variables y funciones que sólo son visibles desde dentro del mismo. De esta forma, tenemos aislada la ejecución de este código respecto al resto de funciones/método/variables que hay en el resto de la aplicación.
Otro aspecto a destacar es el paso de parámetros, en nuestro caso vamos a pasar una variable Enc. Dentro de nuestra aplicación, esta variable es el punto de entrada de todas las utilidades, métodos y helpers que vamos a utilizar en el desarrollo.

¿Cómo lo utilizo?

Uno de los mayores fallos que cometemos al escribir código JavaScript, es que no queremos entender el lenguaje de desarrollo y buscamos su similitud con nuestro código .NET. Ahora bien, nuestro entorno de desarrollo utilizamos Visual Studio ya que nos facilita bastante las cosas y él mismo se encarga de añadir las dependencias entre las diversas clases de nuestros proyecto y nos olvidamos que existen. No obstante, dentro de JavaScript no tenemos una herramienta como VS y tenemos que hacerlo de forma manual.

Así pues, en primer lugar dentro del fichero Aspx vamos a añadir la referencia a nuestro fichero js.

<script type="text/javascript" src="../Scripts/Notification.js"></script>

Y para utilizarlo dentro de nuestro desarrollo, nos bastará con invocar a la referencia Enc.notificacion.Metodo. Algo parecido a la siguiente instrucción:

Enc.notificacion.AddStatus('Status',"green");

Funciones disponibles

1. AddNotification. Esta función muestra un mensaje de forma semejante a cuando pulsamos «Seguir un sitio». Se muestra un recuadro en la parte izquierda de la pantalla.
2. RemoveNotification. Por regla general y por sentido estético y de usabilidad de la aplicación, una notificación no está de forma permanente en nuestra aplicación, por lo que transcurridos unos segundo tendremos que eliminar esta notificación.
3. AddStatus. Se muestra un mensaje en la parte superior de la pantalla y se le puede indicar de que color se va a mostrar (verde, amarillo o rojo)
4. RemoveAllStatus. Elimina el último mensaje con status mostrado.

Conclusión

En este post, hemos visto lo sencillo que es hacer uso de los elementos que se utilizan en SharePoint. En este caso, hemos aprovechado aspectos que se utilizan dentro de la interfaz de usuario. Además, hemos introducido cómo escribir JavaScript de forma «limpia» y reutilizable.