Hướng dẫn tạo Tab Web Part trên SharePoint 2013

Khi trang SharePoint của bạn có rất nhiều Web Part được add vào thì việc xem tất cả các Web Part này rất khó khăn. Trong bài viết này, tôi sẽ giới thiệu đến các bạn cách gộp nhiều Web Part trong SharePoint 2013 lại để tạo Tab Pages Web Part. Phần Web Part này sẽ nhận các title Web Part như một paramater và convert các Web Part này thành các tab nhỏ. Điều này sẽ giúp bạn dễ dàng chọn các Web Part dựa trên các tab hơn, bạn làm các bước như sau:

Bước 1: Mở SharePoint Designer, chọn Site > Open Site và nhập địa chỉ trang SharePoint.

Bước 2: Xuất hiện thông báo đăng nhập vào tài khoản Office 365.

Bước 3: Thêm trang javaScript vào Site Assets folder như sau: Chọn Site Assets, chọn menu Asset trên thanh ribbon. Sau đó chọn JavaScript và đặt tên file.

Click chuột phải vào file vừa tạo, chọn Edit File in Advanced Mode và thêm vào như sau:

[csharp]
<!– Reference the jQueryUI theme’s stylesheet on the Google CDN. Here we’re using the "Start" theme –>
<link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<!– Reference jQuery on the Google CDN –>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!– Reference jQueryUI on the Google CDN –>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>

<style type="text/css">
</style>

<script type="text/javascript">
jQuery(document).ready(function($) {
//Put the Web Part Title for all the Web Parts you wish
//to put into the tabbed view into the array below.
HillbillyTabs(["Documents","Apps in Testing"]);
});

function HillbillyTabs(webPartTitles)
{
for(index in webPartTitles)
{
var title = webPartTitles[index];
$("#HillbillyTabs").append(‘<li><a href="#Tab’+index+’" id="TabHead’+index+’" onclick="SetActiveTab(this.id);">’+
title+'</a></li>’).after(‘<div id="Tab’+index+’"></div>’);
$("span:contains(‘"+title+"’)").each(function(){
if ($(this).text() == title){
var webPart = $(this).hide().closest("span").closest("[id^=’MSOZoneCell_WebPart’]");
if ($(webPart).contents().html() != undefined)
{
webPart = $(webPart).contents();
}
$("#Tab" + index).append((webPart));
}});
}
$("#tabsContainer").tabs();
}

</script>
<div id="tabsContainer"><ul id="HillbillyTabs"></ul></div>
[/csharp]

Chú ý:

Trong đoạn script bên dưới, bạn nhập tên các tabs mà bạn muốn hiển thị vào phần HillbillyTabs. Các tabs này phải trùng tên với title của Web Part mà bạn thêm vào thì phần Web Part mới được convert thành các Tab.

[csharp]jQuery(document).ready(function($) {
//Put the Web Part Title for all the Web Parts you wish
//to put into the tabbed view into the array below.
HillbillyTabs(["Documents","Apps in Testing"]);
});
[/csharp]

Bước 4: Tạo một Web Part page với SharePoint Designer như sau: chọn Site Pages, sau đó chọn Web Part Page trên thanh ribbon.  Chọn loại Web Part: header, footer, 3 columns và đặt tên là DemoTabs.

Bước 5: Mở trang SharePoint, chọn Site Contents > Site Pages > chọn trang DemoTabs. Sau khi load trang xong, chọn thẻ Page, nhấn Edit Page.

Bước 6: Thêm các Web Part vào trang DemoTabs, những phần mà bạn muốn được hiển thị trong Tab.

Nhấn vào Add a Web PartLeft column để thêm Web Part vào như hình bên dưới. Ở ví dụ này, tôi add 2 Web Part là Documents và Apps in Testing vào Left columns.

Bước 7: Nhấn Add a Web Part ở header. Sau đó chọn Meadia and Content > Content Editor > Nhấn Add.

Bước 8: Chọn Content Editor vừa được add, nhấn vào mũi tên ở góc bên phải, chọn Edit Web Part.

Bước 9: Nhập URL của file javaScript đã được lưu trong folder Site Asset. Nhấn Test Link để kiểm tra file.

Bước 10: Nếu đúng link, nhấn Apply bạn sẽ thấy xuất hiện 2 tabs được khai báo trang file HillbillyTabs.js.

Bước 11: Nhấn Stop Editing trên panel Page để lưu lại và kiểm tra kết quả.

Giờ thì bạn đã có thể để nhiều Web Part vào các thẻ Tabs một cách dễ dàng. Chúc các bạn thành công.

Gửi bình luận tại đây