استایل دهی به Announcement با جاوا اسکریپت

| پرینت |

در ادامه پست ها پیرامون JSLink ، ما در این پست می خواهیم نگاهی به نحوه استایل دهی (Styling) به Announcement ها در یک وب پارت نمای لیست (ListView Webpart) با استفاده از فایل جاوا اسکریپت در شیرپوینت 2013 بیاندازیم.

شما همچنین می توانید مثال دیگری را در رابطه با استایل دهی به Announcement ها با استفاده از CallOut ها را در این پست ببینید.

جهت روشن شدن بهتر این موضوع پنجره زیر دستاورد این پست می باشد.

شیرپوینت 2013 – استفاده از جاوا اسکریپت جهت استایل دادن به Announcement ها

استایل دهی به Announcement با جاوا اسکریپت در شیرپوینت :

حال به مراحل انجام این کار می پردازیم :

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 شبیه زیر ایجاد کنید.

شیرپوینت 2013 – استفاده از جاوا اسکریپت جهت استایل دادن به Announcement ها

4- وب پارت را به حالت ویرایش برده و مسیر رفرنس JS Link برای فایل جاوا اسکریپت اضافه کنید که در گالری master Page آپلود کرده اید. در این مثال مسیر ما بدین صورت می باشد.

~site/_catalogs/masterpage/Announcement_CallOut_Popup_Script.js’

شیرپوینت 2013 – استفاده از جاوا اسکریپت جهت استایل دادن به Announcement ها