شیرپوینت 2013 تغییرات محسوسی در ظاهر خود و در واسط کاربریش اعمال کرده است . یکی از این تغییرات JS Link است که به کاربر امکان مدیریت روی Render کردن موجودیت‌های روی صفحه مانند فیلد‌ها ، آیتم‌ها و وب پارت‌ها را به کمک جاوااسکریپت می‌دهد. در این پست نحوه استفاده از این ویژگی جدید را بیان میکنم .
وارد سایت شده و یک لیست ایجاد کنید . (در اینجا از Custom List استفاده میکنیم .)
و ان را داده آمایی میکنیم . هدف این است که بر مبنای عدد موجود در لیست ، رنگ زمینه آن ایتم تغییر کند .
یک فایل جاوااسکریپت ایجاد کنید و کد زیر را در آن ذخیره کنید (از اینجا دانلود کنید) :
(function () {
var itemCtx = {};
itemCtx.Templates = {};
itemCtx.Templates.Header = "<div><b title=\"اطلاعات فیلم ها\">Movie Data</b></div><ul>";
itemCtx.Templates.Item = MyOverrideTemplate;
itemCtx.Templates.Footer = "</ul>";
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 100;
//For Generic List (More : http://msdn.microsoft.com/en-us/library/ms462947(v=office.12).aspx)
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();
function GT(val , index)
{
// example of val : 60 %
var temp = val.split(' ')[0];
var v = Number(temp);
return v > index;
}
function LT(val, index) {
var temp = val.split(' ')[0];
var v = Number(temp);
return v < index;
}
function EQ(val, index) {
var temp = val.split(' ')[0];
var v = Number(temp);
return v == index;
}
function MyOverrideTemplate(ctx) {
if (LT(ctx.CurrentItem.PopularityPercent ,25))
{
return "<li title='خیلی کم بازدید' style='color:white;background-color: red;width: 300px;height: 24px;'>" +
ctx.CurrentItem.Title + " – " + ctx.CurrentItem.PopularityPercent + "</li>";
}
else
if (LT(ctx.CurrentItem.PopularityPercent ,50))
{
return "<li title='کم بازدید' style='color:maroon;background-color: #ffcc00;width: 300px;height: 24px;'>" +
ctx.CurrentItem.Title + " – " + ctx.CurrentItem.PopularityPercent + "</li>";
}
else
if (LT(ctx.CurrentItem.PopularityPercent ,75))
{
return "<li title='بازدید معمولی' style='color:#ffcc00;background-color: maroon;width: 300px;height: 24px;'>" +
ctx.CurrentItem.Title + " – " + ctx.CurrentItem.PopularityPercent + "</li>";
}
else
if (LT(ctx.CurrentItem.PopularityPercent ,95))
{
return "<li title='پر بازدید' style='color:yellow;background-color: blue;width: 300px;height: 24px;'>" +
ctx.CurrentItem.Title + " – " + ctx.CurrentItem.PopularityPercent + "</li>";
}
else
if (EQ(ctx.CurrentItem.PopularityPercent, 100)) {
return "<li title='بالاترین بازدید' style='color:black;background-color: green;width: 300px;height: 24px;'>" +
ctx.CurrentItem.Title + " – " + ctx.CurrentItem.PopularityPercent + "</li>";
}
else {
return "<li title='نامعلوم' style='color:navy;background-color: yellow;width: 300px;height: 24px;'>" +
ctx.CurrentItem.Title + " – " + ctx.CurrentItem.PopularityPercent + "</li>";
}
} حال وارد Site Setting شده و وارد Master Pages شوید
فایل جاوااسکریپت فوق را از قسمت ریبون و تب Document آپلود کنید و منتظر بمانید تا پس از بارگذاری پنجره ویژگی‌های فایل نمایش داده شود
هنگلام پر کردن فیلد‌ها به این نکات دقت کنید :
در قسمت Content Type گزینه جدیدی که در این نسخه از شیرپوینت اضافه شده یعنی JavaScript Display Template را انتخاب کنید
در قسمت Target Control Type یکی از سه گزینه view یا Form ویا Field باید انتخاب شوند که در اینجا View را انتخاب میکنیم
standalone را روی override تنظیم میکنیم . همچنین گزینه Target Scope را که مسیر اعمال فایل است به رووت تنظیم میکنیم
در نهایت شناسه List template را به توجه به لیست مورد نظر که در اینجا Custome list است مقدار دهی میکنیم . (بیشتر )
سپس اطلاعات را ذخیره میکنیم .
برای آزمایش این تغییرات بک صفحه می‌سازیم و وب پارت لیست مورد نظر را به آن اضافه میکنیم
سپس وارد تنظیمات وب پارت شده و وارد قسمت Miscellaneous می‌شویم
در قسمت JS Link مسیر فایل خود را به صور نسبی وارد کنید
~site/_catalogs/masterpage/MyJsLinkSample.js
و نتیجه نهایی :
در صورت بروز Exception در فایل جاوااسکریپت ، خطا به صورت زیر نمایش داده خواهد شد :
