در ادامه پست ها پیرامون JSLink ، ما در این پست می خواهیم نگاهی به نحوه استایل دهی (Styling) به Announcement ها در یک وب پارت نمای لیست (ListView Webpart) با استفاده از فایل جاوا اسکریپت در شیرپوینت 2013 بیاندازیم.
شما همچنین می توانید مثال دیگری را در رابطه با استایل دهی به Announcement ها با استفاده از CallOut ها را در این پست ببینید.
جهت روشن شدن بهتر این موضوع پنجره زیر دستاورد این پست می باشد.
حال به مراحل انجام این کار می پردازیم :
1- یک فایل جاوا اسکریپت ایجاد کنید و اسکریپت زیر را در فایل Js. خود کپی و Paste کنید و آن را بعنوان Announcement ذخیره کنید.
(function () {
var itemCtx = {};
itemCtx.Templates = {};
itemCtx.Templates.Header = “<div><b>Announcements</b></div><table>”;
itemCtx.Templates.Item = ItemOverrideFun;
itemCtx.Templates.Footer = “</table>”;
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 104;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
})();
function ItemOverrideFun(ctx) {
var _announcementTitle = ctx.CurrentItem.Title;
var _announcementDesc = ctx.CurrentItem.Body;
var _announcementID = ctx.CurrentItem.ID;
return “<tr><td><p><b>” + _announcementTitle + “</b></p>” + _announcementDesc +”<a href=’/Lists/Company%20Announcements/DispForm.aspx?ID=’+ _announcementID +’> Read More…</a></td></tr>”;
}
2- در گالری Master Page فایل جاوا اسکریپت تان را بعنوان یک JavaScript Display Template جدید آپلود کنید.
برای این مثال ما فایل جاوا اسکریپت Announcement_CallOut_Popup_Script.js را در گالری Master Page ایجاد کرده و آن را به عنوان یک JavaScript Display Template جدید آپلود کرده ایم. جهت مشاهده جزئیات این کار به پست بارگزاری JavaScript Display Template مراجعه کنید.
3- یک لیست سفارشی با استفاده از Announcement شبیه زیر ایجاد کنید.
4- وب پارت را به حالت ویرایش برده و مسیر رفرنس JS Link برای فایل جاوا اسکریپت اضافه کنید که در گالری master Page آپلود کرده اید. در این مثال مسیر ما بدین صورت می باشد.
~site/_catalogs/masterpage/Announcement_CallOut_Popup_Script.js’
5- پس از Apply کردن ، آیتم های لیست همانند شکل زیر خواهند شد :
پست مرتبط :
طراحی پرتالهای اینترنت و اینترانت
سامانه مدیریت پروژه سازمانیEPM
سامانه درخواست مرخصی و ماموریت