[SharePoint] ¿Como incluir Tags en los Post mediante programación?

Como hemos visto en anteriores posts, SharePoint trae muchas funcionalidades de serie en los apartados sociales, así que, en el post de esta semana vamos a ver cómo realizar tags mediante programación. Haciendo uso del modelo de objetos en .NET o utilizando la API Rest en JavaScript (que es la forma en la que lo hemos implementado en nuestra APP).

Para empezar, definamos que es un hashtag, según la Wikipedia:
«Una etiqueta o hashtag (del inglés hash, almohadilla o numeral y tag, etiqueta),1 es una cadena de caracteres formada por una o varias palabras concatenadas y precedidas por una almohadilla o gato (#). Es, por lo tanto, una etiqueta de metadatos precedida de un carácter especial con el fin de que tanto el sistema como el usuario la identifiquen de forma rápida.
Se usa en servicios web tales como Twitter, FriendFeed, identi.ca, facebook o en mensajería basada en protocolos IRC para señalar un tema sobre el que gira cierta conversación.»

Manos a la obra

Partimos de la base de que continuamos con el desarrollo que empezamos en el post en el cual explicamos como realizar un post mediante la API REST. En esta ocasión, vamos a añadir que en ese post se incluyan Tags para posteriormente poder localizarlos haciendo uso de las búsquedas y así tener categorizada la información que desplegamos en SharePoint.
¿Como hacerlo? La respuesta es relativamente simple: mirar la definición de los parámetros que necesitamos incluir en la llamada a la API REST, para indicar que estamos enviando el Tags en este post.
Para poder pasar estos parámetros tenemos que realizar una serie de pasos previos:

1. Comprobar si en el post que se ha introducido existe algun Tag que empiece por «#» para ello en primer lugar creamos la siguiente función, que devuelve un vector con las menciones que hay :

function getHastag(texto)
{
    var result = [];
    var i = 0;
    var vStar = texto.indexOf('#');
    var vEnd=texto.length;
    if (vStar >= 0) {
        if (texto.substring(vStar, texto.length).indexOf(' ')>0)
            vEnd = texto.substring(vStar, texto.length).indexOf(' ')+vStar ;
    }
    while (vStar>=0)
    {
        result[i] = texto.substring(vStar, vEnd);
        texto = texto.substring(vEnd, texto.length);
        vStar = texto.indexOf('#');
        vEnd = texto.length;
        if (vStar >= 0) {
            if (texto.substring(vStar, texto.length).indexOf(' ') > 0)
                vEnd = texto.substring(vStar, texto.length).indexOf(' ')+vStar ;
        }
        i++;
    }
    return result;
}

2. Reemplazar los hastags por «{n}» donde «n» es el numero que tiene la mención dentro del vector que nos ha devuelto la función anterior. Para ello con estas lineas de código cumplimos con los requisitos:

listHastag = getHastag(valor);
for (i=0;i<listHastag.length;i++)
{
   valor= valor.replace(listHastag[i], "{" + i + "}");
}

3. Antes de realizar la llamada API Rest, creamos la estructura que va a contener la llamada en la que se indica dentro del ContentItems que le vamos a enviar Tags para ello implementamos el siguiente código:

  var result=[];
                for (var val = 0; val < listHastag.length; val++)
                {
                    result [val]= {
                        '__metadata': {
                            'type': 'SP.Social.SocialDataItem'
                        },
                        'Text': listHastag[val],
                        'ItemType': 3,
                    }
                }
                debugger;
                dataPost = {
                    'restCreationData': {
                        '__metadata': {
                            'type': 'SP.Social.SocialRestPostCreationData'
                        },
                        'ID': null,
                        'creationData': {
                            '__metadata': {
                                'type': 'SP.Social.SocialPostCreationData'
                            }, 'ContentItems': {
                                'results':
                                        result
                            },
                            'ContentText': valor,
                            'UpdateStatusText': false
                        }
                    }
                };

4. Realizar la llamada Ajax a la API Rest de la siguiente forma:

   $.ajax({
                url:  appweburl + "/_api/social.feed",
                type: "POST",
                data: JSON.stringify(dataPost),
                headers: {
                    "accept": "application/json;odata=verbose",
                    "content-type": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success:             function () {
                       alert("POST Created");
                }  ,
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("POST error:\n" + xhr.status + "\n" + thrownError);
                }
            });

¿Como lo hacemos en .NET?

En primer lugar en nuestro proyecto tendremos que añadir las siguientes referencias:
Microsoft.SharePoint.Client
Microsoft.SharePoint.Client.Runtime
Microsoft.SharePoint.Client.UserProfilies
El siguiente paso es añadir este código:

 static void Main(string[] args)
        {

            // Replace the following placeholder values with the actual values.
            const string serverUrl = "http://serverName/siteName/";
            const string tagName = "#" + "tagName";

            // Define the link to a tag that you want to include in the post. If the tag is new, the
            // server adds it to the tags collection.
            SocialDataItem tagLink = new SocialDataItem
            {
                ItemType = SocialDataItemType.Tag,
                Text = tagName
            };

            // Add the tag to the post's creation data.
            // Put a placeholder ({0}) where you want the tag to appear in the post text,
            // and then add the tag to the post's content items.
            SocialPostCreationData postCreationData = new SocialPostCreationData();
            postCreationData.ContentText = "I like {0}.";
            postCreationData.ContentItems = new SocialDataItem[1] { tagLink };

            try
            {

                // Get the context and the SocialFeedManager instance.
                ClientContext clientContext = new ClientContext(serverUrl);
                SocialFeedManager feedManager = new SocialFeedManager(clientContext);

                // Publish the post. This is a root post to the user's feed, so specify
                // null for the targetId parameter.
                feedManager.CreatePost(null, postCreationData);
                clientContext.ExecuteQuery();
                Console.Write("The post was published.");
                Console.ReadLine();
            }
            catch (Exception ex)
            {
                Console.Write("Error publishing the post: " + ex.Message);
                Console.ReadLine();
            }
        }

Consultar los Tags de un post

Una vez ya hemos introducido un Tag, lo siguiente es cómo lo podemos recuperar. De esta forma una vez consultemos este post, sepamos estos Tags qué tienen. Al igual que hemos realizado para la introducir un Post, cuando consultamos nuestro Feed en cada post hay un apartado que nos indica los Tags que tiene ese post.

Para ello realizamos los siguientes pasos:
1. Consultar el feed con la siguiente función

    var feedManagerEndpoint = appweburl + "/_api/social.feed";
    $.ajax({
        url: feedManagerEndpoint + "/actor(item=@v)/Feed(MaxThreadCount=10,SortOrder=1)?@v='"+Name+"'",
        headers: {
            "accept": "application/json;odata=verbose"
        },
        success:
                         feedRetrieved,
        error: function (xhr, ajaxOptions, thrownError) {
            alert("GET error:\n" + xhr.status + "\n" + thrownError);
        }
    });

2. En la función feedRetrieved mirar los Tags que hay en los posts de la siguiente forma:

    var stringData = JSON.stringify(data);
    var jsonObject = JSON.parse(stringData);

    var feed = jsonObject.d.SocialFeed.Threads;
    var threads = feed.results;

    for (var i = 0; i < threads.length; i++) {
        var thread = threads[i];
        var participants = thread.Actors;
        var tags = [];
        var j = 0;
        for (var ii = 0; ii < participants.results.length; ii++) {
            var type = participants.results[ii];
            if (type.ActorType === 3) {
                tags[j] = type.Name;
                j++;
            }
        }
        var htmlTag = "<div id='divArticleTags'>";
        if (tags.length > 0) {
            for (var ii = 0; ii < tags.length; ii++) {
                htmlTag += "<span>" + tags[ii].replace("#","") + "</span>";
            }
        }
        htmlTag += "</div>";
}

Del código expuesto lo más novedoso es que dentro de los participantes del post, este tipo de participantes son los elementos ajenos al post, es decir Usuarios, Documentos, Likes, Tags y Sitios que tienen que ver con el Post. Por lo que la dificultad es saber qué valor es el que corresponde con los Tags. En este caso es 3. Para obtener información sobre este tipo de número consultar la documentación técnica de Microsoft.

Conclusiones

Seguimos desmenuzando un poco más la API Social de SharePoint, que como venimos observando es bastante completa y se le puede dar mucho valor añadido a lo que viene out of the box, en futuros post abordaré el tema de cómo incluir imagenes, videos, etc. para terminar con esta serie de articulos en los que hemos aprendido las opciones disponibles.