Tipos de Resultados en Búsquedas de SharePoint OnLine

Muy buenas a todos,

Seguimos hoy con las búsquedas en SharePoint OnLine, y por ende, también aplicable a la versión On-Premises de SharePoint 2013.

En el último post que he publicado recientemente, “Introducción al uso de Display Templates en SharePoint OnLine”, hablaba de cómo usar los Display Templates dentro de una solución guiada por las búsquedas en SharePoint OnLine. Hoy, vamos a ver más sobre como podemos usar estos Display Templates, en las búsquedas de SharePoint. En este caso, vamos a ver como hacer uso de los mismos dentro de nuestra central de búsquedas.

Puede darse el caso de que tengamos varios tipos de resultados distintos, que queramos que se diferencien en su aspecto cuando nos los muestre el buscador. Para ello vamos a usar lo que se conoce como Tipos de resultados. Por medio de esta opción que nos ofrece SharePoint, vamos a poder indicar qué plantilla de las que hayamos definido, queremos aplicar a los distintos resultados de la búsqueda que hayamos realizado. Para hacerlo previamente deberemos haber creado las plantillas y haberlas subido al sitio (En el post mencionado anteriormente podréis encontrar como crear y subir una plantilla). Una vez que lo hayamos hecho vamos a ir a la opción de Tipos de resultados de la configuración del sitio para definir los mismos.

Una de las posibilidades que nos ofrece SharePoint, es definir estos tipos de resultado a nivel de colección de sitios o exclusivamente nivel de sitio, dependerá de nuestro planeamiento de las búsquedas donde definir los Tipos de resultados, lo que si es claro, que esta nueva posibilidad de trabajar con las búsquedas, no solo a nivel de Administración Central, nos ofrece una cantidad de nuevas oportunidades a la hora de trabajar con ellas, lo que las hace más atractivas y versátiles que en las versiones anteriores.

Captura de pantalla 2014-12-21 a las 15.45.05

Cuando accedemos a la opción de Tipos de resultados, vemos todos los que ya hay definidos y tenemos la opción de crear nuevos. Lo que haremos al definir un tipo de resultado es: Indicar para que origen de resultados queremos que se aplique, la condición que tiene que tener ese resultado y la plantilla que se va aplicar para el resultado que satisfaga la condición. Para ver como hacer esto, pulsamos en “Nuevo tipo de resultado”.

Captura de pantalla 2014-12-21 a las 15.45.24

Esto nos llevará a la pantalla que vamos a ver a continuación y que nos permite definir el tipo de resultado, indicando los apartados que ya hemos comentado.

Captura de pantalla 2014-12-21 a las 15.45.41

En el formulario que se nos muestra tendremos que indicar primero el nombre del Tipo de resultado. A continuación, indicaremos las condiciones que harán que se aplique el tipo de resultado. Estas condiciones pueden ser o aplicables a uno de los tipos de contenido por defecto de SharePoint o en función de las propiedades administradas y sus valores. Para ver la posibilidad de indicar condiciones relacionadas con las propiedades administradas tenemos que hacer click en “Mostrar más condiciones”.

Captura de pantalla 2014-12-21 a las 16.45.45

En el caso de ejemplo, queremos que se aplique el tipo de resultado a un Tipo de contenido definido previamente. Para ello, se selecciona la propiedad ContentType e indicaremos que el valor sea igual al nombre del Tipo de contenido. Lo que nos queda en la tercera parte del formulario es indicar la plantilla que queremos aplicar cuando se satisfagan las condiciones. Una vez indicados todos los datos, pulsamos sobre Aceptar y ya tendremos nuevo Tipo de resultado creado y se comenzará a aplicar inmediatamente en nuestros resultados de búsqueda.

Vamos a ver ahora lo que pasa cuando creamos distintos Tipos de resultados para los tipos de contenido que tenemos en nuestro sitio.

Captura de pantalla 2014-12-21 a las 15.42.46

Aunque como siempre, ya sabéis que no me paro mucho en los diseños para el ejemplo, se ve como un resultado que pertenece a un tipo de contenido tiene un estilo y otro que pertenece a otro distinto tiene un estilo diferente.

El uso de los Tipos de resultado, a mi particularmente, me parece muy interesante y de gran utilidad. La oportunidad de usar las Display Templates, en lugar de las plantillas XSL de anteriores versiones y poder de una manera organizada y reutilizable crear plantillas creo que aporta muchas mejoras a la forma en que tratar los resultados de búsqueda de SharePoint.

Lo próximo sobre lo que me gustaría centrarme es en la parte de ordenación y reglas de consulta que nos ofrece SharePoint, pero para ello, habrá que esperar a futuros post, XD.

Espero que hayáis encontrado útil lo que os he contado hoy.

Saludos a todos

Anuncios

Introducción al uso de Display Templates en SharePoint OnLine

Muy buenas de nuevo a todos,

En mis anteriores entradas he estado hablando sobre como podríamos usar los Content Search Web Part para hacer personalizaciones de nuestros sitios sin escribir ninguna línea de código. Habíamos conseguido una página que nos mostraba un catálogo de elementos y enlaces a la página donde podíamos ver el detalle de los elementos de dicho catálogo.

Primeros Pasos con SharePoint OnLine: Search Driven Development

Search Driven Development en SharePoint (II): Catálogos y Elementos de Catálogo

En ambas entradas os hablaba de la posibilidad de personalizar el diseño de esos resultados para hacerlos más atractivos e integrarlos con el branding de nuestro sitios. Para los que hayáis trabajado con la personalización de los resultados de búsqueda en SharePoint 2010, os habréis topado seguro con las plantillas XSL que nos obligaban a saber manejar XSLT para la creación de las mismas. Con SharePoint OnLine y 2013 todo este approach ha cambiado, dentro de toda la renovación de la plataforma para hacerla más ligera y cercana a las nuevas tecnologías. Ahora vamos a poder trabajar directamente con HTML y Javascript, lo que seguro que nos va a resultar muy interesante. Todo esto es lo que vamos a ver al hablar de los Display Templates. Nuestro objetivo va a ser, pasar de esto:

Captura de pantalla 2014-12-12 a las 19.58.55
Captura de pantalla 2014-12-13 a las 23.25.54

A una visualización de los resultados de nuestro Content Search Web Part como estos:

Captura de pantalla 2014-12-20 a las 15.28.29
Captura de pantalla 2014-12-20 a las 15.28.43

Aunque no se trata de un diseño muy elaborado, si que nos va a servir para ver que de una forma muy sencilla vamos a poder modificar la visualización de los resultados de búsqueda. Antes de nada, os voy a mostrar algunos enlaces que he utilizado para saber como usar los Display Templates.

http://blogs.technet.com/b/tothesharepoint/archive/2013/05/28/stage-11-upload-and-apply-display-templates-to-the-content-search-web-part.aspx

http://www.compartimoss.com/revistas/numero-17/introduccion-plantillas-elementos-contenido-display-templates

La información de nuestros Display Templates la vamos a encontrar en dos sitios. Si queremos editar las propiedades de las plantillas ya subidas, iremos al administrador de diseños al que podemos acceder de la siguiente manera, donde en el apartado de “Editar plantillas para mostrar”, encontraremos las plantillas ya cargadas:

Captura de pantalla 2014-12-20 a las 15.49.54

Si por el contrario queremos añadir nuevas plantillas lo haremos a través de Configuración del sitio->Páginas maestras y diseños de página->Display Templates->Content Web Parts

Captura de pantalla 2014-12-20 a las 15.53.45

Cuando accedemos al lugar que nos permitirá añadir nuevas plantillas, vemos que cada una de las plantillas ya subidas tiene dos archivos, uno .html y otro .js. Nosotros solo tendremos que crear el .html con la plantilla, el archivo con extensión .js se crea automáticamente al subir el anterior y es transparente para nosotros, este archivo contiene la sustitución que hace SharePoint de una serie de etiquetas especiales que se usan en las plantillas, por las correspondientes que haya que usar.

En nuestro caso, para lograr el objetivo que os he mostrado, vamos a crear dos plantillas, una para los elementos cuando están dentro del catálogo y otra para la página que muestra el detalle de uno de los elementos del catálogo

¿Como creamos una plantilla personalizada?

Como hemos dicho antes, una plantilla es un archivo .html con una serie de etiquetas especiales. Voy a mostraros como es una plantilla y después os explicaré algunos aspectos que hay que tener en cuenta.

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <title>Plantilla de Ejemplo</title>
  
    <!--[if gte mso 9]><xml>
    <mso:CustomDocumentProperties>
    <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
    <mso:ManagedPropertyMapping msdt:dt="string">
        'Title'{Título}:'Title',
        'Skills'{Capacidades}:'CapacidadesOWSTEXT',
        'SecondaryFileExtension',
        'ContentTypeId'
    </mso:ManagedPropertyMapping>
    <mso:MasterPageDescription msdt:dt="string">Este es el ejemplo de una plantilla para resultados de elementos de busqueda</mso:MasterPageDescription>
    <mso:ContentTypeId msdt:dt="string">0x01006BCAA0AD8F40D041AD8D1579799074B6</mso:ContentTypeId>
    <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#SearchResults;#</mso:TargetControlType>
    <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
    </mso:CustomDocumentProperties></xml><![endif]-->
</head>
  
<body>
  
    <div id="ExampleSearchDrivenSolution">
  
<!--#_
    var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_exampleTemplate_");
  
    var linkURL = $getItemValue(ctx, "Link URL");
    linkURL.overrideValueRenderer($urlHtmlEncode);
  
    var title = $getItemValue(ctx, "Title");

  
    var skills = $getItemValue(ctx, "Skills");
  
    var containerId = encodedId + "container";
  
 _#-->
  
        <div id="_#= containerId =#_" style="float:left;width:25%;margin-left:0.5em;border:1px solid #CCC; min-height:25em;background-color:#EEE;cursor:pointer;position:relative;" onclick="window.location.href = '/sites/organizer/autores/_#= title =#_'">
            <span style="color:red;">_#= title =#_</span>
            <p style="text-decoration:underline;position:absolute;bottom:0.5em;">_#= skills =#_</p>
        </div>
  
    </div>
</body>
</html>
  • El primer aspecto importante se encuentra entre las líneas 5 y 18. Aquí se define un XML donde se definirán los parámetros de la plantilla. Lo más importante tiene que ver con lo que se define en la etiqueta “mso:ManagedPropertyMapping”, que es donde se definen las propiedades administradas que serán mapeadas en la plantilla y que usaremos después en la misma para mostrar los distintos campos del elemento devuelto por la búsqueda.
  • Con las etiquetas “<!–#_” y “_#–>” podremos escribir todo el código Javascript que queramos dentro de nuestra plantilla.
  • Haciendo uso de las etiquetas “_#=” y “=#_” podremos hacer uso de variables de Javascript que hayamos definido previamente
  • Es importante tener en cuenta que solo el contenido que aparezca en el primer ”
    <div>” será visible dentro de nuestra plantilla.

Este es el código que he usado para la plantilla de los elementos que forman parte del catálogo. A continuación os muestro la que he usado para el detalle de los elementos. La diferencia, a parte del diseño, se encuentra en las propiedades administradas que se mapearán en cada caso.

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
    <title>Plantilla de Ejemplo para elementos</title>
  
    <!--[if gte mso 9]><xml>
    <mso:CustomDocumentProperties>
    <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
    <mso:ManagedPropertyMapping msdt:dt="string">
        'Link URL'{Dirección URL del vínculo}:'Path',
        'Title'{Título}:'Title',
        'Skills'{Capacidades}:'CapacidadesOWSTEXT',
        'Email'{Email}:'EmailOWSTEXT;,
        'WebSite'{Sitio personal}:'PersonalWebsiteOWSURLH;,
        'SecondaryFileExtension',
        'ContentTypeId'
    </mso:ManagedPropertyMapping><mso:MasterPageDescription msdt:dt="string">Este ejemplo se utiliza para el elemento de la lista</mso:MasterPageDescription>
    <mso:ContentTypeId msdt:dt="string">0x01006BCAA0AD8F40D041AD8D1579799074B6</mso:ContentTypeId>
    <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#SearchResults;#</mso:TargetControlType>
    <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
    <mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
    </mso:CustomDocumentProperties></xml><![endif]-->
</head>
  
<body>
  
    <div id="ExampleSearchDrivenSolution">
  
<!--#_
    var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_exampleTemplate_");
  
    var title = $getItemValue(ctx, "Title");
  
    var skills = $getItemValue(ctx, "Skills");

    var mail = $getItemValue(ctx, "Email");
  
    var website = $getItemValue(ctx, "WebSite");
  
    var containerId = encodedId + "container";
  
 _#-->
        <h2>Nombre: _#= title =#_</h2>

        <span style="display:block;margin-top:1em;font-weight:bold;font-size:1.2em;">Descripción de las habilidades</span>
        <p>_#= skills =#_</p>

        <span style="display:block;margin-top:1em;font-weight:bold;font-size:1.2em;">¿Deseas ir a su web para conocer más sobre este autor?</span>
        <a href="_#= website =#_">_#= website =#_</a>

        <span style="display:block;margin-top:1em;font-weight:bold;font-size:1.2em;">¿Quieres ponerte en contacto con este autor?</span>
        <a href="mailto:_#= mail =#_">_#= mail =#_</a>
  
    </div>
</body>
</html>

¿Cómo subimos una plantilla personalizada?

Una vez que ya hemos definido nuestras plantillas, vamos a añadirlas a nuestro sitio de SharePoint para poder usarlas. Para ello, seguimos la ruta que ya indicamos antes, para entrar al sitio donde podremos subirla. En nuestra Ribbon, desplegamos la opción de “Nuevo Documento” y hacemos click en “Plantillas para mostrar de elementos”:

Captura de pantalla 2014-12-20 a las 16.30.50

A continuación seleccionamos la plantilla a subir,

Captura de pantalla 2014-12-20 a las 16.31.12

Por último se carga la pantalla de propiedades de la plantilla, donde vemos precargadas las propiedades que ya definimos en el código de la misma. Si no lo hemos hecho en el código de la plantilla, aquí deberemos indicar el Tipo de Contenido asociado, el título de plantilla, el tipo de control de destino y el Archivo Asociado.

Captura de pantalla 2014-12-20 a las 16.31.30

Una vez hecho esto, veremos que la plantilla se ha añadido correctamente a nuestra lista de plantillas y que efectivamente se ha creado asociado al .html el .js . Para que esté disponible para ser usada, tenemos que ir al administrador de diseños y aprobar la plantilla que acabamos de subir que estará en estado “Borrador” en ese momento.

Captura de pantalla 2014-12-20 a las 16.49.46

Tras esto la plantilla ya estará disponible para usarla en nuestro Content Search WebPart. El proceso para subir una nueva plantilla lo repetiremos para las dos plantillas de nuestro sitio.

Usando la plantilla en el Content Search WebPart

El último paso que nos queda es cargar las plantillas en cada uno de los Content Search WebPart, por un lado el que se encuentra en la página que muestra el catálogo y por otro el de la página que nos muestra los elementos del catálogo, usando en cada caso la plantilla deseada

Para ello, editamos el web part de la página correspondiente, seleccionando la plantilla que queremos usar como vamos a ver a continuación.

Captura de pantalla 2014-12-20 a las 17.01.34

En el apartado de plantillas para mostrar de las propiedades del webpart, marcamos Usar una plantilla única para mostrar elementos y ahí seleccionamos nuestra plantilla

Captura de pantalla 2014-12-20 a las 17.01.58

Una vez hagamos esto con las dos plantillas, ya tendremos las mismas funcionando y podremos ver los resultados de búsqueda con el diseño que queríamos.

Espero que os resulte interesante la información. Un saludo a todos