Las migas de pan son una opción muy útil en Sharepoint. Ayuda a los usuarios a saber su ubicación actual en el sitio y a volver, en el caso de que lo deseen, al inicio. Por defecto, esta característica no está habilitada en SharePoint 2013. Podemos activar esta funcionalidad desde la master page, pero como podrás comprobar tú mismo, no se muestra del todo bien. Este artículo tiene como objetivo enseñarte como personalizar los breadcrumbs de Sharepoint.
En la red puedes encontrar miles de tutoriales para habilitar las migas de pan en SharePoint 2013. Así que vamos a ver cómo hacerlo. En el HTML principal, tenemos que modificar el siguiente div.
<div class="ms-breadcrumb-dropdownBox" style="display:none;">
<!--SPM:<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">-->
<!--SPM:<SharePoint:PopoutMenu
Visible="false"
runat="server"
ID="GlobalBreadCrumbNavPopout"
IconUrl="/_layouts/15/images/spcommon.png?rev=42"
IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
ThemeKey="v15breadcrumb"
IconOffsetX="215"
IconOffsetY="120"
IconWidth="16"
IconHeight="16"
AnchorCss="ms-breadcrumb-anchor"
AnchorOpenCss="ms-breadcrumb-anchor-open"
MenuCss="ms-breadcrumb-menu ms-noList">-->
<div class="ms-breadcrumb-top">
<!--SPM:<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>"/>-->
</div>
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">-->
<!--SPM:<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="ms-breadcrumb"
NodeStyle-CssClass="ms-breadcrumbNode"
CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
RootNodeStyle-CssClass="ms-breadcrumbRootNode"
NodeImageOffsetX="0"
NodeImageOffsetY="289"
NodeImageWidth="16"
NodeImageHeight="16"
NodeImageUrl="/_layouts/15/images/fgimg.png?rev=42"
RTLNodeImageOffsetX="0"
RTLNodeImageOffsetY="312"
RTLNodeImageWidth="16"
RTLNodeImageHeight="16"
RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=42"
HideInteriorRootNodes="true"
SkipLinkText=""/>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:PopoutMenu>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
Del div anterior tenemos que cambiar los siguientes atributos:
- Quitar el style=”display:none” del div
- Poner visible a true en el SharePoint:PopoutMenu
- Después de cambiar todo esto, el div anterior debería parecerse a esto:
<div class="ms-breadcrumb-dropdownBox">
<!--SPM:<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">-->
<!--SPM:<SharePoint:PopoutMenu
Visible="true"
runat="server"
ID="GlobalBreadCrumbNavPopout"
IconUrl="/_layouts/15/images/spcommon.png?rev=42"
IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
ThemeKey="v15breadcrumb"
IconOffsetX="215"
IconOffsetY="120"
IconWidth="16"
IconHeight="16"
AnchorCss="ms-breadcrumb-anchor"
AnchorOpenCss="ms-breadcrumb-anchor-open"
MenuCss="ms-breadcrumb-menu ms-noList">-->
<div class="ms-breadcrumb-top">
<!--SPM:<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>"/>-->
</div>
<!--SPM:<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">-->
<!--SPM:<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="ms-breadcrumb"
NodeStyle-CssClass="ms-breadcrumbNode"
CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
RootNodeStyle-CssClass="ms-breadcrumbRootNode"
NodeImageOffsetX="0"
NodeImageOffsetY="289"
NodeImageWidth="16"
NodeImageHeight="16"
NodeImageUrl="/_layouts/15/images/fgimg.png?rev=42"
RTLNodeImageOffsetX="0"
RTLNodeImageOffsetY="312"
RTLNodeImageWidth="16"
RTLNodeImageHeight="16"
RTLNodeImageUrl="/_layouts/15/images/fgimg.png?rev=42"
HideInteriorRootNodes="true"
SkipLinkText=""/>-->
<!--SPM:</asp:ContentPlaceHolder>-->
<!--SPM:</SharePoint:PopoutMenu>-->
<!--SPM:</SharePoint:AjaxDelta>-->
</div>
Si aplicamos esto en el HTML principal, obtendremos un markup tal que así:
Por lo que el problema es: a nadie le va a convencer esta apariencia, ni este modo de utilizar las migas de pan. Así que por eso, vamos a personalizarlo para que sea un elemento más usable.
Personalización de las migas de pan en SharePoint 2013
Para empezar con buen pie, tenemos que dar este aspecto a SharePoint en vez del que trae por defecto. En SharePoint 2010 esto no pasaba, gozábamos de un buen diseño de migas de pan accesible para todo el mundo. Lo único que he hecho es, en cierto modo, resucitar dicho aspecto:
Para llevar a cabo esto, necesitamos añadir cierto código css y js
CSS
#pageTitle{
display: none;
}
Javascript
SP.SOD.executeOrDelayUntilEventNotified(addBreadcrumb, "sp.bodyloaded");
function addBreadcrumb() {
if (!document.querySelector("#pageTitle span span span")) {
document.querySelector("#pageTitle").style.display = 'block';
return;
}
var elementsInPageTitle = document.querySelector("#pageTitle span").outerHTML;
var breadcrumbDivider = '<span style="height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;"><img src="/_layouts/15/images/spcommon.png?rev=42" alt=":" style="position:absolute;left:-109px !important;top:-232px !important;"></span>';
var allBreadcrumbElements = "";
var siteTitle = _spPageContextInfo.webTitle;
var elementIsExistsPageTitle = function(el) {
return [].some.call(document.querySelectorAll("#pageTitle span span span"), function(sEl) {
return el.innerText == sEl.innerText;
});
};
var breadcrumbClassName = "";
if (document.querySelectorAll(".s4-breadcrumb li a").length) {
breadcrumbClassName = ".s4-breadcrumb li a";
} else {
breadcrumbClassName = ".ms-breadcrumb li a";
}
var indexOfTheLastElement = document.querySelectorAll(breadcrumbClassName).length - 1;
[].forEach.call(document.querySelectorAll(breadcrumbClassName), function(el, index) {
if (el.innerText == siteTitle) {
el.style['font-weight'] = 'bold';
}
if (!(index == indexOfTheLastElement && elementIsExistsPageTitle(el))) {
allBreadcrumbElements += '<span>' + el.outerHTML + '</span>' + breadcrumbDivider;
}
});
allBreadcrumbElements += elementsInPageTitle;
document.querySelector("#pageTitle").innerHTML = allBreadcrumbElements;
document.querySelector("#pageTitle").style.display = 'block';
}
Implementación
La implementación es muy sencilla. Todo lo que tenemos que hacer es crear sendos archivos css y js y agregarlos a nuestra página HTML principal. Para ello crearemos dos archivos llamados: breadcrumb.js y breadcrumb.css
Ahora sube estos archivos a una librería, acorde a tus necesidades. Yo, personalmente en esta prueba, los he subido en la librería de estilos. Si has completado todo el proceso, tu página HTML principal debería contener esto:
<!--SPM:<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/Custom/breadcrumb.css %>" runat="server"/>-->
<!--SPM:<SharePoint:ScriptLink language="javascript" name="~sitecollection/Style Library/Custom/breadcrumb.js" runat="server" Localizable="false"/>-->
Una vez integrado todo, debería funcionarte con toda normalidad en el navegador. Esto es solo el comienzo en la personalización de las migas de pan de SharePoint 2013, ya consiste en ti en que sigas indagando aún más en el tema. Cualquier comentario o sugerencia, ya sabéis que, siempre es bienvenido.