SharePoint 2013: Personalizando Nuestro Buscador
Esto podemos usar para mostrar algún dato de una columna en nuestro Buscador o bien agregar algún dato del User Profile.
Para empezar tenemos que definir es la propiedad que vamos a buscar. Para eso tenemos que acceder a la Central Administrator.
Inicio > Todos los Programas > Sharepoint 2013 > Administración central de Sharepoint 2013
https://stucker2016.files.wordpress.com/2016/04/consola.png
Una ves dentro tenemos que ir a Administrar aplicaciones de servicio dentro del grupo Administración de Aplicaciones
https://stucker2016.files.wordpress.com/2016/04/administracion-aplicaciones.png
Buscamos el servicio de Busqueda por defecto tiene el nombre "Aplicación de servicio de búsqueda"
https://stucker2016.files.wordpress.com/2016/07/busqueda.png?w=680
Dentro del servicio de Búsqueda, vamos a Esquema de Búsqueda en el grupo Consultas y Resultado del menú de Navegación.
https://stucker2016.files.wordpress.com/2016/07/esquema.png
Ahora vamos a tener que buscar las propiedades que queremos mostrar. Un detalle importante.
Si la Columna esta creada como columna de Sitio esta crea la propiedad automáticamente siguiendo el cuadro que les pongo a continuación:
| Tipo de Columna de Sitio | Nombre de la Propiedades rastreadas | Nombre de la Propiedades administradas | Fomato de los Datos |
|---|---|---|---|
| Linea Simple de Texto | ows_q_TEXT_NombreDeLaColumna | NombreDeLaColumnaOWSTEXT | Normal |
| Multiple lineas de Texto | ows_r_MTXT_NombreDeLaColumna | NombreDeLaColumnaOWSMTXT | Normal |
| Elección | ows_q_CHCS_NombreDeLaColumna | NombreDeLaColumnaOWSCHCS | El texto seleccionado |
| Elección(con multiples opciones) | ows_q_CHCM_NombreDeLaColumna | NombreDeLaColumnaOWSCHCM | El texto de los valores seleccionados separados por una semicolumna y el id del item por ejemplo 2;# Valor 4;#. Valor |
| Numero | ows_q_NMBR_NombreDeLaColumna | NombreDeLaColumnaOWSNMBR | Va a mostrar el valor textual usando el punto para mostrar los decimales. Tengan en cuenta que esto no puede usarse con otro Entero ya que solo sirve para buscar y mostrar. |
| Moneda | ows_q_CURR_NombreDeLaColumna | NombreDeLaColumnaOWSCURR | Va a mostrar el valor textual usando el punto para mostrar los decimales. Tengan en cuenta que esto no puede usarse con otro Entero ya que solo sirve para buscar y mostrar. |
| Fecha y hora | ows_q_DATE_NombreDeLaColumna | NombreDeLaColumnaOWSDATE | Muestra textual el valor que posee el campo con el formato YYYY-MM-DDTHH:MM:SSZ. For example, Diciembre 25, 2012, 7 AM GMT is 2012-12-25T07:00:00Z. Este formateo no puede ser usado para ningun tipo de comparación es solo a modo ilustrativo. |
| Si / No | ows_q_BOOL_NombreDeLaColumna | NombreDeLaColumnaOWSBOOL | Para verdadero va a un 1 y para negativo va a mostrar un 0. |
| Persona o Grupo | ows_q_USER_NombreDeLaColumna | NombreDeLaColumnaOWSUSER | Mail | Nombre a Mostgrar | Nombre | Codificación del Clain. Por Ejemplo, "ellenk@contoso.com | Ellen Kessels | 693A30232E777C7265646D6F6E645C70696E676A i:0#.w|contoso\ellenk” |
| Imagen o Enlace | ows_q_URLH_NombreDeLaColumna | NombreDeLaColumnaOWSURLH | URL, descripción. Por Ejemplo, http://stucker2016.wordpress.com, Lo que Sharepoint nos dejo. |
| Publicación de HTML | ows_r_HTML_NombreDeLaColumna | NombreDeLaColumnaOWSHTML | Muestra los tags de Html . Por Ejemplo, <p><div><b>some html </b&</div></p>. |
| Publicación de Imagen | ows_q_IMGE_NombreDeLaColumna | NombreDeLaColumnaOWSIMGE | Html imagen tag. Por ejemplo, <img alt="" src="/sites/pub/SiteCollectionImages/home.jpg" style="BORDER:0px solid;" />. |
| Publicación de Enlance | ows_q_LINK_NombreDeLaColumna | NombreDeLaColumnaOWSLINK | Html Enlace tag.Por Ejemplo, <a href="http://www.microsoft.com" target="_blank" title="mytooltip">Microsoft Website</a>. |
| Administrador de MateData | ows_taxId_NombreDeLaColumna | owstaxIdNombreDeLaColumna | Muestra el valor seguido por el GUID de su id unico. |
| Entero | ows_q_INTG_NombreDeLaColumna | NombreDeLaColumnaOWSINTG | Muestra el valor textual. Este valor no puede ser usado para hacer una comparación. |
| GUID | ows_q_GUID_NombreDeLaColumna | NombreDeLaColumnaOWSGUID | El valor textual de una Guid. Por ejemplo, {147C6BA1-709C-4401-964A-27AC36B62C54}. |
Y van a poder verla en la pagina de Propiedades Administrativas sino van a tener que crearla.
No importa cual de las dos opciones tengan que tomar asegúrense que la propiedad administrativa contenta los siguientes tildes.
https://stucker2016.files.wordpress.com/2016/07/permite-busqueda.png
https://stucker2016.files.wordpress.com/2016/07/parametros.png?w=680
También vamos a usar esta propiedad como Refinador de la Búsqueda por lo que seleccionen Si, Activa en la propiedad Restringible.
https://stucker2016.files.wordpress.com/2016/07/restringuible.png
En caso de haber creado la propiedad vallan en la parte de abajo. Hasta la sección Asignaciones a propiedades rastreadas
Apretamos Agregar una asignación.
https://stucker2016.files.wordpress.com/2016/07/agregar-una-asignacion.png
Les va a abrir un cuadro de búsqueda, pongan el nombre de la lista sin espacios por ejemplo en mi caso es Organismo. No necesitan poner el nombre completo.
https://stucker2016.files.wordpress.com/2016/07/seleccione-asignaciopn.png
En mi caso aparecen dos por que tengo una columna de Lista y una de Sitio. Pueden asignar múltiples columnas a un misma propiedad.
Seleccionen la propiedad y apreten Aceptar.
Les Debería quedar algo así:
https://stucker2016.files.wordpress.com/2016/07/asignacion.png?w=680
Apreten nuevamente Aceptar
Ahora bien, para que esto tome efecto vamos a tener que hacer un Rastreo completo de los sitios para que las propiedades contengan los datos de la lista.
Para eso en el menú de navegación vamos a Orígenes de Contenido dentro del grupo Rastreo.
https://stucker2016.files.wordpress.com/2016/07/rastreo.png
Expandan el menú desplegable del contenido del sitio y seleccionen Iniciar rastreo Completo
https://stucker2016.files.wordpress.com/2016/07/rastreo-completo.png
Va a empezar a correr.
https://stucker2016.files.wordpress.com/2016/07/iniciando-rastreo.png
Esperamos a que termine y este en estado Inactivo.
https://stucker2016.files.wordpress.com/2016/07/rastreo-complatado.png
Ahora llego el momento de Modificar el buscador para que podamos refinar la búsqueda y que aparezcan nuestras propiedades en los items.
Para eso vamos a nuestro Centro de Búsqueda Empresarial, en caso de no tenerlo creen uno.
tienen que entrar a la pagina /Paginas/results.aspx en mi caso seria la url completa http://spsdev01/Busqueda/Paginas/results.aspx donde Busqueda es mi Colección de sitios de Centro de Busqueda Empresarial.
Ahora una ves dentro de la pagina vallan a la Tuerca > Editar página
https://stucker2016.files.wordpress.com/2016/07/editar-pagina.png
Primero vamos a agregar el refinador, para eso nos situamos en la Zona de navegación y seleccionamos Refinamiento.
En la ribbon seleccionamos Elemento Web > Propiedades de Elementos Web
https://stucker2016.files.wordpress.com/2016/07/elemento-web.png
Nos va a dar las opciones de la Web Part
https://stucker2016.files.wordpress.com/2016/07/propiedades-de-la-web-part.png
Apreten el Botón Elegir refinadores
Seleccionamos la propiedad que queremos y ponemos Agregar >
https://stucker2016.files.wordpress.com/2016/07/selecionamos-refinador.png
Apreten Aceptar.
Nota: Pueden ponerle un Alias o otras propiedades o mismo ordenar el orden de los refinadores.
Apretamos de nuevo Aceptar para que tome los cambios.
Antes de Cerrar la pagina necesitamos hacer una modificación mas. Seleccionen Resultados de Búsqueda y en la ribbon apreten en Propiedades de elementos Web
Una vez que muestre las propiedades seleccionen Use una plantilla única para mostrar elementos y en el desplegable Plantilla para mostrar elementos seleccionen Elemento Predeterminado
https://stucker2016.files.wordpress.com/2016/07/plantilla.png
Ahora apreten Aceptar.
Ahora en la Ribbon Vallan a Publicar > Publicar
https://stucker2016.files.wordpress.com/2016/07/publicar.png
Les pira un comentario, esto es opcional pueden colocarlo o no.
https://stucker2016.files.wordpress.com/2016/07/comentario-publicaar.png
Apreten Continuar.
Ahora bien vamos a modificar el Script para mostrar los datos que queremos en los items.
Para eso vamos a necesitar el Sharepoint Designer
Ingresen al sitio con el y vallan a Todos los archivos > _catalogs > masterpage > Display Templates > Search
https://stucker2016.files.wordpress.com/2016/07/path-scripts.png?w=680
Ahora bien, ustedes verán que aparecen unos símbolos al lado de ciertos archivos, es por que estuve jugando con mis archivos. Eso indica que el archivo no es el original del sitio.
Ahora vamos a hacer un pequeño repaso de lo que vamos a hacer para que todos estemos en sintonia.
Primero que nada van a ver que hay un .html y un .js por cada archivo si ustedes modifican el Html directo este se replicara en el js y no asi el js asi el html. Por lo que les aconsejo siempre modificar el html.
Ahora bien, vamos algo importante antes de empezar a jugar con los archivos.
Los items de búsqueda están separados en varios tipos Nosotros nos vamos a concentrar en los que empiezan con Item_
Ahora bien van a ver que por ejemplo para el Item propiamente tenemos varios archivos el que esta con recuardo en rojo es el archivo Item_Default.html y el azul corresponde al archivo Item_CommonItem_Body.html
https://stucker2016.files.wordpress.com/2016/07/item-busqueda-body.png
lo mismo con el hover, el rojo es el archivo Item_Default_HoverPanel.html, el verde corresponde a Item_CommonHoverPanel_Header.html, el azul a Item_CommonHoverPanel_Body.html y el amarillo a Item_CommonHoverPanel_Actions.html
https://stucker2016.files.wordpress.com/2016/07/hover.png
Ahora bien, viendo todas las partes que tenemos para tocar podemos jugar un poco con lo que queremos.
Cabe destacar que si quieren aplicar estilos a los pedazos no usen la primer div por ejemplo <div id="Item_CommonItem_Body" > </div> por que no les va a tomar el estilo ya que esta div es simplemente indicativa para el script. Por ejemplo si quieren hacer los bordes como el que hice yo antes metan una div hija y encierren todos los items dentro de esa.
Ahora hablemos un poco del script, en la parte superior de los Body pueden ver que existe una declaración ManagedPropertyMapping donde tienen propiedades, estas son las que van a cagar cuando haga la consulta.
Bueno dentro de Item_CommonItem_Body.html en la declaración antes dicha vamos a agregar entre 'Title':'Title' y 'Path':'Path' 'NombreDeLaPropiedad':'NombreDeLaPropiedad' en mi caso quedaria asi :
https://stucker2016.files.wordpress.com/2016/07/mapping.png?w=680
Nota: esto puede aparecer también como 'Title':'Title','Path':'Path'. en este caso poner la propiedad entre ''
Ahora busquen donde quieran poner la propiedad y utilizan el siguiente comando ctx.CurrentItem.NombreDeLaPropiedad esto es javascript por lo que si lo quieren hacer entre un div por ejemplo lo ponen entre _=# #=_ por ejemplo:
<div> _=# ctx.CurrentItem.NombreDeLaPropiedad #=_ </div>
En caso de no tener nada no va a mostrar nada. También podrían mostrar un fragmento de html dependiendo si tiene algún valor:
<!--#_
if(!$isEmptyString(ctx.CurrentItem.NombreDeLaPropiedad)
{
_#-->
<div> _=# ctx.CurrentItem.NombreDeLaPropiedad #=_ </div>
<!--#_
}
_#-->
o bien citar a una imagen usando la url que contenga el parámetro
<div> <img src=' _=# ctx.CurrentItem.NombreDeLaPropiedad #=_ '/> </div>