آموزش وردپرس قالب وردپرس قالب رايگان وردپرس درس وردپرس
نحوه استفاده از JSLink - گروه ساقه
فیلتر نمای شیرپوینت بر اساس شخص و گروه های عضو
آبان ۱, ۱۳۹۶
آموزش نصب شیرپوینت ۲۰۱۶
آبان ۶, ۱۳۹۶

نحوه استفاده از JSLink

در این مقاله با پیاده سازی دو مثال نحوه تغییر نمای لیست توسط JSLink را آموزش می دهیم. اما پیش از هرچیز باید با مفهوم CSR و JSLink آشنا شویم:
CSR چیست ؟
Client-Side Rendering یا رندر کردن در سمت کاربر، مفهوم جدیدی در شیرپوینت 2013 است که به شما اجازه می دهد رندر خروجی شخصی خود را برای مجموعه ای از کنترل های میزبانی شده در یک صفحه شیرپوینت داشته باشید. تمام کاری که وب پارت های سمت سرور انجام می دهند قرار دادن مقادیر زیادی از داده های خام در فرمت JSON در صفحه است. این داده ها در زمان بارگذاری صفحه به آبجکت JS تبدیل می شوند سپس در سمت کاربر عملیات Rendering آغاز می شود.
JSLink یک روش معرفی شده در شیرپوینت 2013 است که از ترکیب JavaScript ، HTML و CSS برای شخصی سازی نماهای لیست شیرپوینت، فرم های لیست و رندر کردن فیلدها کاربرد دارد.
اگر می خواهید یک لیست را با یک رندر شخصی تغییر دهید می توانید مشخصه JSLink لیست را بوسیله تغییر مشخصه های وب پارت آن و پیکر بندی خاصیت JS Link تعیین کنید. لیست شما بصورت اتوماتیک فایل JavaScript را در زمان رندر کردن لود می کند.
توجه داشته باشید که JS Link در زمانی که شما از یک فرم لیست شخصی سازی شده(ویرایش شده در Sharepoint Designer) استفاده می کنید، کار نمی کند.

نحوه آپلود فایلهای JavaScript بعنوان الگوی نمایش در شیرپوینت

پس از ایجاد فایل js خود برای استفاده در سایت مراحل زیر را دنبال کنید:
  1. از تنظیمات سایت در گالری های طراح وب و یا Web Designer Galleries صفحات اصلی یا Master Pages را انتخاب کنید.

  2. از زبانه پرونده ها(Files) سند جدید را بارگذاری یا Upload کنید.

  3. فایل جدید javascript که قبلا ایجاد کردید را انتخاب کنید.

  4. در بخش نوع محتوا JavaScript Display Template را انتخاب کنید.

  5. بقیه موارد را مشخص و سپس ذخیره کنید.
جهت مشاهده نمونه هایی از کاربرد JSLink می توانید به این آدرس مراجعه نمایید
بطور مثال برای عوض کردن رنگ مقادیر در ستون اولویت بر اساس اهمیت آنها:
(function () { 
//ایجاد آبجکت شامل اطلاعات درباره فیلدی که می خواهیم رندر خروجی آن را تغییر دهیم
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
//ایجاد رندر جدید برای فیلد اولویت در نمای لیست
        "Priority": { "View": priorityFiledTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 
})(); 
//نحوه رندر کردن نمایش لیست
function priorityFiledTemplate(ctx) { 
    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];  
//برگرداندن عنصر اچ تی ام ال با رنگ اختصاص یافته بر اساس مقدار اولویت
    switch (priority) { 
        case "(1) بالا": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
            break; 
        case "(2) عادی": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) پایین": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    } 
} 
در حالت "ویرایش صفحه" بر روی وب پارت خود کلیک کرده و از تنظیمات وب پارت در بخش متفرقه به پیوند JS آدرس فایل js مورد نظر را بدهید.
توجه داشته باشید که مسیر فایل js در سایت را درست وارد کنید. این مسیر نمی تواند یک نام عادی باشد و باید شامل مقادیر زیر در ابتدا باشد:

~site
~siteCollection
~layouts
~siteLayouts
~siteCollectionLayouts

تغییرات را اعمال کرده و توقف ویرایش صفحه را بزنید. خواهید دید که تغییرات شما بلافاصله اعمال خواهد شد.

مثال دیگری برای تغییر نحوه نمایش درصد انجام شده وظایف:
(function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Fields = {'PercentComplete': { 'View': renderPercentComplete
}};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
function renderPercentComplete(ctx) {

    var fieldVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var percentComplete = fieldVal.toString().replace(" ", "");
    var mouseOver = 'this.childNodes[1].style.display="block";';
    var mouseOut = 'this.childNodes[1].style.display="none";';

    var html = '';
	html += "<div style='width:100%;height:20px;border:1px solid #AEAEAE;position:relative;'";
    html += "class='csr-progress-container'onmouseover='" + mouseOver + "'onmouseout='" + mouseOut + "'>";
    html += "<div style='background-color:#0072C6;height:100%;width:" + percentComplete + ";'></div>";
    html += "<p style='width:100%;text-align:center;position:absolute;top:0px;left:0px;display:none;margin:0px;'>";
    html += percentComplete;
    html += "</p>";
    html += "</div>";
	return html;
	}

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *