Thế nhưng, việc bỏ đi breadcrumb trên document list hay list khác làm người dùng vô cùng hụt hẫng. Họ không biết cách chuyển từ folder này qua folder khác như thế nào với giao diện mới. Mà khi họ đã quá quen với việc sử dụng folder trong windows truyền thống thì chức năng này vô cùng hữu ích.

May mắn là SharePoint cho chúng ta các thức làm việc toàn diện nên chúng ta hoàn toàn có thể customize lại để phục hồi nguyên trạng như xưa. Nhưng thay vì ngồi làm, chúng tôi giới thiệu SharePoint Breadcrumb V3 có sẵn và miễn phí trên thị trường hiện nay.

Tính năng mới nhất của sản phẩm miễn phí này là:

  • Show Folders: hiển thị đầy đủ và tất cả folder trong Doc Lib
  • Hide Page Libraries: chức năng này cho phép ẩn/hiện tất cả các trang libraries bao gồm cả multilingual (với SP Online thì support đầy đủ, với SP on-premise thì ẩn hoàn toàn, không cho hiện ra)
  • Hide from pages: cho phép ẩn breadcrumb trên 1 số trang đặc biệt được đinh nghĩa bằng URL
  • Breadcrumb element: chức năng này cho phép bạn đặt Breadcrumb ở vị trí nào trong site, chỉ cần cho biết tên phần tử tại vị trí bạn muốn đặt. Ví dụ: bạn muốn đặt tại tag DIV có tên "abc" chỉ cần chỉ cái tên "abc", bộ sản phẩm này tự động thêm breadcrumb vào vị trí chỗ tag div đó.

Cài đặt

Sản phẩm được build thành wsp file nên việc cài đặt rất dễ dàng (có thể hỗ trợ sandbox)

  1. Mở site cần cài đặt, vào site settings
  2. Click Solutions dưới mục Web Designer Galleries
  3. Upload file wsp vào Solutions lib và click Activate

Cấu hình

Để cấu hình breadcrumb, bạn chịu khó mở SharePoint Designer lên và mở site bạn cần cấu hình

  1. Bạn vào  All Files =>  Style Library => FabricUIBreadcrumb => js
  2. Click Check out và click Edit with Advanced Mode file có tên  breadcrumb.js
  3. Sau khi mở file, trên cùng file có biến tên là breadcrumbProperties, bạn thay đổi thông số cho biến này
    var breadcrumbProperties = {
        showFolders: true,
        breadcrumbElement: "",
        pagesLibrary: "Pages",
        sitePagesLibrary: "SitePages",
        hidePageLibraries: true,
        hideFromPages: [""]
    };
     
    Thuộc tính Kiểu Giá trị mặc định
    showFolders Boolean True
    breadcrumbElement String (id of DOM element e.g. “#breadcrumb”) “”
    pagesLibrary String “Pages”
    sitePagesLibrary String “Site Pages”
    hidePageLibraries Boolean True
    hideFromPages String Array [“”]
  4. Xong lưu lại file và publish as major

Tạo package mới

Nếu bạn muốn cài đặt breadcrumb này ở một site khác mà bạn không muốn chỉnh sửa phức tạp, bạn có thể đóng gói cái có sẵn ở site hiện tại và dùng cái này deploy lên site khác.

  1. Bạn download và cài đặt WSP Package Tool tại đây
  2. Bạn đổi cái đuôi wsp của file Breadcrumb_V3.wsp thành Breadcrumb_V3.cab (hoặc zip), sau đó giải nén ra một thư mục nào đó
  3. Sau khi giản nén xong bạn vào thư mục: SharePointBreadcrumb_Breadcrumb feature =>  Style Library =>  FabricUIBreadcrumb =>  js
  4. Cập nhật file breadcrumb.js (sửa code hay làm cái gì đó tùy bạn)
  5. Mở  WSP Repackage Tool
  6. Chọn thư mục nãy bạn giải nén và cập nhật code cho file js
  7. Chọn thư mục bạn muốn lưu file wsp mới
  8. Chọn tên package mới
  9. Click package
  10. Xong

Download SharePoint Breadcrumb V3  tại đây

Hoặc trên Github